js map用法_JS高阶函数——reduce()用法总结

首发于个人博客

定义

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

array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue);
/*
  accumulator:  必需。累计器
  currentValue: 必需。当前元素
  
  currentIndex: 可选。当前元素的索引；                    
  arr:          可选。要处理的数组
  initialValue: 可选。传递给函数的初始值，相当于accumulator的初始值
*/

<!-- more -->

解释

简单来说就是对一个array执行reduce()方法，就是把其中的function()挨个地作用于array中的元素上，而且上一次的输出会作为下一次的一个输入。例如下面这个对array求和的例子。

let array = [1, 2, 3, 4, 5];
array.reduce((sum, curr) => sum + curr, 0); // 得到15

执行流程图如下：

令f（a, b）= a + b， 也可以一次性写为：

array.reduce = f( f( f( f( f(0, 1) ,2) ,3), 4) ,5)

奉上一个GIF

常见用法

求加法（乘法同理）

let arr = [1, 2, 3, 4, 5];
arr.reduce((sum, curr) => sum + curr, 0);       // 得到15

此基础上还可以求平均值

求最大值（最小值同理）

let arr = [23,123,342,12];
let max = arr.reduce((pre,cur,index,arr) => {
  return pre > cur ? pre : cur
});                                               // 得到 342

将字符串转换为整数

let str = "4321"
​
let strParseInt = str.split('')                   // 得到 ['4', '3', '2', '1', '4']
    .map(item => {return item.charCodeAt() - 48}) // 得到 [4, 3, 2, 1, 4]
    .reduce((a, b) => {return a * 10 + b})        // 得到 43214

字符统计/单词统计同理

let str = 'abcdaabc';
​
str.split('').reduce((res, cur) => {
    res[cur] ? res[cur] ++ : res[cur] = 1 // 如果cur第一次出现，记为1
    return res;                           // 否则记录数+1
}, {})                                    // 得到 {a: 3, b: 2, c: 2, d: 1}

数组去重

let arr = [1, 2, 3, 4, 4, 1]
let newArr = arr.reduce((pre,cur) => {
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])                                     // 得到 [1, 2, 3, 4]

数组维度转换

let arr = [[0, 1], [2, 3], [4, 5]]      // 二维数组
let newArr = arr.reduce((pre,cur) => {
    return pre.concat(cur)              // 合并pre 与 cur, 并返回一个新数组
},[])
console.log(newArr);                    // 一维数组 [0, 1, 2, 3, 4, 5]

参考链接

MDN Array​.prototype​.reduce()

JS进阶篇--JS数组reduce()方法详解及高级技巧

manqc

发现新的用法会继续更新——