Pourquoi la fonction forEach ne fonctionne-t-elle pas dans Internet Explorer et Microsoft Edge ?

La fonction forEach ne fonctionne pas dans les navigateurs Microsoft récents

Dans une tentative de création d'un script pour les choix de produits dans une application Web, un développeur a rencontré une erreur dans Internet Explorer 11 et Microsoft Edge. Le message d'erreur indiquait que la fonction forEach n'était pas prise en charge, bien que la fonction soit apparemment disponible dans IE9 et les versions plus récentes.

Exploration du problème

La méthode forEach est généralement utilisé pour parcourir les éléments du tableau et appliquer une fonction à chaque élément. Dans ce cas, le développeur a utilisé la méthode permettant de sélectionner les options de couleur à partir de la configuration d'un produit. Cependant, après enquête, il a été constaté que l'extrait de code suivant :

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

ne fonctionnait pas comme prévu dans Internet Explorer et Microsoft Edge, générant une erreur indiquant que la fonction forEach n'était pas une propriété de NodeList. renvoyé par querySelectorAll.

Raison du problème

Après des recherches plus approfondies, il a été découvert que NodeList et HTMLCollection, les types d'objets renvoyés par querySelectorAll et des méthodes similaires, sont pas de vrais tableaux mais plutôt des itérables. En JavaScript, les itérables sont des objets qui peuvent être itérés à l'aide de boucles for-of, d'opérateurs de propagation ou d'affectations de déstructuration.

Les objets NodeList ont récemment pris en charge la méthode forEach, mais les objets HTMLCollection ne le font pas et ne sont pas attendus. pour le soutenir. Cela est dû à des problèmes de compatibilité ascendante, car l'ajout de la méthode forEach à HTMLCollection pourrait potentiellement casser le code existant.

Polyfilling forEach

Pour résoudre le problème, il est recommandé de polyfill la méthode forEach pour les objets NodeList. Le polyfilling consiste à ajouter une méthode à un objet qui n'est pas pris en charge nativement. L'extrait de code suivant peut polyfill forEach pour NodeList :

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

L'affectation directe, comme indiqué dans le code ci-dessus, est possible car énumérable, configurable et inscriptible doit toutes être vraie, et c'est une propriété de valeur.

Itérabilité du polyfilling

De plus, les objets NodeList peuvent également être rendus itérables pour prendre en charge l'itération sur eux à l'aide de boucles for-of et d'opérateurs de propagation. Ceci peut être réalisé avec le polyfill suivant :

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

Exemple d'utilisation de polyfills

En incorporant ces polyfills, le code d'origine peut être modifié pour s'exécuter de manière transparente dans tous les formats pris en charge. navigateurs :

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

Cet extrait de code mis à jour devrait fonctionner comme prévu dans tous les navigateurs, y compris Internet Explorer et Microsoft Edge.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!