数组的方法之(Array.prototype.reduce() 方法)
reduce函数
reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。
对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。
<script>
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => {
console.log(accumulator +'|' + currentValue);
return accumulator + currentValue
};
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));//
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)); //
</script>
输出如下:

语法:

callback 执行数组中每个值的函数,包含四个参数:
accumulator:累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(如下所示)。currentValue:数组中正在处理的元素。
currentIndex:可选,数组中正在处理的当前元素的索引。 如果提供了initialValue,则索引号为0,否则为索引为1。array:可选,调用reduce的数组。
initialValue:可选,用作第一个调用 callback的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
用法如下:
1.常见用法:
var t = [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
console.log(accumulator + '|' + currentValue+ '-->' + currentIndex + '-->' + array);
return accumulator + currentValue;
});
console.log('t:', t);
输出如下:

2. 如果你提供一个初始值作为reduce方法的第二个参数,以下是运行过程及结果:
var t = [0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
console.log(accumulator + '|' + currentValue+ '-->' + currentIndex + '-->' + array);
return accumulator + currentValue;
}, 10 );
console.log('t:', t);
输出如下:

3.将二维数组转化为一维
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
function(a, b) {
return a.concat(b);
},[]);
console.log(flattened);
输出如下:

4.计算数组中每个元素出现的次数
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) {
console.log(allNames, '| ' + name);
if (name in allNames) {
allNames[name]++;
} else {
allNames[name] = 1;
}
return allNames;
}, {});
console.log(countedNames);
输出如下:

5.数组去重
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
if(init.length===0 || init[init.length-1]!==current){
init.push(current);
}
/*
注意:使用push的话,必须return 这个变量init,如果return init.push()的话会报错;
使用concat不存在这个问题,可以直接return a.concat(b);
*/
return init; }, []); console.log(result); //[1,2,3,4,5]
输出如下:

数组的方法之(Array.prototype.reduce() 方法)的更多相关文章
- 数组的方法之(Array.prototype.forEach() 方法)
forEach() 方法对数组的每个元素执行一次提供的函数. 注意: 没有返回一个新数组 并且 没有返回值! 应用场景:为一些相同的元素,绑定事件处理器! const arr = ['a', 'b', ...
- 数组的方法之(Array.prototype.filter() 方法)
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素. 注意: filter() 不会对空数组进行检测. 注意: filter() 不会改变原始 ...
- 终于解决了IE8不支持数组的indexOf方法,array的IndexOf方法
/* 终于解决了IE8不支持数组的indexOf方法 */ if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (el ...
- Array.prototype.reduce()
reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initialValue]) c ...
- js Array.prototype.reduce()
例子: , , , ]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 ...
- Array.prototype.reduce 的理解与实现
Array.prototype.reduce 是 JavaScript 中比较实用的一个函数,但是很多人都没有使用过它,因为 reduce 能做的事情其实 forEach 或者 map 函数也能做,而 ...
- Array.prototype.map()方法详解
Array.prototype.map() 1 语法 const new_array = arr.map(callback[, thisArg]) 2 简单栗子 let arr = [1, 5, 10 ...
- 利用Array Prototype的方法来实现对dom集合的筛选、indexOf、map等功能
<!DOCTYPE html><html> <head> <title>TODO supply a title</title> <me ...
- [JavaScript] Array.prototype.reduce in JavaScript by example
Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively ...
随机推荐
- bat删除多少天前的文件包含子目录
通过 Forfiles 删除指定目录下过期的备份文件 /*-- 用法详解 D:/>forfiles /? FORFILES [/P pathname] [/M searchmask] [/S] ...
- CodeForces-510D
https://vjudge.net/problem/CodeForces-510D题目可以转化为花最小代价选一些数,然后这些数可以经过加减运算得到1或-1,不然1你就凑不出来,一旦凑出来1,其他的都 ...
- leetcode-第5周双周赛-1136平行课程
方法一: class Solution(object): def minimumSemesters(self, N, relations): """ :type N: i ...
- 【JZOJ3237】间谍派遣
description 你是M,一个雇佣N个标号为从1到N的间谍的情报机关的总管.每个间谍被派往不同的国家并在那获取重要情报. 如下是你的任务: 1.在部分间谍间组织会面.每次会面在两个间谍间进行,两 ...
- 前端-form表单与CSS
目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...
- MFC 使程序不在任务栏显示
在OnInitDialog()中直接修改窗口风格: // 让本程序不在任务栏显示(创建一个工具条窗口) ModifyStyleEx(WS_EX_APPWINDOW,WS_EX_TOOLWINDOW);
- 第十二章 Odoo 12开发之报表和服务端 QWeb
报表是业务应用非常有价值的功能,内置的 QWeb 引擎是报表的默认引擎.使用 QWeb 模板设计的报表可生成 HTML 文件并被转化成 PDF.也就是说我们可以很便捷地利用已学习的 QWeb 知识,应 ...
- 第九章 Odoo 12开发之外部 API - 集成第三方系统
Odoo 服务器端带有外部 API,可供网页客户端和其它客户端应用使用.本文中我们将学习如何在我们的客户端程序中使用 Odoo 的外部 API.为避免引入大家所不熟悉的编程语言,此处我们将使用基于 P ...
- SpringData_03_Specifications动态查询
有时我们在查询某个实体的时候,给定的条件是不固定的,这时就需要动态构建相应的查询语句,在Spring Data JPA中可以通过JpaSpecificationExecutor接口查询.相比JPQL, ...
- JEECG-Boot 项目介绍——基于代码生成器的快速开发平台(Springboot前后端分离)
Jeecg-Boot 是一款基于代码生成器的智能开发平台!采用前后端分离架构:SpringBoot,Mybatis,Shiro,JWT,Vue&Ant Design.强大的代码生成器让前端和后 ...