Chrome 开发工具中的不同数组答案

【问题标题】：Different Array(s) in Chrome Dev ToolsChrome 开发工具中的不同数组
【发布时间】：2021-06-06 11:20:34
【问题描述】：

为什么 Chrome Dev Tools 会在水果数组前面放一个“(3)”，而不是年份数组？

第一个是这样获取的结果：

    fetch('http://localhost:8000/damagequery')
  .then(response => response.json())
  .then(data => {
      data.forEach(element => {
          console.log(element[""][1])
          damageCount.push(element[""][0])
          year.push(element[""][1].toString())
        //   [0][""]
        // [0][""][0]
      });
  });

第二个就是这样的测试：

let fruit = ['Apples', 'Bananas', 'Oranges']

【问题讨论】：

定义“差异”。
好吧，您会看到开发工具如何在水果数组前面放置一个“(3)”，但不是年份。这是为什么呢？
这是数组的长度。
对了，但是为什么前面没有一个“(6)”呢？

标签： javascript highcharts

【解决方案1】：

原因很简单，year 数组在填充之前被记录到控制台。你使用的是异步的fetch，所以在console.log(year)之后调用，但是由于JS中的引用，在控制台点击后数组会被“刷新”。

以下类似情况：

let year = [];
let fruit = ['Apples', 'Bananas', 'Oranges'];

setTimeout(function() {
    const response = ["2000", "2016", "2017"];

    response.forEach(element => {
        year.push(element);
    });
}, 500);

console.log(year);
console.log(fruit);

现场示例： http://jsfiddle.net/BlackLabel/yzucwp5b/

【讨论】：

【解决方案2】：

JS 会比较引用的数组相等性，这意味着即使您的数组包含相同的元素，它们也不会相等，因为它们位于不同的内存地址。

如果你想比较两个数组，我推荐使用 lodash。在此处查看示例：

Using lodash to compare jagged arrays (items existence without order)

如果不想使用 lodash，则需要定义自己的逻辑：

const a = [1, 2, 3];
const b = [1, 2, 3];
const areEqual = a.length === b.lenght && a.every((elem, index) => elem === b[index]);

【讨论】：

感谢您的建议，我将问题编辑得更直接。我知道这两个数组的内容不一样，因为它们不应该是，我更感兴趣的是为什么开发工具显示它们的方式不同。
请看这个帖子。 stackoverflow.com/questions/48120547/…

【解决方案3】：

这个问题好像和这个回答很详细的问题有关。

How to compare arrays in JavaScript?

【讨论】：

感谢您的建议，我将问题编辑得更直接。我知道这两个数组的内容不一样，因为它们不应该是，我更感兴趣的是为什么开发工具显示它们的方式不同。
看看这个回复，stackoverflow.com/questions/6355382/…“关于console.dir的输出：和我假设的一样。对象的属性是在控制台中展开条目时获取的，而不是当你打电话的时候。”您是否使用 console.dir 创建这些日志？