修復(fù) JavaScript 中“無(wú)法讀取 Undefined 的屬性‘push’”錯(cuò)誤的 4 種方法

了解如何輕松修復(fù) JavaScript 中的“無(wú)法讀取未定義的屬性‘push’”錯(cuò)誤。

當(dāng)您嘗試對(duì)旨在包含數(shù)組但實(shí)際上包含未定義值的變量調(diào)用 push() 方法時(shí)，會(huì)出現(xiàn) JavaScript 中的“無(wú)法讀取未定義的屬性‘push’”錯(cuò)誤。

這可能是由多種原因引起的：

1. 對(duì)變量調(diào)用 push() 方法，而無(wú)需先使用數(shù)組對(duì)其進(jìn)行初始化。
2. 對(duì)數(shù)組元素而不是數(shù)組本身調(diào)用 push() 方法。
3. 對(duì)先前設(shè)置為未定義的變量調(diào)用 push() 方法。
4. 對(duì)不存在或值為 undefined 的對(duì)象屬性調(diào)用 push() 方法。

我們將在本文中探討所有這些可能原因的實(shí)用解決方案。

1. 在變量上調(diào)用 push() 方法，而不用先用數(shù)組初始化它

要修復(fù)“無(wú)法讀取未定義的屬性‘push’”錯(cuò)誤，請(qǐng)確保變量在調(diào)用 push() 方法之前已使用數(shù)組初始化。

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);

在上面的例子中，我們?cè)?doubles 變量上調(diào)用了 push() 方法，而沒(méi)有先初始化它。

let doubles;console.log(doubles); // undefined

因?yàn)槲闯跏蓟淖兞吭?JavaScript 中具有 undefined 的默認(rèn)值，所以調(diào)用 push() 會(huì)引發(fā)錯(cuò)誤。

要修復(fù)該錯(cuò)誤，我們所要做的就是將 doubles 變量分配給一個(gè)數(shù)組（對(duì)于我們的用例來(lái)說(shuō)是空的）：

// ? "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. 對(duì)數(shù)組元素而不是數(shù)組本身調(diào)用 push() 方法

要修復(fù)“無(wú)法讀取未定義的屬性‘push’”錯(cuò)誤，請(qǐng)確保在調(diào)用 push() 之前沒(méi)有從數(shù)組變量中訪問(wèn)元素，而是在實(shí)際數(shù)組變量上調(diào)用 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);

使用括號(hào)索引訪問(wèn) 0 屬性為我們提供了數(shù)組索引 0 處的元素。 該數(shù)組沒(méi)有元素，因此 arr[0] 的計(jì)算結(jié)果為 undefined 并對(duì)其調(diào)用 push() 會(huì)導(dǎo)致錯(cuò)誤。

為了解決這個(gè)問(wèn)題，我們需要在數(shù)組變量上調(diào)用 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. 對(duì)之前設(shè)置為 undefined 的變量調(diào)用 push() 方法

要修復(fù)“無(wú)法讀取未定義的屬性‘push’”錯(cuò)誤，請(qǐng)確保最后分配給變量的值不是未定義的。

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);

這里的問(wèn)題是我們?cè)?jīng)明確地將變量設(shè)置為未定義，但后來(lái)我們?cè)谧兞可险{(diào)用了 push()。 對(duì)此的修復(fù)將根據(jù)您的情況而有所不同。

也許您在再次使用之前忘記將變量設(shè)置為定義的值：

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' ]

或者，也許你犯了一個(gè)錯(cuò)誤，根本不打算將變量分配給 undefined：

let arr = ['orange'];arr.push('watermelon');// arr = undefined; ? Fixed: line removedarr.push('apple');console.log(arr); // [ 'orange', 'watermelon', 'apple' ]

4. 對(duì)不存在或值為 undefined 的對(duì)象屬性調(diào)用 push() 方法

要修復(fù) JavaScript 中的“無(wú)法讀取未定義的屬性‘push’”錯(cuò)誤，請(qǐng)確保調(diào)用 push() 方法的對(duì)象屬性存在且未定義。

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);

在這種情況下，出現(xiàn)錯(cuò)誤是因?yàn)樗饕?1 處的對(duì)象元素沒(méi)有 score 屬性。

const obj = {};console.log(obj.prop); // undefined

從對(duì)象訪問(wèn)不存在的屬性不會(huì)在 JavaScript 中引發(fā)錯(cuò)誤，而是會(huì)為您提供 undefined 值。 如果您嘗試在該不存在的屬性上調(diào)用類似 push() 的方法，您將遇到錯(cuò)誤。

在這種情況下，我們可以通過(guò)將第二個(gè)數(shù)組元素的 score 屬性設(shè)置為定義的值來(lái)修復(fù)錯(cuò)誤。

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);