forEach 函數(shù)在最近的 Microsoft 瀏覽器中不起作用

在嘗試為 Web 應(yīng)用程序中的產(chǎn)品選擇創(chuàng)建腳本時(shí)，開發(fā)人員遇到了Internet Explorer 11 和 Microsoft Edge 中出現(xiàn)錯(cuò)誤。錯(cuò)誤消息表明 forEach 函數(shù)不受支持，盡管據(jù)報(bào)道該函數(shù)在 IE9 及更高版本中可用。

探索問題

forEach 方法通常是用于迭代數(shù)組元素并對(duì)每個(gè)元素應(yīng)用函數(shù)。在這種情況下，開發(fā)人員利用了從產(chǎn)品配置中選擇顏色選項(xiàng)的方法。然而，經(jīng)過調(diào)查，發(fā)現(xiàn)以下代碼片段：

var color_btns = document.querySelectorAll('#color > p');
color_btns.forEach(function(color) {
    color.onclick = function () {
        color_btns.forEach(function(element) {
            if (element.classList.contains('selected')) {
                element.classList.remove('selected');
            }
        });
        color.classList.add('selected');
        document.querySelector('#f_color').value = color.dataset.id;
    };
});

在 Internet Explorer 和 Microsoft Edge 中沒有按預(yù)期運(yùn)行，拋出錯(cuò)誤，表明 forEach 函數(shù)不是 NodeList 的屬性

問題原因

進(jìn)一步研究發(fā)現(xiàn)，querySelectorAll 及類似方法返回的對(duì)象類型 NodeList 和 HTMLCollection 是不是真正的數(shù)組，而是可迭代的。在 JavaScript 中，可迭代對(duì)象是可以使用 for-of 循??環(huán)、擴(kuò)展運(yùn)算符或解構(gòu)賦值進(jìn)行迭代的對(duì)象。

NodeList 對(duì)象最近獲得了對(duì) forEach 方法的支持，但 HTMLCollection 對(duì)象沒有，也不期望支持它。這是由于向后兼容性問題，因?yàn)閷?forEach 方法添加到 HTMLCollection 可能會(huì)破壞現(xiàn)有代碼。

Polyfilling forEach

要解決此問題，建議polyfill NodeList 對(duì)象的 forEach 方法。 Polyfilling 涉及向本機(jī)不支持的對(duì)象添加方法。下面的代碼片段可以為 NodeList 填充 forEach：

if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

直接賦值，如上面的代碼所示，是可能的，因?yàn)?enumerable、configurable 和 writable 都應(yīng)該為 true，并且它是一個(gè) value 屬性。

Polyfilling Iterability

此外，NodeList 對(duì)象也可以變得可迭代，以支持使用 for-of 循??環(huán)和展開運(yùn)算符對(duì)其進(jìn)行迭代。這可以通過以下polyfill來實(shí)現(xiàn)：

if (typeof Symbol !== "undefined" && Symbol.iterator && typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype[Symbol.iterator]) {
    Object.defineProperty(NodeList.prototype, Symbol.iterator, {
        value: Array.prototype[Symbol.iterator],
        writable: true,
        configurable: true
    });
}

使用Polyfill的示例

通過合并這些polyfill，可以修改原始代碼以在所有支持的環(huán)境中無縫運(yùn)行瀏覽器：

// Polyfilling forEach for NodeList
if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

// Polyfilling iterability for NodeList
if (typeof Symbol !== "undefined" && Symbol.iterator && typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype[Symbol.iterator]) {
    Object.defineProperty(NodeList.prototype, Symbol.iterator, {
        value: Array.prototype[Symbol.iterator],
        writable: true,
        configurable: true
    });
}

var color_btns = document.querySelectorAll('#color > p');
color_btns.forEach(function(color) {
    color.onclick = function () {
        color_btns.forEach(function(element) {
            if (element.classList.contains('selected')) {
                element.classList.remove('selected');
            }
        });
        color.classList.add('selected');
        document.querySelector('#f_color').value = color.dataset.id;
    };
});

此更新的代碼片段應(yīng)在所有瀏覽器中按預(yù)期運(yùn)行，包括 Internet Explorer 和 Microsoft Edge。

以上是為什么 forEach 函數(shù)在 Internet Explorer 和 Microsoft Edge 中不起作用？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！