这是我参与更文挑战的第20天，活动详情查看更文挑战

什么是高阶函数？

JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

map

定义

原数组被“映射”成对应新数组。

语法

array.map(function(currentValue,index,arr), thisValue)

注意

map() 参数必须是函数
不会改变原数组，返回调用函数处理后一个新数组，长度等于原数组长度
不会对空数组进行遍历
函数接收三个参数

示例

let arr = [1, 2, 3]
let newArr = arr.map((currentValue, index, arr) => {
    //currentValue:遍历数组的每一项，index:数组当前项的下标，arr原数组
    console.log(`item---${currentValue}, index---${index}, arr---${arr}`)
    return currentValue + index
})
console.log(newArr)

示例一：求平方

假设有一个函数f(x)=x²;

作用在一个数组[1,2,3,4,5,6,7,8,9]

function square(x){
　　return x * x;   
}
var arr = [1,2,3,4,5,6,7,8,9];

普通遍历实现

var result = [];
for(var i=0; i<arr.length; i++){
　　result.push(square(arr[i]))   
}

map改写

arr.map(square);

map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到一个新的Array作为结果。

map传入的参数时square，即函数本身

示例二：数字转化

将数组的所有数字转化为字符串。

reduce

定义

将数组元素计算为一个值（从左到右）

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

注意

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
作为一个高阶函数，用于函数的 compose
对于空数组不会执行回调函数

示例一：数组求和

// 数组求和
var arr = [1, 2, 3, 4, 5]
var total = arr.reduce(function (prev, next) {
    return prev + next
}, 0)

　将0当做reduce回调函数中的初始值，然后依次累加

示例二：数组去重

// 数组去重
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 8]
var newArr = arr.reduce(function (prev, next) {
    prev.indexOf(next) == -1 && prev.push(next)
    return prev
}, [])

初始化一个空数组，判断下一个元素是否在当前数组中，不存在则添加到当前数组中

示例三：数组最大最小值

// 获取数组中最大值
var arr = [985, 666, 33, 22, 989855, 1, 336699, 666888, 123456789]
var max = arr.reduce(function (prev, next) {
    return Math.max(prev, next)    // Math.min(prev, next)
}, 0)

将0当做reduce回调函数中的初始值,假如该值不存在时，则回调函数的初始值为数组中的第一项，即回调函数中的prev值。

如果不写初始值

filter

定义

把Array的某些元素过滤掉，然后返回剩下的元素（即通过检查符合条件的所有元素）

语法

array.filter(function(currentValue,index,arr), thisValue)

注意

和map不同的是filter把传入的函数作用于每一个元素，然后根据返回值是true和false决定保留还是丢掉该元素。
不会改变原始数组。

示例一：数组去重

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
var arr = [1,1,'Axjy','Axjy',true,true,15];
console.log(unique(arr))

示例二:筛选出所有偶数

let arr = [56, 15, 48, 3, 7];
let newArr = arr.filter(function (value, index, array) {
    return value % 2 === 0; //return value % 2 !== 0;(奇数)
});
console.log(newArr)

示例三：删掉数组的空字符串

 let arr = ['A', '', 'B', null, undefined, 'C', '  '];
 let r = arr.filter(function (s) {
     return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
 });
  // ['A', 'B', 'C']

sort

定义

对数组的元素进行排序。

语法

array.sort(sortfunction)

注意

sort()方法的默认排序规则，字符串是根据ASCII码进行排序，默认把所有元素先转换为String再排序。

数组在原数组上进行排序，不生成副本,会改变原始数组！

示例一：数字排序

var points = [40,100,1,5,25,10];
points.sort(function(a,b){
   return a-b  //return b-a (降序)
});

返回的是差值，如果是小于0的值，就会将a排在前面，如果大于0,就会将b排在前面，如果是0的话，就随便。（冒泡排序法！！）

小可爱看完就点个赞再走吧！🤞🤞🤞

一定要知道的JavaScript高阶函数

map

定义