es6中reduce的基本使用方法

 更新时间:2019年09月10日 11:05:34   作者:一只大橘  
这篇文章主要给大家介绍了关于es6中reduce的基本使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用es6具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

前言

为啥要把es6 中 reduce 单独拿出来说呢,因为这个功能实在太骚,值得如此。

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 方法接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce() 的数组。

reduce() 的几个强大用法:

数组求和

var total = [ 0, 1, 2, 3 ].reduce(( acc, cur ) => {
 return acc + cur
}, 0);
console.log(total) // 6

二维数组转为一维数组

var array = [[1, 2], [3, 4], [5, 6]].reduce(( acc, cur ) => {
  return acc.concat(cur)
}, []);
console.log(array) // [ 0, 1, 3, 4, 5, 6 ]

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

方法一

let names = ['tom', 'jim', 'jack', 'tom', 'jack'];
const countNames = names.reduce((allNames, name) => {
 if (name in allNames) {
  allNames[name] ++;
 }
 else {
  allNames[name] = 1;
 }
 return allNames;
}, {});

console.log(countNames) // { tom: 2, jim: 1, jack: 2 }

方法二

const arraySum = (arr, val) => arr.reduce((acc, cur) => {
  return cur == val ? acc + 1 : acc + 0
}, 0);

let arr = [ 0, 1, 3, 0, 2, 0, 2, 3 ]
console.log(arraySum(arr, 0)) // 数组arr中 0 元素出现的次数为3

数组去重

1.方法一

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);
  }
  return init;
}, []);
console.log(result); //[1,2,3,4,5]

2.方法二

当然,对于数组去重,也可以直接使用es6的…[拓展运算符] + Set 实现:

// console.log(...new Set([1,2,3,4,5,2,4,1]))
const dedupe = (array) => {
  return Array.from(new Set(array));
}
console.log(dedupe([1, 1, 2, 3])) //[1,2,3]

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

相关文章

  • JavaScript之解构赋值的理解

    JavaScript之解构赋值的理解

    今天小编就为大家分享一篇关于JavaScript之解构赋值的理解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 事件绑定之小测试  onclick && addEventListener

    事件绑定之小测试 onclick && addEventListener

    昨晚回去后,和雷子讨论如何才能“检测”到页面上某个元素都绑定了哪些事件监听函数,第一感觉就是应该从浏览器入手,比如FF,或者Chrome等
    2011-07-07
  • 纯js实现仿QQ邮箱弹出确认框

    纯js实现仿QQ邮箱弹出确认框

    仿QQ邮箱的弹出层,弹出确认框,主要是用火狐的firebug把html和css扣了下来,没有做封装,就定义了一个拖动事件. 大家可以封装自己的弹出窗,嘿嘿!
    2015-04-04
  • JavaScript中利用for循环遍历数组

    JavaScript中利用for循环遍历数组

    这篇文章主要为大家详细介绍了JavaScript中利用for循环遍历数组,最好不要使用for in遍历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现

    javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现

    上一讲我们谈到了如何让静态人物变为动态,今天我们来谈谈如何使人物移动,感兴趣的朋友可以了解下哦,顺便巩固一下animate方法的应用,希望本文对你有所帮助
    2013-01-01
  • 教你如何使用 JavaScript 读取文件

    教你如何使用 JavaScript 读取文件

    这篇文章主要介绍了如何使用 JavaScript 读取文件,您可以使用 JavaScript File API 加载选定文件的内容,本节介绍 File API 的基本用法,需要的朋友可以参考下
    2022-06-06
  • prototype与__proto__区别详细介绍

    prototype与__proto__区别详细介绍

    这篇文章主要介绍了prototype与__proto__区别详细介绍的相关资料,需要的朋友可以参考下
    2017-01-01
  • JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    这篇文章主要介绍了JS常见DOM节点操作,结合实例形式分析了JavaScript针对DOM节点的创建 ,插入,删除,复制,查找等操作相关函数与使用技巧,需要的朋友可以参考下
    2018-05-05
  • js操作cookie保存浏览记录的方法

    js操作cookie保存浏览记录的方法

    这篇文章主要介绍了js操作cookie保存浏览记录的方法,涉及JavaScript使用cookie记录并保存用户浏览网页信息的实现技巧,需要的朋友可以参考下
    2015-12-12
  • VUE基于NUXT的SSR 服务端渲染

    VUE基于NUXT的SSR 服务端渲染

    这篇文章主要介绍了VUE基于NUXT的SSR 服务端渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论