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

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 来学习即可.



回到顶部