JavaScript学习笔记：数组reduce()和reduceRight()方法

作者：大漠 日期：2016-03-10 点击：24989
JavaScript
JavaScript学习笔记
Array
数组
会员专栏

特别声明：小站已开通年费VIP通道，年费价格为 ¥365.00元。如果您喜欢小站的内容，可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!(^_^)

很多时候需要累加数组项的得到一个值(比如说求和)。如果你碰到一个类似的问题，你想到的方法是什么呢？会不会和我一样，想到的就是使用for或while循环，对数组进行迭代，依次将他们的值加起来。比如：

var arr = [1,2,3,4,5,6];
Array.prototype.sum = function (){
    var sumResult = 0;
    for (var i = 0; i < this.length; i++) {
        sumResult += parseInt(this[i]);
    }
    return sumResult;
}

arr.sum(); // 21

或者

var arr =  [1,2,3,4,5,6];

Array.prototype.sum = function () {
    var sumResult = 0;
    var i = this.length;
    while (i--) {
        sumResult += parseInt(this[i]);
    }
    return sumResult;
}

arr.sum(); // 21

那他们是不是最好的方案呢？先来看看他们所耗时间。

// 测试for和while循环实现数组求和的性能

var arr = [1,2,3,4,5,6];

// for循环
console.time("forLoop");

Array.prototype.forLoop = function (){
    for (var i = 0; i < 10000; i++) {
        var sumResult = 0;
        for (var j = 0; j < this.length; j++) {
            sumResult += parseInt(this[j]);
        }
    }
    return sumResult;
}
arr.forLoop();
console.log('最终的值：' + arr.forLoop()); // 21
console.timeEnd("forLoop"); // 54.965ms

再来看看while循环所用时间：

var arry = [1,2,3,4,5,6];

console.time("whileLoop");

Array.prototype.whileLoop = function () {

    for (var i = 0; i < 10000; i++) {
        var sumResult = 0;
        for (var j = 0; j < this.length; j++) {
            sumResult += parseInt(this[j]);
        }
    }
    return sumResult;
}

arry.whileLoop();
console.log('最终的值：' + arry.whileLoop()); // 21
console.timeEnd("whileLoop"); // 53.056ms

看看对比结果

循环类型 最终值(和) 所费时间
for 21 54.965ms
while 21 53.056ms

备注：数组[1,2,3,4,5,6]做了10000次循环的累加。

虽然上面使用for和while都能实现需要的效果，但在JavaScript中有没有更好的方案呢？回答是肯定的，在JavaScript中(ESMAScript 5)提供了另外两个数组的方法reduce()和reduceRight()，这两个数组会迭代数组的所有数组项，然后返回一个最终值。接下来的内

剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/javascript/array-part-8.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部