类型错误：forEach 不是 JavaScript 中的函数

作者

目录

TypeError: forEach is not a function in JavaScript

  1. 解决使用对象时的错误
  2. 在调用之前将值转换为数组forEach()
  3. 调用前检查值的类型是否正确forEach()

TypeError: forEach 不是 JavaScript 中的函数

“TypeError: forEach is not a function”错误发生在我们
对一个非数组、 或forEach()类型的值调用方法时。MapSet

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

typeerror foreach 不是一个函数

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

索引.js
const obj = {
  name: 'James',
  country: 'Chile',
};

// ⛔️ TypeError: object.forEach is not a function
obj.forEach(element => {
  console.log(element);
});

我们forEach()在导致错误的对象上调用了该方法。

解决使用对象时的错误

Object.keys()如果需要遍历对象，请使用该方法。

索引.js
const obj = {
  name: 'James',
  country: 'Chile',
};

// 👇️ ['name', 'country']
console.log(Object.keys(obj));

Object.keys(obj).forEach(key => {
  console.log(key); // 👉️ name, country
  console.log(obj[key]); // 👉️ James, Chile
});

您还可以使用
Object.values()
方法获取对象值的数组。

索引.js
const obj = {
  name: 'James',
  country: 'Chile',
};

// 👇️ ['James', 'Chile']
console.log(Object.values(obj));

Object.values(obj).forEach(value => {
  console.log(value); // 👉️ James, Chile
});

如果您只关心对象的值，请使用Object.values()方法获取对象值的数组。

如果您需要数组中对象的键和值，请使用
Object.entries()
方法。

索引.js
const obj = {
  name: 'James',
  country: 'Chile',
};

// 👇️ [['name', 'James'], ['country', 'Chile']]
console.log(Object.entries(obj));

Object.entries(obj).forEach(([key, value]) => {
  console.log(key); // 👉️ name, country
  console.log(value); // 👉️ James, Chile
});

该Object.entries()方法返回一个数组数组，其中内部数组由 2 个元素组成 – 键和值。

在调用之前将值转换为数组forEach()

有许多类似数组的对象，例如Set对象和返回的值Array.from()不实现该Array.forEach()方法。

索引.js
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

// ⛔️ Uncaught TypeError: boxes.forEach is not a function
boxes.forEach(element => {
  console.log(element);
});

该getElementsByClassName()方法返回一个类似数组的对象（不是数组）。尝试在类似数组的对象上调用
Array.forEach
方法会导致错误。

要解决该错误，请使用Array.from()将值转换为数组的方法。

索引.js
// 👇️ with DOM elements
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

// 👇️ convert to array with Array.from()
Array.from(boxes).forEach(element => {
  console.log(element);
});

在调用该方法之前，我们使用
Array.from
方法将类数组对象转换为数组
forEach()。

您还可以使用扩展语法 (…) 在调用forEach().

索引.js
const set = new Set(['bobby', 'hadz', 'com']);

const arr = [...set];

arr.forEach(element => {
  // bobby
  // hadz
  // com
  console.log(element);
});

我们使用扩展语法 (…) 将对象的值解压缩Set到数组中，以便能够使用该Array.forEach()方法。

在调用之前检查值的类型是否正确forEach()

forEach或者，您可以在调用方法之前检查值的类型是否正确。

索引.js
const arr = null;

// ✅ Check if the value is an array
if (Array.isArray(arr)) {
  arr.forEach(element => {
    console.log(element);
  });
}

我们使用该Array.isArray()方法检查arr变量是否存储数组。

forEach()仅当变量存储数组时才调用该方法。

instanceof如果需要Map
在调用之前检查值是否为对象，则可以使用运算符Map.forEach()。

索引.js
const map = new Map([
  ['first', 'bobby'],
  ['last', 'hadz'],
]);

// ✅ Check if the value is a `Map` object before calling `forEach()`
if (map instanceof Map) {
  map.forEach((value, key) => {
    // first bobby
    // last hadz
    console.log(key, value);
  });
}

如果该值是对象，
则instanceof运算符将返回，否则返回。trueMapfalse

仅当forEach()变量存储一个Map.

同样的方法可以用来Set在调用之前检查一个变量是否存储了一个对象Set.forEach()。

索引.js
const set = new Set(['bobby', 'hadz', 'com']);

if (set instanceof Set) {
  set.forEach(element => {
    // bobby
    // hadz
    // com
    console.log(element);
  });
}

The if block only runs if the value is a Set object.

If the “forEach is not a function” error persists, console.log the value
you’re calling the forEach() method on and make sure the value is an array, a
Map object or a Set, depending on your use case.

If the value is fetched from a remote server, make sure you have parsed the JSON
to a native JavaScript array before calling the forEach method.

Solve the error if using local storage #

If you use local storage to store an array, make sure to parse the array before
calling the Array.forEach() method.

index.js
const arr = ['bobby', 'hadz', 'com'];

localStorage.setItem('site', JSON.stringify(arr));

const arrAgain = JSON.parse(localStorage.getItem('site'));
console.log(arrAgain); // 👉️ ['bobby', 'hadz', 'com']

arrAgain.forEach(element => {
  // bobby
  // hadz
  // com
  console.log(element);
});

We used the JSON.stringify() method to convert an array to a JSON string and
added the string to local storage.

下一步是使用该JSON.parse()方法将字符串解析为数组。

最后，我们调用forEach()了数组上的方法。

结论

“TypeError: forEach is not a function”错误发生在我们
对一个非数组、 或forEach()类型的值调用方法时。MapSet

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

–