无法读取未定义的属性（读取“forEach”）

无法读取未定义的属性（读取 ‘forEach’）

TypeError: Cannot read property ‘forEach’ of Undefined in JS

forEach()在值上调用该方法时会发生“无法读取未定义的属性（读取 ‘forEach’）”错误undefined。

要解决该错误，请确保仅forEach在数组、Set 或 Map 对象上调用该方法。

下面是错误如何发生的示例。

const arr = undefined;

// ⛔️ TypeError: Cannot read properties of undefined (reading 'forEach')
arr.forEach(element => {
  console.log(element);
});

我们forEach在一个undefined值上调用了该方法，因此发生了错误。

将变量初始化为空数组

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

const fromDb = undefined;

const arr = fromDb || [];
console.log(arr); // 👉️ []

arr.forEach(element => {
  console.log(element);
});

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

您还可以在调用该方法之前提供空数组的回退
forEach()。

const arr = undefined;

(arr || []).forEach(element => {
  console.log(element);
});

如果arr变量存储的是假值（例如undefined），则表达式将调用forEach()空数组上的方法。

使用if语句解决错误

解决该错误的一种简单方法是使用语句if。

const arr = undefined;

if (arr) {
  arr.forEach(element => {
    console.log(element);
  });
}

该if语句检查arr变量是否存储真值。

您还可以显式检查变量是否存储数组。

const arr = undefined;

if (Array.isArray(arr)) {
  arr.forEach(element => {
    console.log(element);
  });
}

如果提供的变量存储数组，则该Array.isArray()方法返回，否则返回。truefalse

使用可选的链接 (?.) 运算符

如果变量存储值，您还可以使用可选的链接 (?.) 运算符进行短路undefined。

const arr = undefined;

arr?.forEach(element => {
  console.log(element);
});

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

出现错误的其他原因

该forEach()方法由多个对象实现：

• 数组.forEach
• 地图.forEach
• 设置.forEach

如果将方法与数组一起使用，请使用可选的链接 (?.) 运算符或方法Array.isArray以仅forEach()在有效数组上调用方法。

解决使用数组时的错误

当尝试访问不存在的数组索引时，通常会发生错误。

const arr = [];

// ⛔️ Cannot read properties of undefined (reading 'forEach')
arr[0].forEach(element => {
  console.log(element);
});

我们在 index 处访问了一个空数组0，它返回undefined，并对值调用了该forEach方法undefined。

如果不确定
索引是否存在于数组中，请使用可选的链接运算符。

const arr = [];

arr[0]?.forEach(element => {
  console.log(element);
});

可选的链接 (?.) 运算符不会调用该forEach方法，因为在索引处访问数组0会返回一个undefined值。

追踪变量赋值的undefined位置

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

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

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