Chrome 調試 JS 數組報錯：變量可見但訪問屬性失敗的常見原因

現象

在 Chrome DevTools Console 中，展開數組 aa、bb 可見元素值，但代碼執行時拋出 Cannot read property 'RS' of undefined 或類似錯誤。

三大核心原因

1. 數組元素為 undefined / null (稀疏數組 / 空洞)

var arr = [];
arr[5] = 'value'; // 索引 0-4 為 empty (undefined)
console.log(arr); // Console 顯示 [empty × 5, "value"] 但展開可見
arr.forEach(x => console.log(x.RS)); // 索引 0-4 觸發 TypeError

排查：Console 中輸入 arr.length vs Object.keys(arr).length，不等說明有空洞。

2. 異步數據未就緒 (競態條件)

var data = [];
fetch('/api').then(res => res.json()).then(json => data = json);
// 同步代碼立即執行
console.log(data[0].RS); // data 尚為 []，data[0] 為 undefined

現象：斷點暫停時數據已到達 (微任務執行)，Console 顯示最新值；但運行時同步代碼已報錯。

3. 索引越界 / 邏輯錯誤

for (var i = 1; i <= arr.length; i++) { // <= 導致越界
    var item = arr[i-1]; // 正確
    // 或錯誤邏輯
    var item = arr[i]; // 最後一次 i === length，訪問 undefined
}

調試技巧

1. 斷點而非 Console.log：在可疑行打斷點，觀察 Scope 面板 實時變量值，而非依賴 Console 的異步打印快照。
2. 使用 console.dir(arr)：以對象形式顯示數組，清晰看到 length、索引屬性、原型鏈，區分 empty 與 undefined。
3. 可選鏈操作符 (?.): arr[i]?.RS 避免中間為 null/undefined 拋錯 (ES2020+)。
4. 嚴格檢查：if (arr && arr.length > i && arr[i] && arr[i].RS)。

最佳實踐代碼模板

function processItems(items) {
    if (!Array.isArray(items)) {
        console.error('Expected array, got', typeof items);
        return;
    }
    for (const item of items) { // for-of 自動跳過 empty slots? 不會，會遍歷 undefined
        if (!item) continue; // 跳過 null/undefined
        if (!item.hasOwnProperty('RS')) {
            console.warn('Item missing RS:', item);
            continue;
        }
        // 安全訪問
        const rs = item.RS;
        // ...
    }
}

總結

Console 顯示「有值」≠ 運行時同步訪問安全。**斷點調試 + 可選鏈 + 防御性編程** 是解決之道。