ES6 中的 reduce 和 filter 方法及其应用

ES6 中的 Reduce 和 Filter 方法及其应用

在 JavaScript 中，数组是一种常见的数据结构，而数组的处理是前端开发中必不可少的一项功能。ES6 给予我们两种新的数组方法：reduce 和 filter。本文将介绍这两种方法的具体用法以及应用场景，希望能对前端开发者有所帮助。

Reduce 方法

Reduce 方法是用于数组的迭代操作，它将数组中的所有元素逐个进行合并，最终计算出一个值。Reduce 方法的基本语法为：

array.reduce(callback, initialValue)

其中，callback 是一个函数，作用是对数组元素进行操作；initialValue 是一个可选的初始值。

Reduce 方法的回调函数有四个参数：

1. accumulator：累加器，即上一次回调函数的返回值。如果有提供初始值，第一次回调的 accumulator 就是 initialValue；否则第一次就是数组的第一个元素。

2. currentValue：当前元素。

3. currentIndex：当前元素的下标。

4. array：原数组。

Reduce 方法的应用场景非常多，下面介绍几个例子：

1. 对数组所有元素求和：

let arr = [1, 2, 3];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 6

1. 找出数组中的最大值：

let arr = [1, 3, 7, 4, 5];
let max = arr.reduce((accumulator, currentValue) => accumulator > currentValue ? accumulator : currentValue);
console.log(max); // 7

1. 将数组中的字符串用逗号连接起来：

let arr = ['foo', 'bar', 'baz'];
let str = arr.reduce((accumulator, currentValue) => accumulator + ', ' + currentValue);
console.log(str); // foo, bar, baz

Filter 方法

Filter 方法是用于从数组中筛选出符合条件的元素，返回一个新的数组。它的基本语法为：

array.filter(callback)

其中，callback 是一个函数，作用是检查是否符合条件。

Filter 方法的回调函数有三个参数：

1. currentValue：当前元素。

2. currentIndex：当前元素的下标。

3. array：原数组。

Filter 方法的应用场景同样非常多，下面介绍几个例子：

1. 筛选出数组中的偶数：

let arr = [1, 2, 3, 4, 5];
let evenArr = arr.filter(currentValue => currentValue % 2 === 0);
console.log(evenArr); // [2, 4]

1. 筛选出数组中长度大于 5 的字符串：

let arr = ['foo', 'bar', 'hello world', 'baz'];
let longStrArr = arr.filter(currentValue => currentValue.length > 5);
console.log(longStrArr); // ['hello world']

1. 筛选出数组中满足多个条件的元素：

let arr = [
  {name: 'Tom', age: 20, gender: 'male'},
  {name: 'Jerry', age: 18, gender: 'male'},
  {name: 'Lily', age: 22, gender: 'female'}
];
let peopleArr = arr.filter(currentValue => currentValue.age > 18 && currentValue.gender === 'male');
console.log(peopleArr); // [{name: 'Tom', age: 20, gender: 'male'}]

结语

Reduce 和 Filter 方法都是 ES6 中很实用的数组方法，它们能够大大简化我们的数组操作。前端开发中，需要对数组进行合并、筛选、排序等操作的情况非常常见，相信 Reduce 和 Filter 方法会成为你的好帮手。

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