爲什麼在IE中破解forEach方法？

Question

在Chrome/Firefox上運行良好，只在第二個forEach上打開，並且只在IE上打開（我正在測試IE11）。

對象不支持屬性或方法 '的forEach'

moment(da).weekdaysInBetween(moment(da).add(14, 'day').format('MM/DD/YYYY')).forEach(function(nextDay){ 
    //console.log('first'); 
     thirteen.push(nextDay.format('MM/DD/YYYY')); 
    }); 


    document.querySelectorAll('input[class="newname"]').forEach(function(input, index){ 
     input.value = thirteen[index]; 
     // console.log('second'); 
    }); 

Answer 1

從ECMAScript的標準：

在foreach功能是有意通用的;它不要求它的這個值是一個Array對象。因此可以將其轉換爲其他類型的對象以用作方法。 forEach函數是否可以成功應用於主機對象取決於實現。

IE說它不支持查詢返回的節點列表上的.forEach。您可以在列表上調用Array.prototype.forEach代替，如本刪節例如：

Array.prototype.forEach.call( 
 
    document.querySelectorAll('input'), 
 
    function(input, index){ 
 
     input.value = 'hello ' + index; 
 
    } 
 
);

<input type="text"><input type="text">

Answer 2

document.querySelectorAll不返回一個數組，它返回一個節點列表，你可以不使用的forEach一個NodeList，你需要使用Array.prototype.slice.apply轉換陣列中的NodeList，請嘗試以下操作：

moment(da).weekdaysInBetween(moment(da).add(14, 'day').format('MM/DD/YYYY')).forEach(function(nextDay){ 
    //console.log('first'); 
     thirteen.push(nextDay.format('MM/DD/YYYY')); 
    }); 


    Array.prototype.slice.apply(document.querySelectorAll('input[class="newname"]')).forEach(function(input, index){ 
     input.value = thirteen[index]; 
     // console.log('second'); 
    }) 

;

如果.forEach（）不支持，你可以使用下面的代碼替換的forEach

// Production steps of ECMA-262, Edition 5, 15.4.4.18 
// Reference: http://es5.github.com/#x15.4.4.18 
if (!Array.prototype.forEach) { 

    Array.prototype.forEach = function forEach(callback, thisArg) { 
    'use strict'; 
    var T, k; 

    if (this == null) { 
     throw new TypeError("this is null or not defined"); 
    } 

    var kValue, 
     // 1. Let O be the result of calling ToObject passing the |this| value as the argument. 
     O = Object(this), 

     // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length". 
     // 3. Let len be ToUint32(lenValue). 
     len = O.length >>> 0; // Hack to convert O.length to a UInt32 

    // 4. If IsCallable(callback) is false, throw a TypeError exception. 
    // See: http://es5.github.com/#x9.11 
    if ({}.toString.call(callback) !== "[object Function]") { 
     throw new TypeError(callback + " is not a function"); 
    } 

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. 
    if (arguments.length >= 2) { 
     T = thisArg; 
    } 

    // 6. Let k be 0 
    k = 0; 

    // 7. Repeat, while k < len 
    while (k < len) { 

     // a. Let Pk be ToString(k). 
     // This is implicit for LHS operands of the in operator 
     // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk. 
     // This step can be combined with c 
     // c. If kPresent is true, then 
     if (k in O) { 

     // i. Let kValue be the result of calling the Get internal method of O with argument Pk. 
     kValue = O[k]; 

     // ii. Call the Call internal method of callback with T as the this value and 
     // argument list containing kValue, k, and O. 
     callback.call(T, kValue, k, O); 
     } 
     // d. Increase k by 1. 
     k++; 
    } 
    // 8. return undefined 
    }; 
} 

更多信息在Mozilla開發者網絡