无法在 JS 中读取未定义的属性（读取“推送”）

作者

目录

TypeError: Cannot read Property ‘push’ of Undefined in JS

  1. 无法在 JS 中读取未定义的属性（读取“推送”）
  2. TypeScript 中的类型不存在属性“push”

无法在 JS 中读取未定义的属性（读取 ‘push’）

出现“无法读取未定义的属性（读取‘推送’）”错误的原因有多种：

  • push在存储值的变量上调用方法undefined。
  • push在数组中的特定索引处调用方法。
  • 忘记将变量初始化为数组。
  • 调用push类中的方法，不进行属性初始化。

无法读取未定义的属性推送

push()最常见的情况是，如果您尝试对存储值的变量调用该方法，则会发生错误undefined。

索引.js
const arr = undefined;

// ⛔️ TypeError: Cannot read properties of undefined (reading 'push')
console.log(arr.push());

确保初始化变量

undefined已声明但未赋值的变量在 JavaScript 中的值为
。

索引.js
let arr;
console.log(arr); // 👉️ undefined

// ⛔️ TypeError: Cannot read properties of undefined (reading 'push')
arr.push('abc');

我们声明了arr变量但没有给它赋值，所以它存储了一个
undefined值。

相反，在声明时将变量设置为空数组。

索引.js
let arr = [];

arr.push('bobby');
arr.push('hadz');
arr.push('com');

console.log(arr); // 👉️ [ 'bobby', 'hadz', 'com' ]

该arr变量被初始化为一个空数组，这使我们能够使用
Array.push()方法。

push()在索引处访问数组后不要尝试使用

尝试访问索引不存在的数组会返回undefined。

索引.js
const arr = [];

// ⛔️ TypeError: Cannot read properties of undefined (reading 'push')
arr[0].push('a');

0我们试图访问返回的索引处的数组，undefined因为指定索引处的元素不存在。

对值调用Array.push()方法undefined会导致错误。

相反，调用push()数组本身的方法。

索引.js
const arr = [];

arr.push('a');
arr.push('b');
arr.push('c');

console.log(arr); // 👉️ [ 'a', 'b', 'c' ]

访问一个不存在的对象属性

另一个常见的值来源undefined是访问不存在的对象属性。

索引.js
const employees = [
  {id: 1, name: 'Alice', tasks: []},
  {id: 2, name: 'Bob'},
];

// ⛔️ TypeError: Cannot read properties of undefined (reading 'push')
employees[1].tasks.push('buy groceries');
我们访问了索引处的数组元素1并尝试将新值压入tasks数组，但是，该tasks数组尚未在指定对象中初始化。

解决此问题的一种方法是在声明时将属性设置为空数组。

索引.js
const employees = [
  {id: 1, name: 'Alice', tasks: []},
  {id: 2, name: 'Bob', tasks: []},
];

employees[1].tasks.push('buy groceries');

// [
//   { id: 1, name: 'Alice', tasks: [] },
//   { id: 2, name: 'Bob', tasks: [ 'buy groceries' ] }
// ]
console.log(employees);

避免错误的另一种方法是使用可选的链接 (?.) 运算符。

索引.js
const employees = [
  {id: 1, name: 'Alice', tasks: []},
  {id: 2, name: 'Bob'},
];

employees[1]?.tasks?.push('buy groceries');

// [ { id: 1, name: 'Alice', tasks: [] }, { id: 2, name: 'Bob' } ]
console.log(employees);
操作?.员短路而不是抛出错误。

如果左侧的值为空值（或），则可选链接(?.)运算符短路并返回。undefinednullundefined

将变量初始化为空数组

解决该错误的另一种方法是使用逻辑或 (||) 运算符将变量初始化为空数组。

索引.js
const fromDb = undefined;

const arr = fromDb || [];

arr.push('abc');
console.log(arr); // 👉️ [ 'abc' ]

如果左边的值是假的（例如 ），逻辑 OR (||) 运算符返回右边的值undefined。

在调用之前检查变量是否存储数组push()

使用Array.isArray()方法在调用方法之前检查变量是否存储数组Array.filter()。

索引.js
const arr = undefined;

// ✅ using Array.isArray
if (Array.isArray(arr)) {
  arr.push('example');
} else {
  console.log('arr variable does not store an array');
}

该if块仅在arr变量存储数组时运行，否则，
else块运行。

或者，您可以检查变量是否不存储数组并将其设置为一个。

索引.js
let arr = undefined;

if (!Array.isArray(arr)) {
  arr = [];

  arr.push('example');
} else {
  console.log('arr variable does not store an array');
}

console.log(arr); // 👉️ [ 'example' ]

如果变量不存储数组，我们将它重新分配给一个空数组并使用该push()方法。

追踪变量赋值的undefined位置

如果错误仍然存​​在，您必须追踪变量在何处被赋值
undefined。

该push方法仅存在于数组中，因此尝试对任何其他类型的值调用它会导致错误。

一个常见的值来源undefined是将不返回任何内容的函数的输出分配给变量。

许多在适当位置改变对象的内置方法返回undefined。

所有不返回值的 JavaScript 函数都返回undefined。

调用前忘记初始化类属性push()

确保在调用该push()
方法之前初始化您的类属性。

索引.js
class Person {
  // ✅️ Initialize class property setting it to array
  languages = [];

  constructor(colors) {
    // ✅ initialize from passed in parameters
    this.colors = colors;
  }

  addLanguage(language) {
    this.languages.push(language);
  }

  addColor(color) {
    this.colors.push(color);
  }
}

const p1 = new Person(['blue', 'red']);

p1.addLanguage('spanish');
p1.addColor('green');

我们将该languages属性初始化为类内部的数组。这有助于我们在尝试使用该方法时避免错误push。

colors我们在构造函数中初始化的属性也是如此。

如果我们没有将languages或colors属性设置为数组，我们将在尝试使用该方法时遇到“无法读取未定义的属性（读取‘push’）”错误push()。

TypeScript 中的类型不存在属性“push”

当我们对不是数组的值调用方法时，会出现错误“类型上不存在属性‘push’”
push()。

要解决该错误，请确保仅调用push()数组上的方法或更正调用该方法的变量的类型。

类型上不存在属性推送

以下是错误发生方式的 2 个示例。

索引.ts
const obj = {};

// ⛔️ Error: Property 'push' does not exist on type '{}'.ts(2339)
obj.push('bobbyhadz.com');

// ---------------------------------------------------------------

// 👇️ it's an array but has an incorrect type
const arr = ['one', 'two', 'three'] as unknown as { name: string };

// ⛔️ Property 'push' does not exist on type '{ name: string; }'.ts(2339)
arr.push('four');

对非数组的值调用 Array.push() 方法

在第一个示例中，我们调用了
一个对象的Array.push方法，这导致了错误。

如果要向对象添加属性，请确保对象的类型允许这样做并使用点或括号表示法。

索引.ts
const obj: { name: string } = { name: '' };

// ⛔️ Error: Property 'push' does not exist on type '{}'.ts(2339)
// obj.push('hello');

obj.name = 'Bobby Hadz';

console.log(obj); // 👉️ {name: 'Bobby Hadz'}

# Console.log the value on which you’re calling Array.push()

Otherwise, to start debugging, console.log the value you’re calling the push
method on and make sure it’s an array.

index.ts
const obj: { name: string } = { name: '' };

console.log(Array.isArray(obj)); // 👉️ false
console.log(Array.isArray([1, 2, 3])); // 👉️ true
If you determine that the value on which you’re calling the push method is an array, try restarting your IDE and your development server.

# Check if the value is an array before calling Array.push()

If the value can sometimes be an object and other times an array, you have to
use a type guard when calling the push method.

index.ts
const maybeArray = Math.random() > 0.5 ? [1, 2, 3] : { name: 'Bobby Hadz' };

if (Array.isArray(maybeArray)) {
  maybeArray.push(4);
  console.log(maybeArray); // 👉️ [1, 2, 3, 4]
}

The
Array.isArray
method serves as a type guard.

If the condition is met, TypeScript knows that the maybeArray variable stores an array and allows us to call the push() method.

Had we tried to call the method directly on the variable, we would have gotten
the “Property ‘push’ does not exist on type” error, because of the possibility
that the variable is not an array.

# Correct the type of the variable

If the value on which you’re calling the push method is an array, you need to
correct its type.

index.ts
// 👇️ it's an array but has an incorrect type
const arr = ['one', 'two', 'three'] as unknown as { name: string };

// ⛔️ Property 'push' does not exist on type '{ name: string; }'.ts(2339)
arr.push('four');

The arr variable stores an array, however, it has a different type so
TypeScript won’t let us call the push() method.

# Using a type assertion to solve the error

If you have no control over the type of the variable and know that it’s an
array, you can use a
type assertion.

index.ts
const arr = ['one', 'two', 'three'] as unknown as { name: string };

(arr as unknown as any[]).push('four');

console.log(arr); // 👉️ ['one', 'two', 'three', 'four']

Type assertions are used when we have information about the type of a value that
TypeScript can’t know about.

我们有效地告诉 TypeScript 该arr变量是类型的any[]，不用担心。

如果这是导致您的情况出现错误的原因，最好找出错误类型的来源。