在 JavaScript 中使用 forEach() 的 8 个简洁示例

Question

这 Array#forEach() function 是一种常用的遍历数组的工具。 然而，在一些其他语言特性的帮助下， forEach() 可以做的不仅仅是打印数组中的每个值。 在本教程中，您将看到 10 个演示常见模式的示例 forEach()。

示例 1：基础知识

这 forEach() 函数的第一个参数是 JavaScript 为数组中的每个元素执行的回调函数。

// Prints "a", "b", "c"
['a', 'b', 'c'].forEach(v => {
  console.log(v);
});

示例 2：修改数组

一般来说，你不应该使用修改数组 forEach()。如果要修改数组，则应使用 Array#map() 反而。 但是可以使用修改数组 forEach()，您可能会遇到这样做的代码。 这是一个将每个数组元素转换为大写的示例 forEach()。

const arr = ['a', 'b', 'c'];
arr.forEach((v, i) => {
  arr[i] = v.toUpperCase();
});
arr; // ['A', 'B', 'C']

示例 3：对象键

这 Object.keys() 函数 返回一个包含对象键的数组。 如果你想遍历一个对象的键使用 forEach()，你应该使用 Object.keys()。

const obj = {
  a: 1,
  b: 2,
  c: 3
};

// Prints "a", "b", "c"
Object.keys(obj).forEach(key => console.log(key));

示例 4：对象键和值

您可以使用遍历对象的键 forEach() 和 Object.keys()。但是同时遍历键和值呢？ 这就是 Object.entries() 功能 是为了。 给定一个对象， Object.entries() 返回一个数组 [key, value]对。

const obj = {
  a: 1,
  b: 2,
  c: 3
};

// Prints "a 1", "b 2", "c 3"
Object.entries(obj).forEach(([key, value]) => {
  console.log(key + ' ' + value)
});

示例 5：嵌套数组和 flat()

这 forEach() 函数将遍历顶层数组。 如果您有数组数组，则需要使用 Array#flat() 首先展平嵌套数组。

const arr = ['a', ['b', 'c'], [['d', ['e']]]];

// Prints "a", "b", "c", "d", "e". `3` is the maximum depth for flattening
arr.flat(3).forEach(v => console.log(v));

示例 6：向数组添加元素

这 forEach() 函数设置在第一次调用你的回调之前将被调用的元素。 换句话说，如果你在你的数组中添加元素 forEach() 回调，JavaScript 不会 在新元素上调用你的回调。 无需担心通过将元素添加到您的数组中而导致无限循环 forEach() 打回来。

const arr = ['a', 'b', 'c'];

// Prints "a", "b", "c", even though each callback invocation adds
// a new element to the array.
arr.forEach(v => {
  arr.push(v.toUpperCase());
  console.log(v);
});

示例 7： thisArg

这 forEach() 函数实际上有2个参数， callback 和 thisArg. 这 thisArg 函数允许您设置 this 在你的 callback。这 thisArg 参数对于依赖于的函数很方便 this， 像 Stack 下面的例子中的类。

const arr = ['a', 'b', 'c'];

class Stack {
  constructor() {
    this._arr = [];
  }

  push(v) {
    this._arr.push(v);
  }

  pop() {
    return this._arr.pop();
  }
}

const stack = new Stack();
// Without `thisArg`, would throw an error
arr.forEach(stack.push, stack);
// Equivalent:
arr.forEach(v => stack.push(v));
// Also equivalent:
arr.forEach(stack.push.bind(stack));

示例 8：阵列孔

JavaScript 数组有一些怪癖。 具体来说，数组 ['a',, 'c'] 不同于数组 ['a', undefined, 'c']， 虽然 arr[1] === undefined 在这两种情况下。 在 ['a',, 'c'], arr[1] 被称为 array hole 。

forEach() 函数跳过 array hole。 要得到 forEach() 将 array hole 视为 undefined，你首先需要 摆脱 array hole 使用 Array.from()。

const arr = ['a',, 'c'];

// Prints "a", "c"
arr.forEach(v => console.log(v));

// Prints "a", "undefined", "c". `Array.from()` removes holes
Array.from(arr).forEach(v => console.log(v));