欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于 JavaScript 中的 reduce() 方法

程序员文章站 2022-07-06 12:10:34
一、什么是 reduce() ? reduce() 方法对数组中的每个元素执行一个升序执行的 reducer 函数,并将结果汇总为单个返回值 const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => acc ......

一、什么是 reduce() ?

 

reduce() 方法对数组中的每个元素执行一个升序执行的 reducer 函数,并将结果汇总为单个返回值

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentvalue) => accumulator + currentvalue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// 输出: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// 输出: 15

 

 

二、数组中 reduce 方法的参数

 

1、第一个参数:reducer 函数

其中,reducer 函数又有四个参数:

  1. accumulator (acc) (累计器)
  2. current value (cur) (当前值)
  3. current index (idx) (当前索引)
  4. source array (src) (源数组)

 

2、第二个参数(可选):initialvalue

代表传递给函数的初始值

// 不传第二个参数的情况
var numbers = [1, 2, 3, 4]

function myfunction(item) {
    let result = numbers.reduce(function (total, currentvalue, currentindex, arr) {
        console.log(total, currentvalue, currentindex, arr)
        return total + currentvalue
    })
    return result
}

myfunction(numbers)

输出:

关于 JavaScript 中的 reduce() 方法

可以看到如果不传第二个参数 initialvalue,则函数的第一次执行会将数组中的第一个元素作为 total 参数返回。一共执行3次


下面是传递第二个参数的情况:

// 不传第二个参数的情况
var numbers = [1, 2, 3, 4]

function myfunction(item) {
    let result = numbers.reduce(function (total, currentvalue, currentindex, arr) {
        console.log(total, currentvalue, currentindex, arr)
        return total + currentvalue
    }, 10)
    return result
}

myfunction(numbers)

输出:
关于 JavaScript 中的 reduce() 方法

如果传了第二个参数 initialvalue,那么第一次执行的时候 total 的值就是传递的参数值,然后再依次遍历数组中的元素。执行4次

总结:如果不传第二参数 initialvalue,那么相当于函数从数组第二个值开始,并且将第一个值最为第一次执行的返回值,如果传了第二个参数 initialvalue,那么函数从数组的第一个值开始,并且将参数 initialvalue 作为函数第一次执行的返回值

 

 

三、应用场景

 

1、数组里所有值的和

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentvalue) {
  return accumulator + currentvalue;
}, 0);
// 和为 6

 

2、累加对象数组里的值

var initialvalue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentvalue) {
    return accumulator + currentvalue.x;
},initialvalue)

console.log(sum) // logs 6

 

3、将二维数组转化为一维

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]

 

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

var names = ['alice', 'bob', 'tiff', 'bruce', 'alice'];

var countednames = names.reduce(function (allnames, name) { 
  if (name in allnames) {
    allnames[name]++;
  }
  else {
    allnames[name] = 1;
  }
  return allnames;
}, {});
// countednames is:
// { 'alice': 2, 'bob': 1, 'tiff': 1, 'bruce': 1 }

 

5、数组去重

var myarray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
var myorderedarray = myarray.reduce(function (accumulator, currentvalue) {
  if (accumulator.indexof(currentvalue) === -1) {
    accumulator.push(currentvalue);
  }
  return accumulator
}, [])

console.log(myorderedarray);
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]