ECMAScript 2020 中的数组方法 filter 与 map 的区别与联系

ECMAScript 2020 中的数组方法 filter 和 map 都是非常有用的方法，它们可以让我们更方便地操作数组。但是它们的用法和作用不同，本文将深入比较这两个方法的区别和联系，并提供一些实际案例来说明它们的使用。

filter 方法

filter 方法可以让我们从一个数组中过滤出符合一定条件的元素，然后返回一个新的数组。具体语法如下：

const newArray = array.filter(function callback(element[, index[, array]]) {
  // return element for newArray, if true
}[, thisArg]);

其中，callback 函数是一个用来测试每个元素的函数，它接收三个参数：

• element：当前正在被处理的元素。
• index（可选）：当前元素在数组中的索引。
• array（可选）：正在调用的那个数组本身。

callback 函数需要返回一个布尔值，表示该元素是否符合条件，如果返回 true，则将该元素加入到新的数组中。最后，filter 方法返回一个新的数组，其中包含所有符合条件的元素。

下面是一个实例，我们通过 filter 方法从一个数值数组中过滤出所有的偶数：

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

map 方法

map 方法可以让我们对数组中的每个元素进行操作，最后返回一个新的数组。具体语法如下：

const newArray = array.map(function callback(element[, index[, array]]) {
  // return result for newArray
}[, thisArg]);

其中，callback 函数同样接收三个参数，但是它必须返回一个值，表示对当前元素的处理结果。最后，map 方法返回一个新的数组，其中包含所有处理后的元素。

下面是一个实例，我们通过 map 方法将一个字符串数组中的每个元素都转换成大写字母：

const names = ['Alice', 'Bob', 'Charlie'];
const upperCaseNames = names.map(name => name.toUpperCase());
console.log(upperCaseNames); // ['ALICE', 'BOB', 'CHARLIE']

区别与联系

可以看到，filter 方法和 map 方法的用途不同。filter 方法用于过滤数组中的元素，返回符合条件的元素组成的新数组；而 map 方法则是对数组中的所有元素进行操作，并返回所有处理后的元素所组成的新数组。

此外，它们在实际使用时也有一些常见的联系：

• 两者都接收一个用于处理数组元素的 callback 函数。
• 两者都返回一个新的数组，不会改变原来的数组。

因此，在实际开发中，需要根据需求选择适合的方法。如果需要过滤数组中的元素，则选择 filter 方法；如果需要对数组中的所有元素进行操作，则选择 map 方法。

总结

在 ECMAScript 2020 中，filter 方法和 map 方法是非常有用的数组方法，它们可以让我们更方便地处理数组中的元素。本文详细比较了它们的区别和联系，并提供了一些实例来说明它们的使用。在实际开发中，需要针对具体需求选择适合的方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649c2f2648841e98948fb300