為什么 console.log 顯示構建不正確的數組？

Question

我寫了一個 function 以特定方式過濾對象（按鍵分組，但只有連續的，它工作正常）。

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 中使用它來呈現列表）。

不知何故，開發工具似乎糾正了我構造不正確的數組並正確顯示它。 這非常煩人，因為它讓我覺得我沒有犯任何錯誤。
在將結果數組聲明為 object （ {}而不是[] ）后，它起作用了。

為什么開發工具/控制台日志會以這種方式運行？ 它是一個調試工具，但是當它表現得像這樣時，我不能依賴它作為調試工具。

編輯：我信任控制台日志，所以我試圖將其歸咎於 Vue 出於某種原因沒有反應。 只有當我發現警報也沒有顯示它時，我才意識到問題出在其他地方。 雖然用警報來調試所有東西會很煩人......

Answer 1

當構造 object 並將 object 打印到控制台時， console.log()將 output 對象自身的屬性及其值。 如果您使用對象的.toString()方法console.log() object，您將在控制台中收到[object 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);

最后，您的代碼將屬性添加到數組 Object 而不是向數組添加元素。 發生這種情況時， console.log()會像第一個示例一樣打印此 Object，但因為這是一個數組 Object，它會將[]放在屬性及其值周圍，而不是{} 。 由於數組是空的（沒有元素），它會按字面意思打印[] 。

下面的代碼演示了您的代碼創建的數組 Object 的結構，顯示數組元素的數量為零，顯示數組對象的屬性名稱，顯示與該屬性關聯的值，最后在控制台中顯示 object。

如果您按照前面示例中的說明警告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);

Answer 2

一個 JavaScript 數組當然是一個數組，但它也是一個 Object。

而且，它接受索引作為字符串沒有問題：

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

那些 console.log 將 output 數組的第一個值 = 1。

所以陣列是寬容限的，這就是為什么應該小心使用它以避免以非常難以調試錯誤的形式出現意外。

在您的情況下，您應該使用 Object 或 Map。

更新

還要考慮 window.alert 與 console.log 非常不同。

window.alert 嘗試打印輸入的字符串格式，應該作為字符串傳遞，但如果不是，則強制執行。

這意味着：

const x = {}
alert(x)

將打印[object Object] 。 如果您使用：

console.log(x)

你會看見：

{}

並且您將能夠瀏覽 object 方法和屬性，即使 object 為空。