JavaScript forEach() 方法怎么用

300 阅读3分钟

forEach() 方法是 JavaScript 中 Array 类型的一个非常有用的方法,它允许你对数组的每个元素执行一次提供的函数。这个方法不会改变原数组,但会执行回调函数,并对数组的每个元素执行一次。

基本语法

arr.forEach(function callback(currentValue[, index[, array]]) {  
// 你的迭代逻辑  
}[, thisArg]);
  • currentValue:数组中正在处理的当前元素。
  • index(可选):数组中正在处理的当前元素的索引。
  • array(可选):forEach() 方法正在操作的数组。
  • thisArg(可选):当执行回调函数时用作 this 的值。

示例

简单的遍历数组

let fruits = ['Apple', 'Banana', 'Mango'];  
fruits.forEach(function(item) {  
    console.log(item);  
});  
// 输出:  
// Apple  
// Banana  
// Mango

使用索引

let numbers = [1, 4, 9];  
numbers.forEach(function(value, index) {  
  console.log(index, value);  
});  
  
// 输出:  
// 0 1  
// 1 4  
// 2 9

使用箭头函数

ES6 引入了箭头函数,它提供了一种更简洁的方式来写函数表达式。

let colors = ['Red', 'Green', 'Blue'];  
colors.forEach((color, index) => {  
  console.log(index, color);  
});  
  
// 输出:  
// 0 Red  
// 1 Green  
// 2 Blue

在JavaScript中,对象(Object)本身并不直接支持forEach()方法,因为forEach()是Array(数组)的一个方法,用于遍历数组的每个元素并执行回调函数。但是,你可以通过几种方式来对对象的属性进行遍历,尽管它们不是直接通过forEach()方法实现的。

以下是一些遍历对象属性的方法:

1. 使用for...in循环

for...in循环可以遍历对象的所有可枚举属性(包括原型链上的属性,除非使用hasOwnProperty()方法过滤掉)。

const obj = {a: 1, b: 2, c: 3};  
  
for (let key in obj) {  
  if (obj.hasOwnProperty(key)) {  
    console.log(key, obj[key]);  
  }  
}

2. 使用Object.keys()Object.values()Object.entries()forEach()

虽然对象本身没有forEach()方法,但你可以结合Object.keys()(返回属性名数组)、Object.values()(返回属性值数组)、或Object.entries()(返回包含键值对的数组)来使用数组的forEach()方法。

使用Object.keys()

const obj = {a: 1, b: 2, c: 3};  
  
Object.keys(obj).forEach(key => {  
  console.log(key, obj[key]);  
});

使用Object.values()

const obj = {a: 1, b: 2, c: 3};  
  
Object.values(obj).forEach(value => {  
  console.log(value); // 注意:这种方法不会给出键名  
});

使用Object.entries()

const obj = {a: 1, b: 2, c: 3};  
  
Object.entries(obj).forEach(([key, value]) => {  
  console.log(key, value);  
});

3. 使用Reflect.ownKeys()

Reflect.ownKeys()方法返回一个由目标对象自身的属性键组成的数组,它的返回值类似于Object.keys(),但会包含所有类型的键,包括Symbol类型的键。

const obj = {a: 1, [Symbol('b')]: 2};  
  
Reflect.ownKeys(obj).forEach(key => {  
  if (typeof key === 'string') {  
    console.log(key, obj[key]);  
  } else {  
    console.log(key.toString(), obj[key]);  
  }  
});

注意,在使用这些方法时,你需要根据具体需求选择最合适的一种。例如,如果你需要同时访问键和值,那么Object.entries()可能是最好的选择。如果你只需要遍历对象的键或值,那么Object.keys()Object.values()可能更适合。

注意事项

  • forEach() 方法对于空数组是不会执行回调函数的。
  • 它没有返回值(即返回 undefined),不像 map() 或 filter() 方法那样返回一个新数组。
  • 如果你想提前退出 forEach() 循环(比如找到某个符合条件的元素就停止遍历),forEach() 方法并不直接支持这样的操作。不过,你可以通过抛出一个异常来“中断”循环,但这通常不是一个好的做法。更合适的做法可能是使用传统的 for 循环或者 Array.prototype.some()/Array.prototype.every() 等方法,这些方法可以在找到符合条件的元素时提前退出循环。