迹忆客 专注技术分享

JavaScript 对象由键值对形式的属性组成。如果我们将它们与字符串一起记录，我们会看到 [object Object]。它隐藏下面的对象属性。在编码时，我们需要将 javascript 对象转换为字符串数据类型。特别是在将数据存储到 localstorage 或数据库时。我们可以通过多种方式将 javascript 对象转换为字符串。

JSON.stringify() 是一个强大且常用的函数，用于将 javascript 对象转换为 JSON 字符串。我们还可以使用它来设置 JSON 表示的样式以获得更好的可读性。该函数接受三个参数：

使用方法请参考以下代码。

var item = {};
item.id = 1;
item.name = "icy-cream";
item.flavor = "vanilla";
console.log("Item: " + item);
console.log("Item: " + JSON.stringify(item));
console.log("Item: " + JSON.stringify(item, null, 2));

输出：

Item: [object Object]
Item: {"id":1,"name":"icy-cream","flavor":"vanilla"}
Item: {
  "id": 1,
  "name": "icy-cream",
  "flavor": "vanilla"
}

第一个日志输出 javascript 对象的屏蔽版本。第二个日志具有 JSON 对象的字符串表示形式，但没有格式化。最后一个日志是 javascript 对象的格式化版本，可读性很强。

console.log() 是一个内置的 javascript 函数，用于将值记录到浏览器控制台。它接受三个参数。第一个参数是 JavaScript 对象；第二个参数是要显示的消息；最后一个参数是要记录在 Web 控制台中的消息的子字符串。以下代码显示了使用 console.log 方法将 javascript 对象转换为字符串。

var item = {};
item.id = 1;
item.name = "icy-cream";
item.flavor = "vanilla";
console.log("Item: " + item);
console.log('Item: %o', item);

输出：

Item: [object Object]
Item: {id: 1, name: "icy-cream", flavor: "vanilla"}

在上面的代码中，第一个命令 console.log("Item: " + item); 将对象记录为 [object Object]。它隐藏了对象参数。然而，如果我们添加 %o 并将对象作为参数传递，我们可以看到 JavaScript 对象的内部内容。我们还可以使用 %O 来记录 JavaScript 对象。

请注意，console.log 中的 %o 允许我们在控制台中查看对象。但是我们不能使用它来转换值并将其存储在某个变量中以供进一步使用。

Object.enteries() 是一个内置的 JavaScript 函数。它将对象拆分为一个由 [key, value] 对组成的数组。因此，我们可以遍历这样的数组并手动将 JavaScript 对象转换为字符串。

var item = {};
item.id = 1;
item.name = "icy-cream";
item.flavor = "vanilla";
var stringifiedObj = Object.entries(item).map(x=>x.join(":")).join("\n");
console.log("Item: " + item);
console.log(`Item: \n{\n${stringifiedObj}\n}`);

输出：

Item: [object Object]
Item: 
{
id:1
name:icy-cream
flavor:vanilla
}

在代码中，我们首先使用 Object.enteries() 函数将对象拆分为一个由小参数数组组成的数组。接下来，我们通过应用 javascript 内置的 join(":") 函数将子数组转换为 key:value 格式。它将 Object.enteries 输出的 [key, value] 数组转换为 key:value 格式。我们最终将 JavaScript 对象记录在其字符串表示中。这是一个简洁的方法，它只使用一段代码，Object.entries(item).map(x=>x.join(":")).join("\n") 用于转换过程。

使用 Object.enteries() 进行转换的另一种方法是将它与 javascript 的 object destructuring 概念一起使用。使用这种技术，我们解构 Object.enteries() 输出的键值对数组，使用 for 循环 对其进行迭代，并将其分配给临时变量 param 和 value。我们将迭代的结果存储到 str 变量中。最后，我们使用 console.log() 记录变量 str。代码如下。

var item = {};
item.id = 1;
item.name = "icy-cream";
item.flavor = "vanilla";
var str = '';
for (const [p, val] of Object.entries(item)) {
    str += `${p}:${val}\n`;
}
console.log("Item: " + "{" + str + "}");

输出：

Item: {id:1
name:icy-cream
flavor:vanilla
}

我们可以使用 javascript 内置函数 Object.keys() 手动将 JavaScript 对象转换为 JSON 字符串。Object.keys() 返回一个包含 JavaScript 对象的所有键的数组。然后我们可以使用 for 循环迭代它们并形成 JavaScript 对象的字符串版本。最终结果可以记录或存储在变量中。代码如下。

var item = {};
item.id = 1;
item.name = "icy-cream";
item.flavor = "vanilla";
var str = '';
for (key of Object.keys(item)) {
    str += `${key}:${item[key]}\n`;
}
console.log("Item: " + "{" + str + "}");

输出：

Item: {id:1
name:icy-cream
flavor:vanilla
}

这个概念类似于使用 Object.enteries() 来获取 javascript 对象的参数。Object.enteries() 将键值对作为数组返回，而 Object.keys 返回对象键的字符串数组，通过循环输出数组并形成 javascript 对象的字符串表示进一步处理。