修復 JavaScript 錯誤的四種方法
修復 JavaScript 中“無法讀取 Undefined 的屬性‘push’”錯誤的 4 種方法
了解如何輕松修復 JavaScript 中的“無法讀取未定義的屬性‘push’”錯誤。
當您嘗試對旨在包含數組但實際上包含未定義值的變量調用 push() 方法時，會出現 JavaScript 中的“無法讀取未定義的屬性‘push’”錯誤。
這可能是由多種原因引起的：
- 對變量調用 push() 方法，而無需先使用數組對其進行初始化。
- 對數組元素而不是數組本身調用 push() 方法。
- 對先前設置為未定義的變量調用 push() 方法。
- 對不存在或值為 undefined 的對象屬性調用 push() 方法。
我們將在本文中探討所有這些可能原因的實用解決方案。
1. 在變量上調用 push() 方法，而不用先用數組初始化它
要修復“無法讀取未定義的屬性‘push’”錯誤，請確保變量在調用 push() 方法之前已使用數組初始化。
let doubles;let nums = [1, 2, 3, 4, 5];for (const num of nums) {
let double = num * 2; // ? TypeError: cannot read properties of undefined (reading 'push')
doubles.push(double);
}console.log(doubles);
在上面的例子中，我們在 doubles 變量上調用了 push() 方法，而沒有先初始化它。
let doubles;console.log(doubles); // undefined
因為未初始化的變量在 JavaScript 中具有 undefined 的默認值，所以調用 push() 會引發錯誤。
要修復該錯誤，我們所要做的就是將 doubles 變量分配給一個數組（對于我們的用例來說是空的）：
// ? "doubles" initialized before use
let doubles = [];let nums = [1, 2, 3, 4, 5];for (const num of nums) {
let double = num * 2; // ? push() called - no error thrown
doubles.push(double);
}console.log(doubles); // [ 2, 4, 6, 8, 10 ]
2. 對數組元素而不是數組本身調用 push() 方法
要修復“無法讀取未定義的屬性‘push’”錯誤，請確保在調用 push() 之前沒有從數組變量中訪問元素，而是在實際數組變量上調用 push()。
const array = [];// ? TypeError: Cannot read properties of undefined (reading 'push')
array[0].push('html');
array[0].push('css');
array[0].push('javascript');console.log(array);
使用括號索引訪問 0 屬性為我們提供了數組索引 0 處的元素。 該數組沒有元素，因此 arr[0] 的計算結果為 undefined 并對其調用 push() 會導致錯誤。
為了解決這個問題，我們需要在數組變量上調用 push，而不是它的元素之一。
const array = [];// ? Call push() on "array" variable, not "array[0]"
array.push('html');
array.push('css');
array.push('javascript');console.log(array); // [ 'html', 'css', 'javascript' ]
3. 對之前設置為 undefined 的變量調用 push() 方法
要修復“無法讀取未定義的屬性‘push’”錯誤，請確保最后分配給變量的值不是未定義的。
let arr = ['orange'];arr.push('watermelon');arr = undefined;// hundreds of lines of code...// ? TypeError: Cannot read properties of undefined (reading 'push')
arr.push('apple');console.log(arr);
這里的問題是我們曾經明確地將變量設置為未定義，但后來我們在變量上調用了 push()。 對此的修復將根據您的情況而有所不同。
也許您在再次使用之前忘記將變量設置為定義的值：
let arr = ['orange'];arr.push('watermelon');// ? Fixed: variable re-assigned
arr = ['banana'];// hundreds of lines of code...arr.push('apple');console.log(arr); // [ 'banana', 'apple' ]
或者，也許你犯了一個錯誤，根本不打算將變量分配給 undefined：
let arr = ['orange'];arr.push('watermelon');// arr = undefined; ? Fixed: line removedarr.push('apple');console.log(arr); // [ 'orange', 'watermelon', 'apple' ]
4. 對不存在或值為 undefined 的對象屬性調用 push() 方法
要修復 JavaScript 中的“無法讀取未定義的屬性‘push’”錯誤，請確保調用 push() 方法的對象屬性存在且未定義。
const students = [
{ name: 'Mac', scores: [80, 85] },
{ name: 'Robert' },
{ name: 'Michael', scores: [90, 70] },
];// ? TypeError: Cannot read properties of undefined (reading 'push')
students[1].scores.push(50);
在這種情況下，出現錯誤是因為索引 1 處的對象元素沒有 score 屬性。
const obj = {};console.log(obj.prop); // undefined
從對象訪問不存在的屬性不會在 JavaScript 中引發錯誤，而是會為您提供 undefined 值。 如果您嘗試在該不存在的屬性上調用類似 push() 的方法，您將遇到錯誤。
在這種情況下，我們可以通過將第二個數組元素的 score 屬性設置為定義的值來修復錯誤。
const students = [
{ name: 'Mac', scores: [80, 85] },
// ? Fixed: "scores" set to a defined value
{ name: 'Robert', scores: [] },
{ name: 'Michael', scores: [90, 70] },
];// ? "scores" property exists, "push()" works - no error thrown
students[1].scores.push(50);
