JS高阶函数arr.map()、arr.filter()、arr.reduce()介绍

最近刚接触到高阶函数这个词语,简单了解了下,就在这里记录下学习成果

什么是高阶函数?

高阶函数英文名叫:Higher-order function 。
如果一个函数的参数也是一个或是多个函数,或者函数的返回值是函数的话。就把这个函数称为高阶函数

类型一:参数是函数 (Function)

JS语言中内置了几种高阶函数,包含 Array.prototype.map, Array.prototype.filter和Array.prototype.reduce, 它们都需要接受一个函数作为参数,并且可以应用函数到数组的每一个元素。下面是对这几种函数应用的具体介绍,

Array.prototype.map

map()方法 又可以称之为映射函数,map()方法最终的结果是创建一个新的数组,其中数组的每个元素就是执行,map()函数内部传入的函数参数每次执行的结果。同时原始数组的值不会改变

语法

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

参数说明

function(currentValue, index, arr)

必需参数。函数参数。用于执行每个数组元素的函数
currentValue: 必需参数,当前数组的元素
index: 可选参数。当前元素的索引
arr: 可选参数。当前元素所属的数组对象,即原始数组

thisValue

可选参数。 对象作为该执行回调时使用,传递给函数,用作“this”的值。
如果省略了thisValue,或者传入null、undefined,那么回调函数的this为全局对象

map() 应用

给个例子,实现一个让数组所有元素*2的操作

不使用map
      let arr = [1, 2, 3, 4];
      let newarr = [];
      for (let i = 0; i < arr.length; i++) {
        newArr.push(arr[i] * 2);
      }

      console.log(newarr) // [2, 4, 6, 8]

      console.log(arr) // [1, 2, 3, 4]
使用map
      let arr = [1, 2, 3, 4];
      let newarr = arr.map(currentV => {
        return currentV*2
      })

      console.log(newarr) // [2, 4, 6, 8]

      console.log(arr) // [1, 2, 3, 4]

Array.prototype.filter

filter()方法 又称为过滤函数,同样也是返回一个新的数组,该新数组的元素必须符合传入的callback函数的执行规则,该callback函数有两种结果,true,或者false即满足规则或者不满足规则,如果该列表元素满足规则,则会添加到新的数组里,不满足则被过滤掉,所以是过滤函数。同时原始数组的值不会改变。

语法

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

参数说明

function(currentValue, index, arr)

必需参数。函数参数。用于执行每个数组元素的函数
currentValue: 必需参数,当前数组的元素
index: 可选参数。当前元素的索引
arr: 可选参数。当前元素所属的数组对象,即原始数组

thisValue

可选参数。 对象作为该执行回调时使用,传递给函数,用作“this”的值。
如果省略了thisValue,或者传入null、undefined,那么回调函数的this为全局对象

filter() 应用

给个例子,实现一个让数组去重的操作

不使用filter
          let arr1 = [1, 1, 2, 5, 2, 3, 5, 4, 8];
          let arr2 = []
          for (let i = 0; i < arr1.length; i++) {
            if (arr1.indexOf(arr1[i]) === i) {
              arr2.push(arr1[i])
            }
          }

          console.log(arr2)  //[1, 2, 5, 3, 4, 8]
          console.log(arr1)  //[1, 1, 2, 5, 2, 3, 5, 4, 8]
使用filter
          let arr1 = [1, 1, 2, 5, 2, 3, 5, 4, 8];
          let arr2= arr1.filter((currentV, index, self)=> {
            return self.indexOf(currentV) === index
          }) 

          console.log(arr2)  //[1, 2, 5, 3, 4, 8]
          console.log(arr1)  //[1, 1, 2, 5, 2, 3, 5, 4, 8]

Array.prototype.reduce

reduce() 方法接收一个函数callback作为累加器,对数组中的每个元素执行该callback函数,最终的结果是计算为一个值。

语法

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

参数说明

function(total, currentValue, currentIndex, arr)

必需参数。函数参数。用于执行每个数组元素的函数
total:必需参数,初始值,或者是计算结束后的返回值,即每次函数执行结束后的返回值,也可以叫(上一次的值)
currentValue: 必需参数,当前数组的元素
currentIndex: 可选参数。当前元素的索引
arr: 可选参数。当前元素所属的数组对象,即原始数组

initalValue

可选参数。 第一次计算的初始值

reduce()应用

给个例子,四舍五入后计算数组元素的求和

不使用reduce
          let array = [1.5, 1.6, 2.0, 5.6, 2.9];
          let sum = 10;
          for (let index = 0; index < array.length; index++) {
            sum = sum + Math.round(array[index]);
          }

          console.log(sum) //15
          console.log(array) //[1.5, 1.6, 2.0, 5.6, 2.9]
使用reduce
          let array = [1.5, 1.6, 2.0, 5.6, 2.9];
          let sum = array.reduce((total, currentV) => total + Math.round(currentV), 10)

          console.log(sum) //25
          console.log(array) //[1.5, 1.6, 2.0, 5.6, 2.9]

类型二:函数作为返回值输出

这个比较好理解,就是一个函数的返回值 还是一个函数类型

函数作为返回值输出的应用

封装的一个isType函数

          //判断类型 Object.prototype.toString.call(obj) 
          let isString = obj => Object.prototype.toString.call(obj) === '[object String]'
          let isArray = obj => Object.prototype.toString.call(obj) === '[object Array]'
          let isNumber = obj => Object.prototype.toString.call(obj) === '[object Number]'
          alert(isString('123')) //true
          alert(isArray([1, 7])) //true
          alert(isNumber(1)) //true

          //封装isType 进行判断类型
          let isType = type =>obj => {
            return Object.prototype.toString.call(obj) === `[object ${type}]`
          }

          alert(isType('Number')(1))//true    
          alert(isType('String')('123')) //true
          alert(isType('Array')([1, 7])) //true
          alert(isType('Number')(1)) //true

备注: 函数内部继续返回函数的话 调用方法是 函数名(函数参数)(内部函数1参数)。
类似这种函数返回另外一个函数的类型,调用的方式是连续执行调用不同层的函数。最外层只是构建了一个外层函数体对象。

相关

初次接触高阶函数,有不正确的请多指导纠正
引用参考:https://muyiy.cn/blog/6/6.1.html#函数作为返回值输出

你可能感兴趣的:(JS高阶函数arr.map()、arr.filter()、arr.reduce()介绍)