ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(四)

前面分3篇博文介绍了 Ecmascript 5.1 数组扩展方法

ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(一)

ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(二)

ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(三)

今天和大家分享数组中关于归并的2个扩展方法 reduce , reduceRight

我们逐一简绍

1. reduce
   此扩展函数相比其他方法略繁琐一点.
   

    reduce(callbak(previous, current, index, array, [initialValue])

[initialValue] 值被方括号包括,表示是一个可选参数,

前四个参数分别是 previous  前值, current 当前值, index 索引, array 数组实例

什么是前值?

这个值在初始时,如果 initialValue 有值,那么 previous = initialValue , 如果 initialValue 参数缺少时, previous 默认值为数组第一个元素值.

当 reduce 在迭代每个元素时,会把 callback 返回的值当做参数继续传给 callback 来执行.

这里好诡异,这就是这个函数很难理解的部分,你可以把它看做是  数组元素迭代 + callback 递归

每次callback执行后的结果赋值给 previous (初始值是 initialValue 或者 数组第一个元素,见 上面 前值的说明 )

每次迭代的数组元素赋值给 current 参数

index 是当前迭代元素所在的索引

array 就是数组实例本身

理解了参数后,我们看一个实例:

var a=[10,9,5,40];

var sum=a.reduce(function (previous, current, index, array) {
  return previous + current;
});
console.log('****',sum);

迭代相加后结果是 64

看下执行过程:

// 初始设置
previous  = 10, current = 9  

// 第一次迭代
previous = (10 + 9) =  19, current = 5

// 第二次迭代
previous = (19 + 5) =  24, current = 40

// 第三次迭代
previous = (24 + 40) =  64, current = undefined (退出)

当你所在的浏览器环境不支持 Ecmascript 5.1时,需要自己手动扩展一个 reduce 方法.

if (typeof Array.prototype.reduce != "function") {
  Array.prototype.reduce = function (callback, initialValue ) {
     var previous = initialValue, k = 0, length = this.length;
     if (typeof initialValue === "undefined") {
        previous = this[0];
        k = 1;
     }
     
    if (typeof callback === "function") {
      for (k; k < length; k++) {
         this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
      }
    }
    return previous;
  };
}

需要注意的部分:

如果 initialValue 参数不存在时, previous初始值为数组第一个元素 this[0]

k 的值,请注意 k 是从1开始的.虽然reduce 也在遍历迭代数组,但是它是跳过第一个元素的. (请看上面的执行过程 )

2. reduceRight 

这个方法和 reduce 有何不同?

用户一样,没有太大不同,唯一的区别是 reduce 是从左向右遍历迭代, reduceRigth 是从右向左遍历迭代而已.

所以,省略了一些内容,大家对比上面的 reduce 来学习即可.