reduce与filter

前言

在最近的JS书写中，有两个函数频繁的出现，这两个函数都与JS数组有关，分别是Array.reduce()和Array.filter()，二者既有不同，也有相同之处。Array.reduce()主要用来处理计算数组每一项的归并和累计，由于涉及每一个元素，可以进行每一个元素的相关操作；Array.filter()主要用来处理数组成员的删除和保留，符合要求的元素会保留下来，将所有符合要求的元素浅拷贝到新的数组中，由于只能进行元素的删除和保留，因此不能进行每一个元素的相关操作

Array.prototype.reduce()

reduce的原意表示reduce a list of values down to a single value，即将一系列数据进行归并，这里的reduce表示归并而非减少。reduce()主要用于计算数组每一项的归并和累计，主要的细节参考reduce用法。因此在开发的过程中涉及对于数组元素的求和、求中位数、求乘积以及类似的每一项元素的操作可以使用该方法。

Array.prototype.filter()

函数顾名思义实现数组元素的筛选操作，函数语法：

filter(callbackFn, thisArg)

在回调函数callbackFn中有两个参数，第一个是当前处理的元素，另一个当前元素在数组中的索引。回调的返回值即为当前保留的值。

callbackFn(element,index)

thisArg是callbackFn回调中this的指向，这个参数通常会在数组的筛选条件是变化的时候会用到，因为筛选的条件是变化的，因此当遇到特定的条件时，我们将该条件以thisArg的形式传递进去。
举个例子：

//实现数组的个数为多少，我们就筛选出能整除该数的数
function division(element){
	return element % this.length=== 0;
}
function select(array){
	return array.filter(division,array.length);
}

filter可以是普通函数，也可以是匿名函数

function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

[ 注意 ]如果是匿名函数，且返回值只有一行，可以省略return关键字和花括号。

二者的区别

（1）Array.prototype.filter()是通过浅拷贝实现的复制，会得到一个新数组，因此不会改变原来的数组，Array.prototype.reduce()会对原来的数组产生影响。
（2）Array.prototype.reduce()中的回调函数的返回值是累计值，是用于下一轮计算的初始值（除非是最后一次计算），而Array.prototype.filter()中的回调函数的return是true 或 false，用于判断是否将元素添加到新数组中，当return为true保留当前值，否则抛弃。