建站
咨詢
售后
建站咨詢
新聞中心
修復(fù) JavaScript 中“無法讀取 Undefined 的屬性‘push’”錯(cuò)誤的 4 種方法
創(chuàng)新互聯(lián)建站專注于肅州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供肅州營(yíng)銷型網(wǎng)站建設(shè)，肅州網(wǎng)站制作、肅州網(wǎng)頁(yè)設(shè)計(jì)、肅州網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造肅州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供肅州網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
了解如何輕松修復(fù) JavaScript 中的“無法讀取未定義的屬性‘push’”錯(cuò)誤。
當(dāng)您嘗試對(duì)旨在包含數(shù)組但實(shí)際上包含未定義值的變量調(diào)用 push() 方法時(shí)，會(huì)出現(xiàn) JavaScript 中的“無法讀取未定義的屬性‘push’”錯(cuò)誤。
這可能是由多種原因引起的：
- 對(duì)變量調(diào)用 push() 方法，而無需先使用數(shù)組對(duì)其進(jìn)行初始化。
- 對(duì)數(shù)組元素而不是數(shù)組本身調(diào)用 push() 方法。
- 對(duì)先前設(shè)置為未定義的變量調(diào)用 push() 方法。
- 對(duì)不存在或值為 undefined 的對(duì)象屬性調(diào)用 push() 方法。
我們將在本文中探討所有這些可能原因的實(shí)用解決方案。
1. 在變量上調(diào)用 push() 方法，而不用先用數(shù)組初始化它
要修復(fù)“無法讀取未定義的屬性‘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() 方法，而沒有先初始化它。
let doubles;console.log(doubles); // undefined
因?yàn)槲闯跏蓟淖兞吭?JavaScript 中具有 undefined 的默認(rèn)值，所以調(diào)用 push() 會(huì)引發(fā)錯(cuò)誤。
要修復(fù)該錯(cuò)誤，我們所要做的就是將 doubles 變量分配給一個(gè)數(shù)組（對(duì)于我們的用例來說是空的）：
// "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ù)“無法讀取未定義的屬性‘push’”錯(cuò)誤，請(qǐng)確保在調(diào)用 push() 之前沒有從數(shù)組變量中訪問元素，而是在實(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)索引訪問 0 屬性為我們提供了數(shù)組索引 0 處的元素。 該數(shù)組沒有元素，因此 arr[0] 的計(jì)算結(jié)果為 undefined 并對(duì)其調(diào)用 push() 會(huì)導(dǎo)致錯(cuò)誤。
為了解決這個(gè)問題，我們需要在數(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ù)“無法讀取未定義的屬性‘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);這里的問題是我們?cè)?jīng)明確地將變量設(shè)置為未定義，但后來我們?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 中的“無法讀取未定義的屬性‘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ì)象元素沒有 score 屬性。
const obj = {};console.log(obj.prop); // undefined從對(duì)象訪問不存在的屬性不會(huì)在 JavaScript 中引發(fā)錯(cuò)誤，而是會(huì)為您提供 undefined 值。 如果您嘗試在該不存在的屬性上調(diào)用類似 push() 的方法，您將遇到錯(cuò)誤。
在這種情況下，我們可以通過將第二個(gè)數(shù)組元素的 score 屬性設(shè)置為定義的值來修復(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);
分享題目：修復(fù)JavaScript錯(cuò)誤的四種方法
本文網(wǎng)址：http://www.dlmjj.cn/article/djiepgo.html
