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() 方法)的更多相关文章

  1. 数组的方法之(Array.prototype.forEach() 方法)

    forEach() 方法对数组的每个元素执行一次提供的函数. 注意: 没有返回一个新数组 并且 没有返回值! 应用场景:为一些相同的元素,绑定事件处理器! const arr = ['a', 'b', ...

  2. 数组的方法之(Array.prototype.filter() 方法)

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素.     注意: filter() 不会对空数组进行检测.     注意: filter() 不会改变原始 ...

  3. 终于解决了IE8不支持数组的indexOf方法,array的IndexOf方法

    /* 终于解决了IE8不支持数组的indexOf方法 */ if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (el ...

  4. Array.prototype.reduce()

    reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initialValue]) c ...

  5. js Array​.prototype​.reduce()

    例子: , , , ]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 ...

  6. Array.prototype.reduce 的理解与实现

    Array.prototype.reduce 是 JavaScript 中比较实用的一个函数,但是很多人都没有使用过它,因为 reduce 能做的事情其实 forEach 或者 map 函数也能做,而 ...

  7. Array.prototype.map()方法详解

    Array.prototype.map() 1 语法 const new_array = arr.map(callback[, thisArg]) 2 简单栗子 let arr = [1, 5, 10 ...

  8. 利用Array Prototype的方法来实现对dom集合的筛选、indexOf、map等功能

    <!DOCTYPE html><html> <head> <title>TODO supply a title</title> <me ...

  9. [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 ...

随机推荐

  1. Ubuntu usb设备端口号绑定

    1.将串口设备插入USB口,通过lsusb查看端口信息.例如: ID 1a86:7523 表示usb设备的ID(这个ID由芯片制造商设置,可以唯一表示该设备) 1a86 usb_device_desc ...

  2. 使用UUID和int自增主键的区别

    知其然,知其所以然.在看到生成UUID的代码,后带给我的百度结合自己的经验再写下来的区别 一.UUID做主键: 优点: .保证数据在表和库都是独立的,有利于后续的分库 .合并表的时候主键不会重复 .有 ...

  3. 为WCF增加UDP绑定(储备篇)

    日前我开发的服装DRP需要用到即时通信方面的技术,比如当下级店铺开出零售单时上级机构能实时收到XX店铺XX时XX分卖出XX款衣服X件之类的信息,当然在上级发货时,店铺里也能收到已经发货的提醒.即时通信 ...

  4. 最新MySQL5.7.3.0版本安装(图文版本)

    转自:http://www.myexception.cn/mysql/1609536.html 可以从http://dev.mysql.com/downloads/下载MySQL服务器安装软件包,我下 ...

  5. Mac OS X 下有关adb相关问题

    一.什么是adb? ADB的全称是Android Debug Bridge,用来调试Android程序的,白话点就是debug工具! 位置:一般下载Android的SDK时候在platform-too ...

  6. 【DM642学习笔记一】关于Can't Initialize Target CPU的一种解决方法 : Error 0x80000240

    花了几天时间,终于可以顺利进入ccs软件开始学习了! 我使用的是瑞泰公司的ICETEK-DM642-IDK-M图像处理系统(ICETEK5100USB仿真器,仿真芯片为DM642).使用ccs2.21 ...

  7. 关于Server.MapPath和HostingEnvironment.MapPath

    最近做的项目需要在Controller里重写一个static的方法,在方法内用常用的Server.MapPath会报一个错误:An object reference is required for t ...

  8. Spring Boot使用Swagger2

    1.添加Swagger2依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>spri ...

  9. Java程序员面试题收集(1)

    一.Java基础部分 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪 ...

  10. C#端一个不错的订单号生成规则

    /// <summary> /// 订单助手 /// </summary> public class OrderHelper { /// <summary> /// ...