在JavaScript的ES5版本中Array数组的reduce方法详解

函数声明:reduce(callback[, initialValue])

参数说明:

callback - 回调函数,格式为function (prev,next)

initialValue - 初始值,可选参数

返回值:最后一次执行callback 回调函数的返回值


运行机制:

var arr = ['a', 'b', 'c', 'a', 'd'];
var i = 0;
arr.reduce(function (prev, next) {
    i++;
    console.log('第' + i + '次循环:', prev, next);
    return prev + next;
});
//VM418:3 第1次循环: a b
//VM418:3 第2次循环: ab c
//VM418:3 第3次循环: abc a
//VM418:3 第4次循环: abca d
//"abcad"

采用reduce(callback)调用方式时:

第一次循环,prev=数组的第一个元素,next=数组的第二个元素

第二次循环,prev=第一次循环的返回值,next=数组的第三个元素;

之后的每一次循环,prev=一次循环的返回值,next=数组的下一个元素,直到数组末尾。

var arr = ['a', 'b', 'c', 'a', 'd'];
var i = 0;
arr.reduce(function (prev, next) {
    i++;
    console.log('第' + i + '次循环:', prev, next);
    return prev + next;
}, 'n');
//VM421:3 第1次循环: n a
//VM421:3 第2次循环: na b
//VM421:3 第3次循环: nab c
//VM421:3 第4次循环: nabc a
//VM421:3 第5次循环: nabca d
//"nabcad"

采用reduce(callback, initialValue)调用方式时

第一次循环,prev=initialValue,next=数组的第一个元素

第二次循环,prev=第一次循环的返回值,next=数组的第个元素;

之后的每一次循环,prev=一次循环的返回值,next=数组的下一个元素,直到数组末尾。


是否传递initialValue参数的区别:

采用reduce(callback)方式,在第一次循环时,prev=数组的第一个元素,next=数组的第二个元素;
采用reduce(callback, initialValue)方式,在第一次循环时,prev=initialValue,next=数组的第一个元素。


统计元素个数实例:

var arr = ['a', 'b', 'c', 'a', 'd'];
var i = 0;
arr.reduce(function (prev, next) {
    i++;
    console.log('第' + i + '次循环:', prev, next);
    prev[next] = (prev[next] + 1) || 1;
    return prev;
}, {});
//VM424:3 第1次循环: Object {} a
//VM424:3 第2次循环: Object {a: 1} b
//VM424:3 第3次循环: Object {a: 1, b: 1} c
//VM424:3 第4次循环: Object {a: 1, b: 1, c: 1} a
//VM424:3 第5次循环: Object {a: 2, b: 1, c: 1} d
//Object {a: 2, b: 1, c: 1, d: 1}



你可能感兴趣的:(javascript,ES,Web前端)