JS 数组 reduce()方法详解和技巧

香菊网 发表于: 2019-05-16 分类: js部分  H5部分  前端front  

对我们来说 js 中常用到的遍历有map、foreach、for of,但是为什么要用 reduce() 这个方法,可能是你在callback里面得到的东西比较多把 ,内容为: 数组元素遍历、数组对象遍历、去重 ,用起来逼格较高。

 

一、语法  ECMAScript 5

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

二、参数介绍

callback
执行数组中每个值的函数,包含四个参数:

    accumulator
    累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。

    currentValue
    数组中正在处理的元素。
    currentIndex可选
    数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则为1。
    array可选
    调用reduce()的数组

initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

三、使用 reduce 求和

var total = [ 0, 1, 2, 3 ].reduce(
  ( accumulator, currentValue) => accumulator+ currentValue,
  0
);

console.log(total ) // logs 6

四、累加数组对象里的值

var sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,0
);

console.log(sum) // logs 6

五、数组去重

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]

六、数组对象去重

var obj = {};
arr = arr.reduce(function(item, next) {
  obj[next.key] ? '' : obj[next.key] = true && item.push(next);
  return item;
}, []);
console.log(arr);

七、reduce 的兼容  

reduce操作数组

标签: js部分H5部分前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮