ES8 多种数组方法实践汇总：利用 map()/reduce()/filter() 优雅处理数组数据

在前端开发中，处理数组数据是非常常见的操作。ES6 引入了一些新的数组方法，如 find() 和 findIndex() 等，大大方便了开发者的工作。而在 ES8 中，又引入了一些新的数组方法，本文将会介绍其中的三种方法：map()、reduce() 和 filter()，并通过实践演示它们的用法。

1. map()

map() 方法可以将数组中的每个元素按照一定规则转换成另一个元素，并返回一个新的数组。这个规则由开发者自己定义，可以是一个函数。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(item => item * 2);
console.log(newArr); // [2, 4, 6, 8, 10]

上述代码中，我们将 arr 数组中的每个元素都乘以 2，得到了一个新的数组 newArr。

map() 方法可以很方便地实现一些复杂的操作，比如将一个数组中的对象属性提取出来组成一个新的数组。

const arr = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 }
];
const names = arr.map(item => item.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

上述代码中，我们将 arr 数组中每个对象的 name 属性提取出来，组成了一个新的数组 names。

2. reduce()

reduce() 方法可以将数组中的所有元素通过一个函数进行累积计算，并返回一个最终的结果。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((prev, curr) => prev + curr);
console.log(sum); // 15

上述代码中，我们通过 reduce() 方法将 arr 数组中的所有元素相加，得到了最终的结果 15。

reduce() 方法还可以接收一个初始值作为第二个参数。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((prev, curr) => prev + curr, 10);
console.log(sum); // 25

上述代码中，我们将初始值设为 10，得到了最终的结果 25。

reduce() 方法还可以实现一些复杂的操作，比如将一个数组中的对象属性相加。

const arr = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 }
];
const totalAge = arr.reduce((prev, curr) => prev + curr.age, 0);
console.log(totalAge); // 75

上述代码中，我们通过 reduce() 方法将 arr 数组中每个对象的 age 属性相加，得到了最终的结果 75。

3. filter()

filter() 方法可以将数组中符合某些条件的元素筛选出来，并返回一个新的数组。

const arr = [1, 2, 3, 4, 5];
const even = arr.filter(item => item % 2 === 0);
console.log(even); // [2, 4]

上述代码中，我们通过 filter() 方法将 arr 数组中的偶数筛选出来，得到了一个新的数组 even。

filter() 方法还可以实现一些复杂的操作，比如将一个数组中的对象按照某些条件筛选出来。

const arr = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 }
];
const youngPeople = arr.filter(item => item.age < 25);
console.log(youngPeople); // [{ name: 'Alice', age: 20 }, { name: 'Bob', age: 25 }]

上述代码中，我们通过 filter() 方法将 arr 数组中年龄小于 25 岁的对象筛选出来，得到了一个新的数组 youngPeople。

总结

map()、reduce() 和 filter() 是 ES8 中非常实用的数组方法，它们可以帮助开发者优雅地处理数组数据。通过本文的介绍和实践演示，我们可以更深入地了解这三种方法的用法和指导意义，从而更加高效地进行前端开发。

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