高阶函数(map、reduce、filter、sort等)

1. 先了解abs() 方法

abs()方法可返回函数的绝对值

语法

Math.abs(x)

 

2. 高阶函数

一个函数可以接收另一个函数作为参数，这种函数称之为高阶函数

 // 高阶函数
 function add(x,y,f){
    return f(x) + f(y)
 }

 var add_s = add(5,-6, Math.abs);  // 11   注意此处传入的Math.abs 不加 ()
 console.log(add_s)

 

当我们调用add(5,-6,Math.abs)时, 参数x，y 和 f 分别接收6， -5 和函数Math.abs, 根据函数定义，我们可以推导计算过程为：

x = 6;
y = -5;
f = Math.abs;
f(x) + f(y) ===> Math.abs(6) + Math.abs(-5) ===> 11
return 11

 

2.1 map

map

定义和用法

map() 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

map() 方法按照原始数组元素顺序依次处理元素

注意：map() 不会对空数组进行检测，map() 不会改变原始数组

 

 

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

      function square(x){
            return x**2        // 指数运算符，表示平方
            // return x*x      // 表示平方
        }
        let arr = [1,2,3]
        let arr1 = arr.map(square)
        console.log(arr1)

 

注意: map() 传入的参数是pow， 即函数对象本身。

不使用map() ，写一个循环，也可以计算出结果

      // 不使用map求平凡根
        function squre1(x) {
            return x **2
        }
        let arr2 = []
        for(let j of arr){
            arr2.push(squre1(j))
        }
        console.log(arr2)

的确可以，但是，从上面的循环代码，我们无法一眼看明白“把square1(x)作用在Array的每一个元素并把结果生成一个新的Array”

 

map() 还可以计算任意复杂的函数，比如，把Array的所有数字转为字符串：

        let arr = [1,2,3]
        let arr3 = arr.map(String)
        console.log(arr3);     //  ["1","2","3"]

 

 

2.2 reduce

定义和用法：

reduce() 方法接收一个函数作为累加器，数组中的每个值(从左到右) 开始缩减，最终计算为一个值（至于计算方式，还是要看函数定义，比如数组求和，返回前两个元素和和第三个元素）。

reduce() 方法计算数组元素想加后的总和， Array的reduce() 把一个函数作用在这个Array的[x1,x2,x3...] 上，这个函数必须接收两个参数, 其效果就是：

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

 

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

       // 使用reduce() 对一个数组求和
        let arr4 = arr.reduce(function(x,y) {
            return x + y
        })
        console.log(arr4);   // 6

 

 

练习：

['xio','ZHU','LIi'] 首字母变为大写，其他小写  

function arrUpperLower(arr) {
    return arr.map(x=>{
       x = x.toLowerCase();  // 全部转换为小写
       //console.log(x.charAt(0))
       return x.charAt(0).toUpperCase() + x.slice(1)          
    })
            
}
console.log(arrUpperLower(['xio','ZHU','LIi']));   // ["Xio", "Zhu", "Lii"]
    

 

 

2.3 filter

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

例： 数组求偶

let arrF  = [1,2,3]
let arrFf = arrF.filter(x=>{
      return x % 2 === 0
})
console.log(arrFf);    //[2]
console.log(arrF);    // [1,2,3]

例： 把一个Array中的空字符删掉

let arrK = ['li',undefined,null, '','zhu']
let arrKf = arrK.filter(x => {
      return x && x.trim()
})

console.log(arrKf);    // ['li','zhu']

 

例： 利用filter去除数组中重复的元素

 let arr11 = [2,2,3,4]
 let arr11_1 = arr11.filter(function(element,index,self){
            return self.indexOf(element) === index
  })
 console.log(arr11_1)；      // [2,3,4] 

去除重复元素依靠的是indexOf总数返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。 

 

2.4 sort() 

升序、降序

let arr12 = [5,3,1]
// 升序
let arr12_2 = arr12.sort(function(a,b){
    return a -b
})
console.log(arr12_2);   // [1,3,5]
// 降序
let arr12_3 = arr12.sort(function(a,b){
    return b - a
})
console.log(arr12_3);   // [5,3,1]

 

对字符串排序:

let arr13 = ['Jan','Chi','Paa']
let arr13_3 = arr13.sort();    
arr13_3;                //  ["Chi", "Jan", "Paa"]
arr13;                 //   ["Chi", "Jan", "Paa"]
arr13 === arr13_3;     //   true   arr13 和arr13_3 是同一对象

注： sort()方法会直接对Array进行修改，它返回的结果仍是当前Array