Array.reduce()学习
昨天遇到的一道题:1234567890 => 1,234,567,890 要求其实就是使用逗号做千分位将数字进行分隔。
当时没想到任何方法,但是以前看到过,印象很深刻,今天就找了一下。
看到其实现方法是使用Array.reduce()方法:
var str = 1234567890 + '';
str.split('').reverse().reduce((prev,next,index) => {
return ((index % 3) ? next : (next + ',')) + prev;
})
由于对reduce方法不够熟悉,恶补了一下,下面总结一下:
语法:Array.reduce(calback[, initValue])
reduce方法接受两个参数,第一个参数为对数组每个元素处理的回调方法,第二个参数可选,为reduce的初始值,如果没有设置初始值,则使用数组第一个元素。注意:在对没有设置初始值的空数组调用reduce方法时会报错。
回调参数callback的参数:accumulator,currentValue,currentIndex,array。
解释一下这几个参数的意思:
accumulator:数组累计操作的返回值,是上一次成功操作的返回值或初始值。
currentValue:当前操作的值。
currentIndex:当前操作的索引,有初始值为0,否则为1。
array:操作的原数组。
*回调函数第一次执行时,accumulator和currentValue的取值有两种情况:有初始值时,accumulator的取值为初始值,currentValue取值为数组第一个元素。无初始值时,accumulator的取值为数组第一个元素,currentValue取值为数组第二个元素。
下面是reduce方法的运行片段:
//无初始值
[1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
return accumulator + currentValue;
})
callback | accumulator | currentValue | currentIndex | array | return value |
first call | 1(数组第一个元素) | 2(数组第二个元素) | 1(无初始值为1) | [1, 2, 3, 4] | 3 |
second call | 3 | 3 | 2 | [1, 2, 3, 4] | 6 |
third call | 6 | 4 | 3 | [1, 2, 3, 4] | 10 |
//有初始值
[1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
return accumulator + currentValue;
}, 10)
callback | accumulator | currentValue | currentIndex | array | return value |
first call | 10(初始值) | 1(数组第一个元素) | 0(有初始值为0) | [1, 2, 3, 4] | 11 |
second call | 11 | 2 | 1 | [1, 2, 3, 4] | 13 |
third call | 13 | 3 | 2 | [1, 2, 3, 4] | 16 |
fourth call | 16 | 4 | 3 | [1, 2, 3, 4] | 20 |
一些例子:
//1.数组元素求和
[1, 2, 3, 4].reduce((a, b) => a+b); // //2.二维数组转化为一维数组
[[1, 2], [3, 4], [5, 6]].reduce((a, b) => a.concat(b), []) //[1, 2, 3, 4, 5, 6] //3.计算数组中元素出现的次数
[1, 2, 3, 1, 2, 3, 4].reduce((items, item) => {
if(item in items){
items[item]++;
}else{
items[item] = 1;
}
return items;
},{}) //{1: 2, 2: 2, 3: 2, 4: 1} //数组去重①
[1, 2, 3, 1, 2, 3, 4, 4, 5].reduce((init, current) => {
if(init.length === 0 || init.indexOf(current) === -1){
init.push(current);
}
return init;
},[]) //[1, 2, 3, 4, 5]
//数组去重②
[1, 2, 3, 1, 2, 3, 4, 4, 5].sort().reduce((init, current) => {
if(init.length === 0 || init[init.length-1] !== current){
init.push(current);
}
return init;
},[]) //[1, 2, 3, 4, 5]
Array.reduce()学习的更多相关文章
- javascript Array 方法学习
原生对象Array学习 Array.from() 从类似数组的对象或可迭代的对象返回一个数组 参数列表 arraylike 类似数组的对象或者可以迭代的对象 mapfn(可选) 对对象遍历映 ...
- Array.reduce()方法的使用
起因是学习异步函数的串行与并行写法时,发现reduce方法可以简化写法,然后看到一篇博客里面这样一段代码: var array = [1, [2, [3, 4], 5], 6]; function f ...
- 自从学会了 Array.reduce() ,再也离不开它
(转载)原文链接:https://juejin.im/post/5dfd9d27e51d455825129ec3 在所有后 ES6 时代的数组方法中,我觉得最难理解的就是Array.reduce( ...
- Js中Array数组学习总结
第一次写博客...有点方... 小白一枚(是真的小白),自学前端,下面来说说我在学习过程中总结的一些数组操作,如果说哪有错误,请各位大神多多指出,小的虚心接受. 引用类型分为Object类型(所谓的对 ...
- 用es6的Array.reduce()方法计算一个字符串中每个字符出现的次数
有一道经典的字符串处理的问题,统计一个字符串中每个字符出现的次数. 用es6的Array.reduce()函数配合“...”扩展符号可以更方便的处理该问题. s='abananbaacnncn' [. ...
- JS Array.reduce 对象属性累加
Array reduce() 方法 ,无非就是 计算数组元素 相加后的总和 ,看网上给的Demo 全是 [1,2,3,4,6].reduce 这种基本用法, 本次我将使用 reduce 实现 数组 ...
- Array.reduce()方法
Array.reduce()方法是对数组的遍历,返回一个单个返回值 使用方法: Array.reduce((acc, cur, idx, src) => { }, initialValue) ...
- JavaScrip中 Array.reduce()
数组的方法 reduce() reduce方法在数组的每一项元素上都会执行回调函数. 语法:array.reduce( callBack [ , init] ) // 语法arrary.reduce ...
- javascript Array Methods(学习笔记)
ECMAScript 5 定义了9个新的数组方法,分别为: 1.forEach(); 2.map(); 3.filter(); 4.every(); 5.some(); 6.reduce() ...
随机推荐
- sed的N;P用法
sed的N;P用法 原文地址 这里介绍的是sed的一个多行模式的使用,一开始对sed中命令N的用法不是很理解,经过多次尝试,通过几个例子对N的用法进行总结: N即Next,它同n(next)的区别是: ...
- ImageMagick命令行工具
[ convert | identify | mogrify | composite | montage | compare | display | animate | import |conjure ...
- Vsftp的PASV mode和Port模式配置文件的设置
FTP模式与数据端口 FTP 分为两类,PORT FTP和PASV FTP,PORT FTP是一般形式的FTP.这两种FTP在建立控制连接时操作是一样的,都是由客户端首先和FTP服务器的控制端口(默认 ...
- ZOJ [P2314] 无源汇点有上下界模版
对于有上下界的网络流来说,我们可以分离出必要弧,然后将必要弧切开,两端分别连接源点和汇点,原图有可行解充要于源点或汇点满流. 这样求下来,只能求出可行流 #include <iostream&g ...
- bzoj 4870: [Shoi2017]组合数问题 [矩阵乘法优化dp]
4870: [Shoi2017]组合数问题 题意:求 \[ \sum_{i=0}^{n-1} \binom{nk}{ik+r} \mod p \] \(n \le 10^9, 0\le r < ...
- MySQL数据类型概念
关系型数据库的特点 1,数据以表格的形式出现 2,每行为各种记录的名称 3,每列为数据名称所对应的数据域 4许多的行和列组成一张table 5若干的表单组成databases 术语 数据库:关联表的集 ...
- WPF项目学习.一
WPF项目搭建 版权声明:本文为博主初学经验,未经博主允许不得转载. 一.前言 记录在学习与制作WPF过程中遇到的解决方案. 使用MVVM的优点是 数据和视图分离,双向绑定,低耦合,可重用行,相对独立 ...
- 听说你开发.NET还在用VS,小哥哥给你推荐全平台的Rider
本文地址:http://www.cnblogs.com/likeli/p/8461010.html 前言 .NET平台的开发一直都只能使用Visual Studio来开发,自从dotnet core ...
- 在windows端和linux端安装Git
一.Git的安装 1. 在windows端 到地址:https://git-scm.com/downloads 选择对应版本下载后,进行傻瓜式安装即可 2. 在linux端 查看是否安装了git,出 ...
- JavaScript 知识点
JS基础 页面由三部分组成: html:超文本标记语言,负责页面结构 css:层叠样式表,负责页面样式 js:轻量级的脚本语言,负责页面的动效和数据交互 小总结:结构,样式和行为,三者相分离 在htm ...