JAVASCRIPT：Console.log() 无法正确打印数组（带有对象）的值。相反，它会打印摘要

Question

我有这个简单的 JavaScript 应用程序。

let array = [{ fruit: "banana" }];
console.log(array);
array.push({ fruit: "apple" });
console.log(array);

我希望第一个 console.log() 打印一个包含一个对象的数组。我还希望第二个 console.log() 打印包含两个对象的数组。这就是 CHROME 控制台中打印的内容。

[{…}]
(2)[{…}, {…}]

所以一切看起来都很好。第一个数组似乎包含一个对象，第二个数组似乎包含两个对象。但是当我检查控制台中的数组时，我看到的是这样的。

[{…}]
  0: {fruit: 'banana'}
  1: {fruit: 'apple'}
  length: 2
  [[Prototype]]: Array(0)

(2)[{…}, {…}]
   0: {fruit: 'banana'}
   1: {fruit: 'apple'}
   length: 2
   [[Prototype]]: Array(0)

这是一个非常意外的行为，因为第一个对象似乎包含两个对象。

CHATGPT 解释说这是标准行为。除此之外，它还承认“控制台显示摘要而不是完整内容有时确实会令人困惑”

问题在于它使调试变得更加困难。跟踪我的应用程序中的值并不容易。要查看数组的内容，CHATGPT 建议使用 JSON.stringify() 方法。像这样。

let array = [{ fruit: "banana" }];
console.log(JSON.stringify(array));
array.push({ fruit: "apple" });
console.log(JSON.stringify(array));

它有效，它在控制台中给了我这个结果。

[{"fruit":"banana"}]
[{"fruit":"banana"},{"fruit":"apple"}]

此方法的问题在于，它对于仅包含一些简单对象的数组非常有效。但如果数组中有很多复杂的对象，阅读起来可能会很困难。

所以我的问题是。除了使用 JSON.stringify() 方法之外，还有其他技术可以使数组更具可读性吗？

Answer 1

您可以使用您所说的

JSON.stringify()

和

Object.map()

的组合来使用

console.table()

指定每个属性的行为

let products = [
  { id: 1, name: "Laptop", price: 1000, specs: { CPU: "i7", RAM: "16GB", SSD: "512GB" } },
  { id: 2, name: "Smartphone", price: 800, specs: { CPU: "Snapdragon 888", RAM: "8GB", Storage: "128GB" } }
];

let displayProducts = products.map(product => {
  return {
    ...product,
    specs: JSON.stringify(product.specs)
  };
});

console.table(displayProducts); 
// Or console.log(displayProducts);