数组的三大高阶函数（JavaScript）的使用

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

三大高阶函数的使用

编程范式：面向对象编程(第一公民：对象) / 函数式编程（第一公民：函数）

filter

---

filter() 方法创建一个新数组, 其包含通过所提供的回调函数函数实现的测试的所有元素。

语法

var newArray = arr.filter(callback(element, index, array), thisArg)

参数

callback

• element

  数组中当前正在处理的元素。

• index 可选

  正在处理的元素在数组中的索引。

• array 可选

  调用了 filter 的数组本身。

thisArg 可选

返回值

一个新的数组，如果被测试数组没有能通过的元素，返回空数组

说明

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。

callback 被调用时传入三个参数：

1. 元素的值
2. 元素的索引
3. 被遍历的数组本身

使用

1. 基本写法

   const arr = [1, 2, 3, 4, 5, 6, 7, 8];
   
   let newArr = arr.filter(function(item, index, arr) {		// 基本写法
       console.log(item);	// 1, 2, 3, 4, 5这些值
       console.log(index);	// 0， 1， 2， 3这些下标值
       console.log(arr);	// [1, 2, 3, 4, 5, 6, 7, 8]
       if (item > 6) {
           return true
       }
   })
   
   // newArr = [7, 8]
   

2. 使用箭头函数

   const arr = ['aa', 'aab', 'bba', 'cca', 'aagf'];
   
   let newArr = arr.filter(item => {
       return item.startsWith('a') ? true : false
   })
   
   // 筛选数组里面值开头字母为 a 的元素为一个新的数组
   console.log(newArr);
   
   // 筛选id大于1的选项
   const arr = [{
       id: 1
   }, {
       id: 2
   }, {
       id: 3
   }];
   
   let newArr = arr.filter(item => {
       return item.id > 1
   })
   console.log(newArr);
   

map

---

map() 方法创建一个新数组, 其包含经过 callback 处理之后返回的所有元素。

语法

var newArray = arr.map(callback(element, index, array), thisArg)

参数

callback

• element

  数组中当前正在处理的元素。

• index 可选

  正在处理的元素在数组中的索引。

• array 可选

  调用了 filter 的数组本身。

thisArg 可选 回调函数中 this 的指向

返回值

一个新的数组

说明

map 为数组中的每个元素调用一次 callback 函数，并利用所有 callback 返回的元素创建一个新数组。

callback 被调用时传入三个参数：

1. 元素的值
2. 元素的索引
3. 被遍历的数组本身

使用

1. 对数组处理

   const arr = [1, 2, 3, 4, 5, 6, 7, 8];
   
   let newArr = arr.map(item => {
       return item * 10
   })
   console.log(newArr);    // [10, 20, 30, 40, 50, 60, 70, 80]
   

2. 对数组内的对象处理

   const arr = [{
       id: 1
   }, {
       id: 2
   }, {
       id: 3
   }];
   
   let newArr = arr.map(item => {
       item.id += 20;
       return item
   })
   console.log(newArr); // [{{id: 21}}, {{id: 22}}, {{id: 23}}]
   

reduce

---

reduce() 方法对数组中的每个元素执行一个由我提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

语法

var newArray = arr.reduce(callback(element, index, array), initialValue)

参数

callback

• accumulator

  callback 返回的值，第一次调用的时候为我们提供的 initialValue 初始值

• element

  数组中当前正在处理的元素。

• index 可选

  正在处理的元素在数组中的索引。

• array 可选

  调用了 filter 的数组本身。

initialValue 可选 ：作为第一次调用 callback 函数时的第一个参数的值 | 如果没有提供初始值，将使用数组中的第一个元素

返回值

​ 函数累计处理的结果

说明

reduce 为数组中的每个元素调用一次 callback 函数，并把 callback 的值传入下一个 callback 中**previousValue **这个参数，若调用时为最后一次，则r把 return 的值给返回出去给变量

callback 被调用时传入四个参数：

1. 我们提供的初始值
2. 元素的值
3. 元素的索引
4. 被遍历的数组本身

使用

1. 对数组处理

   // 案例1
   const arr = [1, 2, 3, 4, 5, 6, 7, 8];
   
   let newValue = arr.reduce(function(previousValue, value) {
       return previousValue + value		// 该返回值成为下一个回调函数的previousValue值
   }, 0)
   
   console.log(newValue);	// 该值为arr里面所有值的总和
   
   // 案例2
   const arr = ['a', 'b', 'c', 'd', 'e', 'f']
   
   let newArr = arr.reduce(function(previousValue, value) {
       return previousValue + value
   }, '')
   
   console.log(newArr);    // abcdef
   

2. 对数组内的对象处理

   const arr = [{
       id: 1,
       price: 56
   }, {
       id: 2,
       price: 23
   }, {
       id: 3,
       price: 14
   }, {
       id: 4,
       price: 73
   }];
   
   let newValue = arr.reduce(function(previousValue, item) {
       return previousValue + item.price
   }, 0)
   
   console.log(newValue);