Why is forEach Function Not Working in Internet Explorer and Microsoft Edge?

forEach Function Not Working in Recent Microsoft Browsers

In an attempt to create a script for product choices in a web application, a developer encountered an error in Internet Explorer 11 and Microsoft Edge. The error message indicated that the forEach function was not supported, despite the function being reportedly available in IE9 and newer versions.

Exploring the Issue

The forEach method is commonly used to iterate over array elements and apply a function to each element. In this case, the developer utilized the method for selecting color options from a product's configuration. However, upon investigation, it was found that the following code snippet:

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;
    };
});

was not functioning as expected in Internet Explorer and Microsoft Edge, throwing an error indicating that the forEach function was not a property of the NodeList returned by querySelectorAll.

Reason for the Issue

After further research, it was discovered that NodeList and HTMLCollection, the types of objects returned by querySelectorAll and similar methods, are not true arrays but rather iterables. In JavaScript, iterables are objects that can be iterated over using for-of loops, spread operators, or destructuring assignments.

NodeList objects have recently gained support for the forEach method, but HTMLCollection objects do not and are not expected to support it. This is due to backward compatibility concerns, as adding the forEach method to HTMLCollection could potentially break existing code.

Polyfilling forEach

To resolve the issue, it is recommended to polyfill the forEach method for NodeList objects. Polyfilling involves adding a method to an object that is not natively supported. The following code snippet can polyfill forEach for NodeList:

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

Direct assignment, as shown in the code above, is possible because enumerable, configurable, and writable should all be true, and it's a value property.

Polyfilling Iterability

Additionally, NodeList objects can also be made iterable to support iterating over them using for-of loops and spread operators. This can be achieved with the following polyfill:

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
    });
}

Example Using Polyfills

By incorporating these polyfills, the original code can be modified to run seamlessly in all supported browsers:

// 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;
    };
});

This updated code snippet should function as intended in all browsers, including Internet Explorer and Microsoft Edge.

The above is the detailed content of Why is forEach Function Not Working in Internet Explorer and Microsoft Edge?. For more information, please follow other related articles on the PHP Chinese website!