JavaScript forEach、map、filter 方法详细解析

2023-12-27 14:52:42

forEach 方法

forEach 方法用于遍历数组中的每个元素，并对每个元素执行一次回调函数。回调函数可以接受三个参数：当前元素的值、当前元素的索引和数组本身。forEach 方法不会改变原数组，它只对数组中的每个元素执行回调函数。

const numbers = [1, 2, 3, 4, 5];

// 使用 forEach 方法遍历数组中的每个元素
numbers.forEach((number) => {
  console.log(number); // 输出：1 2 3 4 5
});

// 使用 forEach 方法对数组中的每个元素执行回调函数
numbers.forEach((number, index) => {
  console.log(`Element at index ${index} is ${number}`); // 输出：Element at index 0 is 1, Element at index 1 is 2, Element at index 2 is 3, Element at index 3 is 4, Element at index 4 is 5
});

2. map 方法

map 方法用于遍历数组中的每个元素，并对每个元素执行一次回调函数。回调函数可以接受三个参数：当前元素的值、当前元素的索引和数组本身。map 方法会将回调函数的返回值组成一个新数组，而不会改变原数组。

const numbers = [1, 2, 3, 4, 5];

// 使用 map 方法遍历数组中的每个元素，并对每个元素执行回调函数
const doubledNumbers = numbers.map((number) => {
  return number * 2; // 返回当前元素的两倍
});

console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]

3. filter 方法

filter 方法用于遍历数组中的每个元素，并对每个元素执行一次回调函数。回调函数可以接受三个参数：当前元素的值、当前元素的索引和数组本身。filter 方法会将回调函数返回 true 的元素组成一个新数组，而不会改变原数组。

const numbers = [1, 2, 3, 4, 5];

// 使用 filter 方法遍历数组中的每个元素，并对每个元素执行回调函数
const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0; // 返回当前元素是否为偶数
});

console.log(evenNumbers); // 输出：[2, 4]

4. forEach、map 和 filter 方法的区别

forEach、map 和 filter 方法都是数组最常用的迭代方法，但它们的功能不同。forEach 方法用于遍历数组中的每个元素，而不会改变原数组。map 方法用于遍历数组中的每个元素，并对每个元素执行一次回调函数，并将回调函数的返回值组成一个新数组。filter 方法用于遍历数组中的每个元素，并对每个元素执行一次回调函数，并将回调函数返回 true 的元素组成一个新数组。

方法	功能	是否改变原数组	返回值
forEach	遍历数组中的每个元素	否	无
map	遍历数组中的每个元素，并对每个元素执行一次回调函数	否	新数组，包含回调函数的返回值
filter	遍历数组中的每个元素，并对每个元素执行一次回调函数	否	新数组，包含回调函数返回 true 的元素