为什么 console.log 显示的数组与警报不同？

Question

我写了一个以特定方式过滤对象的函数（按键分组但只有连续的，它工作正常）。

groupBySequentialValues(array, key) {
    let groupName = null;
    let groupIndex = 0;
    let result = []; // keep this in mind!

    array.forEach((el, index) => {
        if (groupName !== array[index][key]) {
            groupName = array[index][key]
            groupIndex++;
            result[groupIndex + '_' + groupName] = []
        }
        result[groupIndex + '_' + groupName].push(el);
    })

    alert(result);
    console.log(result);
}

起初警报显示一个空数组，但警报关闭后，控制台日志将显示正确组装的数组。（当然，这也是在没有警报的情况下发生的，这最能说明区别）
但是我不能在警报或模板中使用这个数组（我在 VueJS 中使用它来呈现列表，但它是空的，就像我说的那样）。

开发工具似乎以某种方式看到了它的内容，但是alert/the dom 没有。
将结果数组声明为对象（{} 而不是 []）后它起作用了。

为什么 dev tools/console log 会这样？它是一个调试工具，但是当它表现得像这样时，我不能将它作为调试工具来依赖..

Answer 1

一个JavaScriptArray当然是数组，但也是Object。

此外，它接受索引作为字符串没有问题：

const a = [1, 2, 3]
console.log(a[0])
console.log(a['0'])

那些console.log将输出数组的第一个值= 1。

所以 Array 具有广泛的容错性，这就是为什么应该谨慎使用它以避免以非常难以调试的形式出现的错误。

在您的情况下，您应该使用对象或地图。

已更新

还要考虑 window.alert 与 console.log 非常不同。

window.alert 尝试打印输入的字符串格式，应该作为字符串传递，但如果不是，则强制执行。

这意味着：

const x = {}
alert(x)

将打印 [对象对象]。而如果你使用：

console.log(x)

您将看到：

{}

并且您将能够浏览对象的方法和属性，即使对象是空的。

Answer 2

当构造一个对象并将该对象打印到控制台时，console.log() 将输出该对象自己的属性及其值。如果您 console.log() 使用对象的 .toString() 方法的对象，您将在控制台中收到 [object Object]。这是您在对象警报中看到的确切结果：

const obj = {};
obj['test'] = 'this is a test';
console.log(obj);
console.log(obj.toString());
alert(obj);

如果您创建一个数组，并且 console.log() 其内部 toString() 方法打印数组的元素逗号分隔并在它们周围使用 [] .当 alert()ing 数组时，.toString() 方法用于仅打印数组值：

let arr = [1,2,3];
console.log(arr);
alert(arr);

最后，您的代码将属性添加到数组对象，而不是将元素添加到数组。发生这种情况时，console.log() 会像第一个示例一样打印此对象，但因为这是一个数组对象，所以它会在属性及其值周围放置 [] 而不是 {}。由于数组是 empty（没有元素），它按字面意思打印 []。

下面的代码演示了您的代码创建的数组对象的结构，显示数组元素的数量为零，显示数组对象的属性名称，显示与属性关联的值最后在控制台中显示对象。

如果您按照前面示例中的说明提醒 result，对话框将为空，因为数组中没有元素。

let groupName = 'test';
let groupIndex = 0;
let el = 'this is a test';
let result = [];

result[groupIndex + '_' + groupName] = []
result[groupIndex + '_' + groupName].push(el);

console.log('Number of elements in result array: ', result.length);
console.log('result Object Property Names: ', Object.getOwnPropertyNames(result));
console.log('result Object Property Value: ', result[Object.getOwnPropertyNames(result)[1]]);

console.log(result);

为什么 console.log 显示的数组与警报不同？

Why does console.log display array different than alert?

javascript

google-chrome-devtools

console.log