三、高阶函数 一（map、reduce、filter、sort）

---

一、map

• 映射,可以对数组中每个元素进行操作，并逐一返回，生成一个理想的新数组

arr.map(function(item,index,arr){
    ..............
})

let arr1 = [1,4,9]
let newArr1 = arr1.map(Math.sqrt)       // Math.sqrt() 只接受一个参数， 所以默认接受的是数组内每一个元素
                                                             // 传入对数组的每一个元素进行开放 
console.log(newArr1);        //  [1,2,3]

//返回对象中指定的字段，组成新数组 (可以将数组的id挑选出来)
let arr4 = [{a:1,x:2},{a:2,x:2},{a:3,x:2}]
let newArr4 = arr4.map(item => item.a)
console.log(newArr4);        //[1, 2, 3]

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

• 备注：map的回调函数中不能使用判断语句 (使用的话只能返回 boolean 值)，必须直接return，否则会返回undefined。但是可以返回boolean值

  let arr4 = [
        { a: 1, x: 2 },
        { a: 2, x: 2 },
        { a: 3, x: 2 }
      ]
let newArr4 = arr4.map(item => item.a > 1)
console.log(newArr4) //  [false, true, true]

二、reduce

• 接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。
• callback(执行数组中每个值的函数，包含四个参数)
• previousValue(上一次调用回调函数返回的值，或者是提供的初始值（initialValue）)
• currentValue(数组中当前被处理的元素)
• index（当前元素在数组中的索引）
• array（调用reduce的数组）

reduce可以传一个初始值，也可以不传，直接，将previousValue当做初始值
初始值可以传任何类型的值

// 不传递初始值，直接以数组内的第一个元素为初始值。没传递初始值时，第一个参数就是上一次回调返回的值，这里的init依次是：1   3   6
      // 累加arr的值
      let arr = [10, 20, 30, 40]
      let total = arr.reduce((pre, value, index, arr) => {
        console.log(pre) // 10, 20, 40, 70 (有初始化值 10)
        // console.log(pre) // 10, 30, 60, 100 (无初始化值)
        return pre + value
      })
      console.log(total)

// data 为10

// 传递一个Number初始值，
//init第一次是初始值10，之后每次都是上一次回调函数返回的值：
     11    13    16
let arr = [1,2,3,4]
let data = arr.reduce((init,now) => {
    return init+now
},10)
//data为20

//传递一个Object初始值.  使对象里的属性和某数组内的元素累加
let arr = [1,2,3,4]
let data = arr.reduce((init,now) => {
    init.sum = init.sum + now
    return init
},{sum:2})
console.log(data);  // {sum:12}

//对象内的某个属性进行累加
let arr = [
    {a:1,name:'a'},
    {a:2,name:'b'},
    {a:3,name:'c'},
]
let data = arr.reduce((init,now) => {
    return init + now.a
},0)
console.log(data);    // 6

//  查看某字符串，每个字符出现的次数
var str = 'abccacbbaacaa'
var obj = str.split('').reduce((init,now) => {
init[now] ? ++init[now] : init[now] = 1
return init
},{})
console.log(obj); //{a: 6, b: 3, c: 4}

• 再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

• 比方说对一个Array求和，就可以用reduce实现：

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

• 计数值大于2的有几个

     let arr = [1, 2, 3, 4]
      let total = arr.reduce((pre, value, index, arr) => {

        if (value > 2) {
          return pre + 1
        }
        return pre
      }, 0)
      console.log(total)

三、filter

• filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。

• 和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

• 例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：
  ···
  //过滤掉数组中不符合的元素

let arr = [1,2,3]
let newArr = arr.filter((item) => item > 1)

// 过滤掉数组中空项，转为布尔为false的元素

let arr = [1,'',undefined,2,3]
let newArr = arr.filter(item => item)

// 过滤掉数组内不符合条件的对象

let arr = [{a:1},{a:2},{a:3}]
let newArr = arr.filter(item => item.a > 1)
console.log(newArr);    // [{a:2},{a:3}]

//过滤掉指定的空项，将没有x属性的对象过滤掉

let arr = [{a:1,x:2},{b:1},{c:1,x:3}]
let newArr = arr.filter(item => item.x)
console.log(newArr);

// 数组去重

var arr = [1,2,3,1,2,5,4,3,3,1]
var newArr = arr.filter((item,index,arr)=>{
return arr.indexOf(item) === index
})
console.log(newArr)

• 总结： filter： 过滤出来当前完整的元素。 map: 处理过的元素。如果是从一组元素中找出某个元素，用filter，如果对一组元素的子元素需要处理后返回，使用 map

四、sort

• 排序也是在程序中经常用到的算法。无论使用冒泡排序还是快速排序，排序的核心是比较两个元素的大小。如果是数字，我们可以直接比较，但如果是字符串或者两个对象呢？直接比较数学上的大小是没有意义的，因此，比较的过程必须通过函数抽象出来。通常规定，对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1，这样，排序算法就不用关心具体的比较过程，而是根据比较结果直接排序。

• JavaScript的Array的sort()方法就是用于排序的，但是排序结果可能让你大吃一惊：

// 看上去正常的结果:
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

// apple排在了最后:
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']

// 无法理解的结果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

• 第二个排序把apple排在了最后，是因为字符串根据ASCII码进行排序，而小写字母a的ASCII码在大写字母之后。

• 第三个排序结果是什么鬼？简单的数字排序都能错？

• 这是因为Array的sort()方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。

• 如果不知道sort()方法的默认排序规则，直接对数字排序，绝对栽进坑里！

• 幸运的是，sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
}); // [1, 2, 10, 20]

• 如果要倒序排序，我们可以把大的数放前面：

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
}); // [20, 10, 2, 1]

• 默认情况下，对字符串排序，是按照ASCII的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以：

• 默认情况下，对字符串排序，是按照ASCII的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以：

• 忽略大小写来比较两个字符串，实际上就是先把字符串都变成大写（或者都变成小写），再比较。
  从上述例子可以看出，高阶函数的抽象能力是非常强大的，而且，核心代码可以保持得非常简洁。最后友情提示，sort()方法会直接对Array进行修改，它返回的结果仍是当前Array：

var a1 = ['B', 'A', 'C'];
var a2 = a1.sort();
a1; // ['A', 'B', 'C']
a2; // ['A', 'B', 'C']
a1 === a2; // true, a1和a2是同一对象