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

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 中使用它来呈现一个列表，但就像我说的那样它是空的）。

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

为什么开发工具/控制台日志会以这种方式运行？它是一个调试工具，但是当它像这样运行时，我不能依赖它作为调试工具..

Answer 1

JavaScript Array 当然是一个数组，但它也是一个对象。

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

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

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

因此该数组具有广泛的容错性，这就是为什么应该小心使用它以避免以非常难以调试的错误形式出现意外。

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

更新

还要考虑到 window.alert 与 console.log 有很大的不同。

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

这意味着：

const x = {}
alert(x)

将打印 [object Object]。 而如果你使用：

console.log(x)

你会看到：

{}

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

Answer 2

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

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

如果您创建一个数组并且console.log() 其内部的toString() 方法会打印数组的元素，并用[] 包围它们。当alert()一个数组时，.toString()方法用于只打印数组值：

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

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

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

如果您按照前面示例中的说明提醒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);