js ES6高阶函数（简介及map、reduce、filter、flat）

付之一笑
440 阅读4分钟

简介

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

JavaScript是一种弱类型语言，javaScript中的函数即不对输入的参数也不对函数的输出值做强定义和类型检查。

那么函数就可以作为参数，也可以作为输出值，这就体现了javaScript对高阶函数的原生支持

  • 高阶函数是对其他函数进行操作的函数，可以将他们作为参数或返回值
  • 简单来说，高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回

原生高阶函数的使用

map

简介

map方法接收一个函数作为参数，数组中的每个元素都会执行这个函数，它会创建一个新的数组，其结果是该数组中的每个元素都调用一个所提供的函数所提供的结果，这个函数有三个参数：

  • element（必选）：当前元素的值
  • index（可选）：当前元素的索引
  • array（可选）：当前元素所属数组

示例

需求：创建一个新数组，其中的值是原数组的值的两倍

代码如下：

const arr1 = [1,2,3,4];
const arr2 = [];//[ 2, 4, 6, 8 ]

//常规操作
for (let i = 0; i < arr1.length; i++) {
  arr2.push(arr1[i]*2);
}
console.log(arr2);
//高阶函数
const arr3 = arr1.map(function(item,index,arr){
  console.log(item,index,arr);
  return item*2;
})
console.log(arr3);

const arr4=arr1.map(item=>item*2);
console.log(arr4);

reduce

简介

reduce方法接收一个函数作为累加器，数组中的元素会依次执行该回调函数，该函数接受四个参数：

  • accumulator（必选）：初始值或者是上一次回调的返回值
  • currentValue（必选）：当前元素值
  • currentIndex（可选）：当前元素索引
  • sourceArray（可选）：当前元素所属数组

补充：

reduce函数接受两个参数：

  • function(accumulator,currentValue, currentIndex,sourceArray)【必选】：累加器函数
  • initialValue【可选】：传递给函数的初始值
    • 提供了该参数，则累加器中的accumulator的初始值等于initialValue，currentValue等于数组的第一个元素值
    • 没有提供该参数，则累加器中的accumulator的初始值等于数组的第一个元素值，currentValue等于数组的第二个元素值

示例

需求：对一个数字数组进行求和

代码如下：

let arr = [1,2,3,4,5,6];
let sum = arr.reduce((prev,cur)=>prev+cur);
console.log(sum);//21

需求：数组去重

代码如下：

let arr1=[1,2,3,4,5,6,2,3,4,2];
let newArr=arr1.reduce((prev,cur)=>{
  prev.indexOf(cur)===-1 && prev.push(cur);
  return prev;
},[])
console.log(newArr);//[ 1, 2, 3, 4, 5, 6 ]

filter

简介

filter方法主要是对数组进行过滤和筛选，它会创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，它接收一个函数作为参数，这函数接受三个参数：

  • element（必选）：当前元素的值
  • index（可选）：当前元素的索引
  • array（可选）：当前元素所属数组

示例

需求：将对象数组中年龄大于21的对象组成新的对象数组

代码如下：

let persons=[
  { name:'Peter',age:21},
  { name:'Mark',age:28},
  { name:'Josn',age:19},
  { name:'Jane',age:31},
  { name:'Tony',age:35}
];
let newAge=persons.filter(item=>item.age>21);
console.log(newAge);//[ { name: 'Mark', age: 28 }, { name: 'Jane', age: 31 },  { name: 'Tony', age: 35 } ]

flat

简介

flat方法用于将嵌套的数组拉平，也就是所谓的数组扁平化。将多维数组变为一维数组，该方法会返回一个新数组，对原数据没有影响。它接受一个参数：

  • depth（可选）：指定要提取嵌套数组的结构深度，默认值为 1。

注意：结合上文理论，该函数并非高阶函数，属于ES10新增方法

代码如下：

let arr=[1,2,3,4,[5,6]];
let newArr=arr.flat();
console.log(newArr);//[ 1, 2, 3, 4, 5, 6 ]

如果不确定有多少层数组嵌套，但是我们想要返回一个以为数组，可以使用 Infinity 关键字作为 flat 方法的参数。

let arr1 = [1, 2, 3, 4, [5, 6 , [7, 8 , [9, 10, [11, 12]]]]];
let newArr1 = arr1.flat( Infinity );
console.log( newArr1 ); //[1,  2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

高阶函数的意义

高阶函数主要分为两种：

  • 函数作为参数传递
  • 函数作为返回值输出

高阶函数并不是JavaScript的专利，但绝对是javaScript的利器，高阶函数实际上就是对基本算法的再度抽象，我们可以通过这点提高代码的抽象度，实现最大限度的代码重用，编写出更简洁，更利于重构的代码，在react中也是得到了高阶函数的启发，从而有了高阶组件的概念**。**

avatar
文章
阅读
粉丝