js 数组 reduce() 方法

简介: 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 被调用四次,每次调用的参数和返回值如下表:

20210701175002404.png


有 initialValue 参数

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

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


以下是运行过程及结果:

20210701175242782.png


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

20210701180225569.png


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);

20210701180853626.png



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

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

20210702135028445.png


4.累加对象数组里的值

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

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

20210702135753943.png


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

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


20210702140514571.png



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]]]]);


20210702141948794.png



目录
相关文章
|
1天前
|
JavaScript 算法
JS代码压缩方法详解
JS代码压缩方法详解
12 4
|
1天前
|
缓存 JavaScript 前端开发
JS代码拆分方法 是对的还是错的?
JS代码拆分方法 是对的还是错的?
|
1天前
|
JSON JavaScript 前端开发
Javascript 模块化编程的方法和代码
Javascript 模块化编程的方法和代码
11 1
|
1天前
|
Web App开发 数据采集 JavaScript
python执行js代码几个方法
python执行js代码几个方法
|
1天前
|
缓存 JavaScript 前端开发
正确拆分JS代码的方法
正确拆分JS代码的方法
|
3天前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
11 2
|
3天前
|
JavaScript 前端开发
JS如何判断一个对象是否为数组?
JS如何判断一个对象是否为数组?
7 0
|
3天前
|
JavaScript 前端开发
JS遍历数组和对象的常用方法有哪些?
JS遍历数组和对象的常用方法有哪些?
7 0
|
3天前
|
JavaScript 前端开发
JS中访问节点和创建节点的方法都有什么?
JS中访问节点和创建节点的方法都有什么?
7 0
|
3天前
|
JavaScript 前端开发 索引
JS遍历数组的方法有哪些?
JS遍历数组的方法有哪些?
8 0