数组 Reduce 填充方法解析

Question

数组 Reduce 填充方法解析

9

提前为此篇文章的长度道歉。我想理解MDN提供的数组reduce polyfill（填充）的一些技术细节，但我无法理解polyfill中的某些代码行，请问能否给予解释？以下是相关代码：

    if (!Array.prototype.reduce) {
      Object.defineProperty(Array.prototype, 'reduce', {
        value: function(callback /*, initialValue*/) {
          if (this === null) {
            throw new TypeError( 'Array.prototype.reduce ' + 
              'called on null or undefined' );
          }
          if (typeof callback !== 'function') {
            throw new TypeError( callback +
              ' is not a function');
          }

          // 1. Let O be ? ToObject(this value).
          var o = Object(this);

          // 2. Let len be ? ToLength(? Get(O, "length")).
          var len = o.length >>> 0; 

          // Steps 3, 4, 5, 6, 7      
          var k = 0; 
          var value;

          if (arguments.length >= 2) {
            value = arguments[1];
          } else {
            while (k < len && !(k in o)) {
              k++; 
            }

            // 3. If len is 0 and initialValue is not present,
            //    throw a TypeError exception.
            if (k >= len) {
              throw new TypeError( 'Reduce of empty array ' +
                'with no initial value' );
            }
            value = o[k++];
          }

          // 8. Repeat, while k < len
          while (k < len) {
            // a. Let Pk be ! ToString(k).
            // b. Let kPresent be ? HasProperty(O, Pk).
            // c. If kPresent is true, then
            //    i.  Let kValue be ? Get(O, Pk).
            //    ii. Let accumulator be ? Call(
            //          callbackfn, undefined,
            //          « accumulator, kValue, k, O »).
            if (k in o) {
              value = callback(value, o[k], k, o);
            }

            // d. Increase k by 1.      
            k++;
          }

          // 9. Return accumulator.
          return value;
        }
      });
    }

问题1：如果您看到步骤1，

var o = Object(this);

我已经通过向polyfill方法传递一个数组来检查o和this的两个值。 o和this没有任何区别。它们都是具有相同数组值的数组（array.isarray在两者上都返回true）。为什么不使用以下方式..？

var o = this;

问题2：第二步

var len = o.length >>> 0;

以上代码似乎将o.length（32位）右移了。然而，移动的位数为0。那么我们通过移动0个比特位得到什么优势呢？为什么不改用以下代码呢？

var len = o.length;

问题3：else语句内的第一个while条件如下

 while (k < len && !(k in o)) {
    k++;
  }

一开始k被设置为0，它似乎总是存在于o中。因此，这个while循环条件永远不会成立。那么，如果它从未进入，我们为什么需要这个while循环。

- greg chap

2个回答

-1

以下方法可行：

var Arr = [1,2,3,4]

 Array.prototype.myreduce = function(callback,initialvale){

    var result ;
    var resultvalue = initialvale
    
    for(var key =0;key<this.length;key++){
     
        var resultvalue =callback(resultvalue,this[key])
        
        }
    
    return resultvalue;
  
  
} 


var customvalued = Arr.myreduce(function(total,value){

    //console.log(total,value)

     if(value%2==0){
        total.push(value)
    } 
    
    return total 
    
},[])

console.log(customvalued)

- chandan kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ibrahim mahrir · Accepted Answer

问题1：

为了确保调用reduce方法时，它会被作为对象的方法调用，因为reduce可能通过Function#call，Function#apply或绑定的Function#bind调用：

Array.prototype.reduce.call(undefined, function() {});

因此，当访问诸如length之类的属性时，不会抛出显示无法访问未定义的****属性的错误。

注意：上面的示例使用本地的reduce，如果没有提供对象，它实际上会抛出错误。

问题2：

为了始终具有有效的整数值作为length（即使它不存在）：

console.log(5 >>> 0);         // 5
console.log(5.5 >>> 0);       // 5
console.log("5" >>> 0);       // 5
console.log("hello" >>> 0);   // 0
console.log(undefined >>> 0); // 0

问题3：

处理稀疏数组：

var arr = [5, 6];
arr[7000000] = 7;

arr.reduce(function(acc, v, i) {
  console.log("index:", i);
}, 0);

它不会遍历从 0 到 7000000 的所有索引，只会遍历实际存在的索引。