JavaScript 数组方法filter和reduce javascript前端

前言
在ES6新增的数组方法中，包含了多个遍历方法，其中包含了用于筛选的filter和reduce
filter
【JavaScript 数组方法filter和reduce】主要用于筛选数组的filter方法，在使用中，不会改变原数组，同时会将符合筛选条件的元素，放入新的数组进行返回。

/*** * @item 数组元素 * @index 遍历数组下标 * @thisArr 当前数组 */ let arr1 = [1, 2, 3, 4, 5]; let newArr1 = arr1.filter((item, index, thisArr) => { console.log(item); console.log(index); console.log(thisArr); return item > 2; }) console.log(arr1); console.log(newArr1); `

上面的代码，运行之后，可以看到原来的数组arr1没有发生改变，而newArr1用于接收符合筛选条件的数组

// [1, 2, 3, 4, 5]arr1 // [3, 4, 5]newArr1

reduce
不同于map和filter这类遍历方法，reduce的语法较为特殊一点
语法：

array.reduce(function(total,currentValue,currentIndex,thisArr){},initValue); @function回调函数作为第一个参数，total作为返回值或者初始值进行返回currentValue当前遍历的元素currentIndex当前遍历元素下标thisArr为当前执行操作的数组。initValue是作为传递给函数的初始值

数组求和

// 数组求和 let arr1 = [1, 2, 3, 4, 5] let totals = arr1.reduce(function (prev, next) { console.log(prev); console.log(next); return prev + next; }, 0) console.log(totals)

筛选首字母是否是含有b字母

let arr = ['beep', 'boop', 'foo', 'bar']; console.log(arr.reduce((acc, val) => (val[0] === 'b' && acc.push(val), acc), [])); // 进阶每个数是否含有'b' arr.reduce((acc, val) => (val.indexOf('b') >-1 && acc.push(val), acc), [])

除了数组求和之外，reduce还可以处理数组去重，遍历最大值最小值的操作
同时还能已高阶函数的形式供其他函数进行调用。
最后
reduce和filter作为ES6中数组新增的方法，在面试和开发中经常会遇到，可以通过这两个函数结合其他类似map等新方法去处理一些较为复杂的数据。
文章个人博客地址：JavaScript 数组方法filter和reduce