昨天遇到的一道题: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()学习的更多相关文章

  1. javascript Array 方法学习

    原生对象Array学习 Array.from()   从类似数组的对象或可迭代的对象返回一个数组 参数列表 arraylike  类似数组的对象或者可以迭代的对象 mapfn(可选)   对对象遍历映 ...

  2. Array.reduce()方法的使用

    起因是学习异步函数的串行与并行写法时,发现reduce方法可以简化写法,然后看到一篇博客里面这样一段代码: var array = [1, [2, [3, 4], 5], 6]; function f ...

  3. 自从学会了 Array.reduce() ,再也离不开它

    (转载)原文链接:https://juejin.im/post/5dfd9d27e51d455825129ec3   在所有后 ES6 时代的数组方法中,我觉得最难理解的就是Array.reduce( ...

  4. Js中Array数组学习总结

    第一次写博客...有点方... 小白一枚(是真的小白),自学前端,下面来说说我在学习过程中总结的一些数组操作,如果说哪有错误,请各位大神多多指出,小的虚心接受. 引用类型分为Object类型(所谓的对 ...

  5. 用es6的Array.reduce()方法计算一个字符串中每个字符出现的次数

    有一道经典的字符串处理的问题,统计一个字符串中每个字符出现的次数. 用es6的Array.reduce()函数配合“...”扩展符号可以更方便的处理该问题. s='abananbaacnncn' [. ...

  6. JS Array.reduce 对象属性累加

    Array reduce() 方法  ,无非就是 计算数组元素 相加后的总和 ,看网上给的Demo 全是  [1,2,3,4,6].reduce 这种基本用法, 本次我将使用 reduce 实现 数组 ...

  7. Array.reduce()方法

    Array.reduce()方法是对数组的遍历,返回一个单个返回值   使用方法: Array.reduce((acc, cur, idx, src) => { }, initialValue) ...

  8. JavaScrip中 Array.reduce()

    数组的方法 reduce() reduce方法在数组的每一项元素上都会执行回调函数. 语法:array.reduce( callBack [ , init]  ) // 语法arrary.reduce ...

  9. javascript Array Methods(学习笔记)

    ECMAScript 5 定义了9个新的数组方法,分别为: 1.forEach();  2.map();  3.filter();  4.every();  5.some();  6.reduce() ...

随机推荐

  1. SSH反向连接及Autossh

    参考文章 http://www.freeoa.net/osuport/netmanage/autossh-useage-refer_2831.html 接触Linux恐怕对SSH再熟悉不过了,还有sc ...

  2. 【转】CString,string,char*综合比较

    (一)  概述 1.string和CString均是字符串模a板类: 2.string为标准模板类(STL)定义的字符串类,已经纳入C++标准之中: 3.CString(typedef CString ...

  3. 【转】对GAMIT/GLOBK的基本认识

    1.1   GAMIT/GLOBK软件可从网络上申请下载.该软件功能强大,用途广泛,一般包括精确定位,大气层可降水汽估计和空间电离层变化分析等.后两种用途只需要用到GAMIT模块,精确定位则还需要GL ...

  4. 【Thinkphp 5】auth权限设置以及实现

    1.将auth类下载好 放置目录: extend\auth\auth.php 2.将类中的SQL语句执行,可以在数据库中创建3张表 auth_group(用户组表)           auth_ru ...

  5. Mysql高可用架构(主从同步)

    做高可用的优势 1.成本低 2.解决单点故障 3.不容易遇到性能瓶颈 一 .Mysql主从同步架构搭建案例 优点如下:·在业务繁忙阶段,在从服务器上可以执行查询工作(即我们常说的读写分离),降低主服务 ...

  6. OS模块的常用内置方法

    chdir 修改当前工作目录到指定目录 Change the current working directory to the specified path. chmod 修改一个文件的访问权限 Ch ...

  7. C#查询XML解决“需要命名空间管理器”问题

    在查询xml时有时会遇到带有前缀的xml,例如:"<ows:Keyword></ows:Keyword>" 这时像往常一样查询就会报错,类似于"需 ...

  8. 文件读写io操作范例

    系统io读写,copy int main(int argc, char **argv) {  if(argc != 3) {   printf("Usage: %s <src> ...

  9. java单例模式学习笔记

    最近一直在学习多线程,在学习过程中遇到了关于单例模式的多线程安全问题,内容如下: 一:首先什么是单例模式 单例模式具有的三要点: 一个类只能有一个实例: 必须是由它自己创建的这个实例: 它必须自行向外 ...

  10. Linux ipip隧道及实现

    一.IP隧道技术 IP隧道技术:是路由器把一种网络层协议封装到另一个协议中以跨过网络传送到另一个路由器的处理过程.IP 隧道(IP tunneling)是将一个IP报文封装在另一个IP报文的技术,这可 ...