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 ]

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

1. 方法一

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 }

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

原文地址:https://www.cnblogs.com/sexintercourse/p/11802488.html

时间: 2024-10-15 02:39:34

ES6 之reduce的高级技巧的相关文章

es6中reduce()方法和reduceRight()方法

es6中reduce()方法从左往右开始 参数:prev:它是上一次调用回调时返回的结果,每次调用的结果都会给prev cur:当前的元素 index:当前的索引 arr:循环的数组 返回值:函数累计处理的结果 demo:求数组的和. var a = [1,2,3,4,5,6,7,8,9,10] var str = a.reduce(function(prev,cur,index,arr){ return prev + cur ;})str // 55;求阶乘 var a = [1,2,3,4,

使用ES6的reduce函数,根据key去重

最近很着迷于ES6的函数,让代码变得更优雅.ES6里的reduce函数,平时用的不是特别多,真正用起来发现还是挺好用的. 想要实现的效果为: 原数组: let rawArr = [{id:'123'},{id:'456'},{id:'789'},{id:'123'}]; 根据id去重后的结果为 let rawArr = [{id:'123'},{id:'456'},{id:'789'}]; reduce函数介绍 在说如何去重之前,先来介绍一下reduce函数: array.reduce(call

ES6中reduce的计算过程

reduce计算过程如下 原文地址:https://www.cnblogs.com/malong1992/p/12128672.html

ES6 数组函数forEach()、map()、filter()、find()、every()、some()、reduce()

forEach() map()- -更新数组 filter().includes().find().findIndex()- -筛选(删除)数组 some().every()- -判断数组 reduce()- -叠加数组 arr.forEach() 遍历数组全部元素,利用回调函数对数组进行操作,自动遍历数组.length次数,且无法break中途跳出循环 因此不可控 不支持return操作输出,return只用于控制循环是否跳出当前循环 因此难操作成新数组,新值,故不作多分析 示例: var a

数组reduce方法以及高级技巧

基本概念: reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值. reduce为数组中的每一个元素依次执行回调函数.不包括数组中被删除或从未赋值的元素,接受两个参数.第一参数是一个回调函数,又接收四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用reduce的数组.第二个参数是作为第一次调用callback的第一个参数即初始参数. 语法: arr.reduce(callback, [initialValue]) * callbac

es6 reduce的用法

一.forEach回调函数参数,item(数组元素).index(序列).arr(数组本身)循环数组,无返回值,不改变原数组不支持return操作输出,return只用于控制循环是否跳出当前循环 二.includes判断数组是否包含某个元素,不用return,不用回调函数,返回布尔值 三.filter使用return操作输出,会循环数组每一项,并在回调函数中操作返回满足条件的元素组成的数组,不改变原数组 四.map输出的是return什么就输出什么新数组原数组被"映射"成对应新数组,返

JS数组reduce()方法详解及高级技巧

1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. callback (执行数组中每个值的函数,包含四个参数) 1.previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue)) 2.currentValue (数组中当前被处理的元素)

JS 数组reduce()方法详解及高级技巧

1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. callback (执行数组中每个值的函数,包含四个参数) 1.previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue)) 2.currentValue (数组中当前被处理的元素)

ES6高级技巧(五)

Set 由于Set结构没有键名,只有键值所有keys方法和values方法的行为完全一致 let a=new Set([1,2,3,4]) //a.keys() a.values() 或者直接用of遍历 for (let item of a) { console.log(item) } /* * 1,2,3,4 * */ forEach() let a = new Set([1, 2, 3, 4]) let b = []; a.forEach(v=>b.push(v)) console.log(