JavaScript高阶函数实现更高效的封装，包括数据对象的枚举处理、排序、过滤，使我们写的代码更加高效简洁，结合ES6语法，在MV*框架编程中尤为明显。

1.map

map在计科专业词汇中有“映射”的意思，顾名思义，传入一个函数对调用该方法的数据进行枚举处理。

参数
currentValue: callback 数组中正在处理的当前元素
index可选: callback 数组中正在处理的当前元素的索引
array可选: callback map方法被调用的数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//对象Oject示例
var infoObj=[{
                name:"二狗",
                sex:'female',
                age:28
            },
            {
                name:"二楞",
                sex:'male',
                age:20
            },
            {
                name:"牛二",
                sex:'female',
                age:32
            }];
            
infoObj.map(function(item){
  console.log(item); // 结果输出每一项
})

//数组示例
var arr = [1,3,8,9];
// var newArr = arr.map(x=>x*x);
var newArr = arr.map(function(x){
  return x*x;
});
console.log(newArr);  //[1,9,64,81]

2.reduce

reduce()方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算。

参数
accumulator: 累加器累加回调的返回值；它是上一次调用回调时返回的累积值或初始的第一项。
currentValue: 数组中正在处理的元素
currentIndex可选: 数组中正在处理的当前元素的索引。 如果提供了initialValue，则索引号为0，否则为索引为1
array可选: 调用reduce的数组

1
2
3
4
5
6
var arr = [1,3,8,9];
// var newArr = arr.reduce((x,y) => x + y);
var newArr = arr.reduce(function(x, y){
  return x + y;
})
console.log(newArr); // 21

3.filter

filter()方法创建一个新数组，它用于把Array的某些元素过滤掉，然后返回剩下的元素

参数
currentValue: 数组中正在处理的元素
currentIndex可选: 数组中正在处理的当前元素的索引
array可选: 调用filter的数组

1
2
3
4
5
6
var arr = [1,3,6,8,9];
//var newArr = arr.filter( x => x % 3 == 0);
var newArr = arr.filter(function(x){
  return x % 3 == 0;
})
console.log(newArr); // [3,6,9]

4.sort

sort()方法创建一个新的排序结果，包括正序，倒序，直接使用该方法可能会出错

参数
compareFunction可选: 用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序

1
2
3
//  出错示例
console.log([10, 20, 1, 2].sort());
// [1, 10, 2, 20]

What? 上述示例让人丈二和尚，根据MDN web docs上一段描述：排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。
可以知道，sort()方法默认把所有元素先转换为String再排序，结果’10’排在了’2’的前面，因为字符’1’比字符’2’的ASCII码小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 对象示例
var infoObj=[
            {
                name:"二狗",
                sex:'female',
                age:28
            },
            {
                name:"二楞",
                sex:'male',
                age:20
            },
            {
                name:"牛二",
                sex:'female',
                age:32
            }
        ];
var resultObj = infoObj.sort(function(a,b){
    return a['age'] < b['age'] ? 1 : -1;
});
console.log(resultObj); // 结果按年龄倒序

// 数组示例
var arr = [10, 20, 1, 2];
var newArr = arr.sort((x,y)=>x<y?1:-1);
console.log(newArr);  // [20, 10, 2, 1]