es6中reduce的基本使用方法

前言

为啥要把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]

总结

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

赞 (0)

相关推荐

  • 手把手教你搭建ES6的开发运行环境

    手把手教你搭建ES6的开发运行环境

    前言 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言. 其实当ES5还没有完全普及时,ES6就接踵而来了,在发布之后的将近一年内,很多小伙伴都踊跃的学习这门新的语言,之所以说是一门新的语言,是因为跟ES5相比,语法方面变化确实有点大,可以说新的JavaScript语法看上去有种脱胎换骨的感觉.博主也曾跃跃欲试,看了很多语法方面

  • 跟我学习javascript的最新标准ES6

    虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信.潮流不是我等大众所能追赶的. 潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS的风采. 箭头操作符 如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙.它简化了函数的书写.操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs. 我们知道在JS中回调是经常的事,

  • es6中reduce的基本使用方法

    前言 为啥要把es6 中 reduce 单独拿出来说呢,因为这个功能实在太骚,值得如此. reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值.reduce() 方法接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce() 的数组. reduce() 的几个强大用法: 数组求和 var total = [ 0, 1, 2, 3 ].reduce(( acc, cur ) => { return acc + cu

  • ES6中Math对象新增的方法实例详解

    本文实例讲述了ES6中Math对象新增的方法.分享给大家供大家参考,具体如下: Math.trunc() Math.trunc方法用于去除一个数的小数部分,返回整数部分. 对于没有部署这个方法的环境,可以用下面的代码模拟. Math.trunc = Math.trunc || function(x) { return x < 0 ? Math.ceil(x) : Math.floor(x); }; Math.sign() Math.sign方法用来判断一个数到底是正数.负数.还是零. 对于没有部

  • ES6中新增的Object.assign()方法详解

    前言 将A对象的属性复制给B对象,这是JavaScript编程中很常见的操作.下面这篇文章将介绍ES6的Object.assign()属性,可以用于对象复制. 在JavaScript生态系统中,对象复制有另外一个术语: extend.下面是两个JS库提供的extend接口: Prototype: Object.extend(destination, source) Underscore.js: _.extend(destination, *sources) Object.assign()介绍 E

  • python中reduce()函数的使用方法示例

    python中reduce()函数的使用方法示例

    前言 本文主要给大家介绍了关于python中reduce()函数使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: reduce()函数在库functools里,如果要使用它,要从这个库里导入.reduce函数与map函数有不一样地方,map操作是并行操作,reduce函数是把多个参数合并的操作,也就是从多个条件简化的结果,在计算机的算法里,大多数情况下,就是为了简单化.比如识别图像是否是一只猫,那么就是从众多的像素里提炼出来一个判断:是或否.可能是几百万个像素,就只

  • ES6中Promise的使用方法实例总结

    本文实例讲述了ES6中Promise的使用方法.分享给大家供大家参考,具体如下: 在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回调函数里,这样一层嵌一层,最终形成回调地狱. $.get('/login.php', function (login) { $.get('/user.php', function (user) { $.get('/in

  • 关于ES6中数组新增的方法详解

    目录 在ES6之前,创建数组的方式有2种: Array.find((item,indexArr,arr)=>{}) 掌握 Array.findIndex((item, index, Arr) => {}) 掌握 Array.flat()用于拉平嵌套的数组[推荐-超级好用] Array.at()返回对应下标的值[超级好用] Array.from() [掌握] Array.of() 了解 Array.includes的使用 扩展运算符 (...) 数组的空位 总结 在ES6之前,创建数组的方式有2

  • ES6中的数组扩展方法

    form 转化为真正的数组 先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作: var inputObjs=document.getElementsByTagName('input'); for(var i=0;i<inputObjs.length;i++){ if(inputObjs[i].type==='button'){ inputObjs[i].onclick=func

  • ES6中Proxy与Reflect实现重载(overload)的方法

    本文实例讲述了ES6中Proxy与Reflect实现重载(overload)的方法.分享给大家供大家参考,具体如下: Proxy与Reflect实现重载(overload) 从语法角度讲JavaScript不支持重载.原因很简单,JS中函数可以传入任意类型.任意个数的参数,通通可以通过在函数内使用this.arguments获得.这样,就无法实现同名函数参数列表不同实现不同功能.当然,在实际使用过程中,可以人为去检测传入实参的个数及类型,来进行不同操作.但是,我认为这不能叫做重载. ES6带来了

  • ES6中数组array新增方法实例总结

    本文实例讲述了ES6中数组array新增方法.分享给大家供大家参考,具体如下: ●find : let arr=[1,2,234,'sdf',-2]; arr.find(function(x){ return x<=2; })//结果:1,返回第一个符合条件的x值 arr.find(function(x,i,arr){ if(x<2){console.log(x,i,arr)} })//结果:1 0 [1, 2, 234, "sdf", -2],-2 4 [1, 2, 23

  • ES6中字符串string常用的新增方法小结

    本文实例讲述了ES6中字符串string常用的新增方法.分享给大家供大家参考,具体如下: ES6为js新增了很多方法,包括遍历.查询.替换等等,可以很简洁的替换ES5中的类似方法,本文不考虑codePointAt等不常用方法. for-of: let str="wbiokr"; for(let s of str){ console.log(s) } //结果:w, b, i, o, k, r 由于es5并没有为js制定字符串相关遍历方法,for-of无疑会是接下来前端开发中的一个很重要

随机推荐