JavaScript开发者应懂的33个概念<9>-map, reduce, filter 等高阶函数

简介

记录一个重新学习javascript的过程，文章并不是按顺序写的，写完就会更新目录链接本篇文章目录是参照 @leonardomso 创立，英文版项目地址在这里

1.高阶函数

高阶函数：一个函数如果接收另一个函数作为参数，或者该函数会返回另外一个函数作为返回值，那么这个函数就被称之为一个高阶函数。

function makeAdder(count) {
    function add(num) {
        return count+num
    }
    return add
}

var add5 = makeAdder(5)  //这里的add5实际上是一个函数，因为makeAdder()返回值为一个函数
console.log(add5(6))//11

2.map

map()返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
map()不会对空数组进行检测。
map()不会改变原始数组。

传递给 map() 方法的回调函数接受 3 个参数：currentValue，index 和 array。

currentValue：必须。当前元素的的值。
index：可选。当前元素的索引。
arr：可选。当前元素属于的数组对象

代码示例

有一个数组，所有值加1

let arr = [10, 20, 30, 40, 50, 60, 70, 80];
let newArr = arr.map((item) => {
    return item + 1;
});
console.log(newArr)//[11, 21, 31, 41, 51, 61, 71, 81]
console.log(arr);//原数组不变 [10, 20, 30, 40, 50, 60, 70, 80]

3.filter

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter()不会对空数组进行检测。
filter()不会改变原始数组。

传递给 filter() 方法的回调函数接受 3 个参数：currentValue，index 和 array。

currentValue：必须。当前元素的的值。
index：可选。当前元素的索引。
arr：可选。当前元素属于的数组对象

代码示例：返回数组中大于50的元素

let arr = [10, 20, 30, 40, 50, 60, 70, 80];
let newArr = arr.filter((item) => {
    return item > 50;
});
console.log(newArr)//[60, 70, 80]
console.log(arr);//原数组不变 [10, 20, 30, 40, 50, 60, 70, 80]

4.some

some() 方法用于检测数组中的元素是否满足指定条件。
some() 方法会依次执行数组的每个元素。
如果有一个元素满足条件，则表达式返回 true, 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回 false 。
some()不会对空数组进行检测。
some()不会改变原始数组。

代码示例：判断数组中是否含有大于 50 的数字

let arr = [10, 20, 30, 40, 50, 60, 70, 80];
let result = arr.some((item) => {
    return item > 50;
});
console.log(result )//true

5.every

every() 方法用于检测数组所有元素是否都符合指定条件。

every() 方法会依次执行数组的每个元素。

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

如果所有元素都满足条件，则返回 true。

every()不会对空数组进行检测。

every()不会改变原始数组。

let arr = [10, 20, 30, 40, 50, 60, 70, 80];
let result = arr.every((item) => {
    return item > 50;
});
console.log(result )//false

6.reduce

reduce() 方法对数组中的每个元素按序执行一个 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

reduce 方法接收两个参数:

(1)回调函数

(2)一个可选的 initialValue (初始值)。如果不传第二个参数 initialValue，则函数的第一次执行会将数组中的第一个元素作为 prev 参数返回。

传递给 reduce() 方法的回调函数接受 4 个参数：prev, current, currentIndex, arr。

prev：必须。函数传进来的初始值或上一次回调的返回值。
current：必须。数组中当前处理的元素值。
currentIndex：可选。当前元素索引。
arr：可选。当前元素所属的数组本身。

1.数组求和

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = arr.reduce((prev, current) => {
    return prev + current;
}, 0);
console.log(sum);//55

2.数组去重

//数组去重
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
const myArrayNo =myArray.reduce(function(pre,cur){
    if(pre.indexOf(cur)==-1){
        pre.push(cur)
    }
    return pre
},[])

console.log(myArrayNo);//[ 'a', 'b', 'c', 'e', 'd' ]

7. find

find()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回undefined。
find()不会对空数组进行检测。
find()不会改变原始数组。

传递给 find() 方法的回调函数接受 3 个参数：currentValue，index 和 array。

currentValue：必须。当前元素的的值。
index：可选。当前元素的索引。
arr：可选。当前元素属于的数组对象。

代码示例：返回数组中第一个大于50的元素

let arr = [10, 20, 30, 40, 50, 60, 70, 80];
let result = arr.find((item) => {
    return item > 50;
});
console.log(result )//60

8.findIndex

findindex() 和 find() 类似，也是查找符合条件的第一个元素，不同之处在于 findindex() 会返回这个元素的索引，如果没有找到，返回 -1 。

let arr = [10, 20, 30, 40, 50, 60, 70, 80];
let result = arr.findIndex((item) => {
    return item > 50;
});
console.log(result )//5 （索引）