js 数组 reduce() 方法

概念

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

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

语法

arr.reduce(callback,[initialValue])

callback：执行数组中每个值 (如果没有提供 initialValue 则第一个值除外)的函数，包含四个参数：

accumulator：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。
currentValue：数组中正在处理的元素。
index（可选）：数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引号为0，否则从索引1起始。
array（可选）：调用 reduce() 的数组

initialValue（可选）：作为第一次调用 callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

reduce() 如何运行

无 initialValue 参数

假如运行下段 reduce() 代码：

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){return accumulator + currentValue;
});
// 10

callback 被调用四次，每次调用的参数和返回值如下表：

有 initialValue 参数

如果你打算提供一个初始值作为 reduce() 方法的第二个参数

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {return accumulator + currentValue;
}, 10)
// 20

以下是运行过程及结果：

reduce 的用法

下面写几种常用的：

1.求和、求乘积

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x,y) => x+y)
let mul = arr.reduce((x,y) => x*y)
console.log(sum); // 求和，10
console.log(mul); // 求乘积，24

2.数组去重

let arr = ['k', 'a', 'i', 'm', 'o', 'i']
let newArr = arr.reduce((pre,cur) => {if(!pre.includes(cur)) {return pre.concat(cur)} else {return pre}
}, [])
console.log(newArr);

3.计算数组中每个元素出现的次数

let names = ['kaimo222', 'kaimo333', 'kaimo666', 'kaimo333', 'kaimo777'];names.reduce((allNames, name) => {if (name in allNames) {allNames[name]++;}else {allNames[name] = 1;}return allNames;
}, {});

4.累加对象数组里的值

要累加对象数组中包含的值，必须提供初始值，以便各个item正确通过你的函数。

let tempArr = [{x: 1}, {x: 2}, {x: 3}
];
let sum = tempArr.reduce((accumulator, currentValue) => accumulator + currentValue.x, 0);console.log(sum)

5.将二维数组转化为一维

[[0, 1], [2, 3], [4, 5]].reduce(( acc, cur ) => acc.concat(cur), []);

6.将多维数组转化为一维

// 编写降维函数
function reducedDimension(arr) {return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? reducedDimension(cur) : cur), []);
}
reducedDimension([[0, 1], [2, 3, [4, 5]], [6,[7, 8, 9, [10, 11]]]]);

js 数组 reduce() 方法相关推荐

JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
JS进阶篇--JS数组reduce()方法详解及高级技巧 1
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
JS数组reduce()方法
基本用法 arr.reduce(function(prev,cur,index,arr){ ... }, init);或者arr.reduce(function(prev,cur,index,arr) ...
js 数组遍历方法详解（map、filter、find、findIndex、reduce）
目录前言 map map是什么 map方法的结构及入参语法糖 map一般不改变原数组 filter 说明例子 find 和 findIndex 说明例子 reduce 说明例子尾言前言 ...
JS数组去重方法记录
js数组去重方法 1.遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组代码如下(示例): function getArray(ar) {va ...
JS数组reduce的25个高级用法
reduce作为ES5新增的常规数组方法之一,对比forEach .filter和map,在实际使用上好像有些被忽略,下面这篇文章主要给大家介绍了关于JS数组reduce你不得不知道的25个高级用法, ...
在js对象上绑定js数组原生方法
在js对象上绑定js数组原生方法在js对象上绑定数组方法会给当前对象添加一个lenght:0属性例: var o = {}; [].pop.call(o) console.log(o)//返回结果 ...
比较完善的手写数组reduce方法
手写数组reduce方法看过其他的文章, 感觉他们实现的reduce方法不够完善, 分享一下自己写的比较完善的reduce方法, 如果错误的地方, 请留言给我 Array.prototype.new ...
js数组查找方法 find() findIndex() - Kaiqisan
js数组查找方法 find() findIndex() ヤッハロー.Kaiqisanすうう.一つふつうの学生プログラマである,今天继续讲讲数组查询方法,,这俩方法更加适合于数组. 没错,就是数组专用的 ...