javascript中的 五个高阶函数map、fitler、reduce、every、some

在ES6中增加了五个高阶函数，map、filter、reduce、 every、some

1.map

map常用数组的遍历和操作,返回一个新的数组

例子：将一个数组的所有元素乘以2，求新的数组

按照之前的方法，我们可能会这样写

let arr = [1, 2, 3, 4, 5]
let newArr = []
for ( let i = 0; i < arr.length; i++) {
	newArr.push(arr[i] * 2)
}
console.log(newArr) // [2, 4, 6, 8, 10]

现在我们可以用map

let arr = [1, 2, 3, 4, 5]
let result = arr.map((item, index) => {
	return item * 2
})
console.log(result) // [2, 4, 6, 8, 10]

这样就方便多了。

2.filter

filter是过滤器的意思，可以通过filter来对数组进行过滤操作

例子: 将数组中的奇数去除

按照之前的方法，我们还是会来一个for循环

let arr = [1, 2, 3, 4, 5]
let newArr = []
for ( let i = 0; i < arr.length; i++) {
	if (arr[i] % 2 === 0) {
		newArr.push(arr[i])
	}
}
console.log(newArr) // [2, 4]

接下来我们来用filter,

let arr = [1, 2, 3, 4, 5]
let result = arr.filter((item, index) => {
	if (item % 2 === 0) {
		return true
	}else {
		return false
	}
})
console.log(result) // [2, 4]

是不是方便多了！

3.reduce

reduce 相对于上面俩个函数来说，更为复杂一些，通常情况下它有三个参数。

function( pre, cur, index)

pre: 指的是上一个操作的值，

cur: 指的是当前操作的值，

index: 索引

这样听起来有点糊里糊涂，我们还是来看个例子

例子: 数组求和

按照之前的方法，我们还是会来一个for循环

let arr = [1, 2, 3, 4, 5]
let total = 0
for ( let i = 0; i < arr.length; i++) {
	total += arr[i]
}
console.log(total) // 15

现在我们可以用reduce方法，

let arr = [1, 2, 3, 4, 5]
let origin = 0  //origin的值我们可以任意设置
let result = arr.reduce((pre, cur, index) => {
	return pre + cur
}, origin)  
console.log(result) // 15

reduce会把每一次操作的返回值赋值给下一次的pre，再继续下一步。

origin是函数的初始值，可以任意设置， 第一次操作就会把origin赋值给pre，把数组的第一项赋给cur ，进行操作。

这样来看还是有点糊涂，我们来看一下上面例子reduce的操作步骤，就会明白了

上述例子中reduce 经历了5次操作，
第一次操作: pre = origin, cur = 1, index = 0, return origin + 1, 将origin+1赋给 下一步的pre，
第二次操作: pre = origin + 1, cur = 2, index = 1, return origin + 1 + 2，将origin+1+2赋给下一步的pre，
第三次操作: pre = origin + 1 + 2, cur = 3, index = 2, return origin + 1 + 2 + 3，将origin+ 1+ 2 + 3赋给下一步的pre，
…
最后得到的结果就是 origin + 1 + 2 + 3 + 4 + 5 的和。

reduce还可以进行数组的去重

去重代码:

let arr = [1, 2, 3, 4, 10, 20, 10, 5, 4, 2]
let newArr = arr.reduce((pre, cur, index) => {
	if (pre.indexOf(cur) === -1 ) {
		pre.push(cur)
	}
	return pre
},[])
console.log(newArr)  //1, 2, 3, 4, 10, 20, 5

4.every

arr.every() : 遍历数组，当数组中所有项都满足条件时，返回true；反之返回false

let arr = [10, 20, 30]
let isTrueOrFalse1 = arr.every((item, index) => {
	return item < 40
})
let isTrueOrFalse2 = arr.every((item, index) => {
	return item < 10
})
console.log(isTrueOrFalse1);   //true,所有项都小于40
console.log(isTrueOrFalse2);   //false，并不是所有项都小于40

5.some

arr.some()：遍历数组，当数组中只要有一项满足条件时，返回true；反之返回false

let arr = [10, 20, 30]
let isTrueOrFalse1 = arr.some((item, index) => {
	return item < 11
})
let isTrueOrFalse2 = arr.some((item, index) => {
	return item < 10
})
console.log(isTrueOrFalse1);   //true, 存在第一个元素10小于 11
console.log(isTrueOrFalse2);   //false, 不存在任何一项小于10

总结

1. 五种方法都不会改变原数组

2.合理运用这五个高阶函数，会有效的减少for 循环， 减少代码的重复， 提高可读性。