Mengapa forEach Function Tidak Berfungsi dalam Internet Explorer dan Microsoft Edge?

untukSetiap Fungsi Tidak Berfungsi dalam Penyemak Imbas Microsoft Terkini

Dalam percubaan untuk mencipta skrip untuk pilihan produk dalam aplikasi web, pembangun menemui ralat dalam Internet Explorer 11 dan Microsoft Edge. Mesej ralat menunjukkan bahawa fungsi forEach tidak disokong, walaupun fungsi itu dilaporkan tersedia dalam IE9 dan versi yang lebih baharu.

Meneroka Isu

Kaedah forEach biasanya digunakan untuk mengulangi elemen tatasusunan dan menggunakan fungsi pada setiap elemen. Dalam kes ini, pembangun menggunakan kaedah untuk memilih pilihan warna daripada konfigurasi produk. Walau bagaimanapun, selepas penyiasatan, didapati bahawa coretan kod berikut:

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

tidak berfungsi seperti yang diharapkan dalam Internet Explorer dan Microsoft Edge, melemparkan ralat yang menunjukkan bahawa fungsi forEach bukan milik NodeList dikembalikan oleh querySelectorAll.

Sebab Isu

Selepas penyelidikan lanjut, didapati bahawa NodeList dan HTMLCollection, jenis objek yang dikembalikan oleh querySelectorAll dan kaedah yang serupa, adalah bukan tatasusunan benar tetapi boleh diulang. Dalam JavaScript, iterables ialah objek yang boleh diulang menggunakan for-of loops, spread operators atau destructuring assignments.

Objek NodeList baru-baru ini mendapat sokongan untuk kaedah forEach, tetapi objek HTMLCollection tidak dan tidak dijangka untuk menyokongnya. Ini disebabkan oleh kebimbangan keserasian ke belakang, kerana menambahkan kaedah forEach pada HTMLCollection berkemungkinan memecahkan kod sedia ada.

Polyfilling forEach

Untuk menyelesaikan isu ini, adalah disyorkan untuk polyfill kaedah forEach untuk objek NodeList. Pengisian poli melibatkan penambahan kaedah pada objek yang tidak disokong secara asli. Coretan kod berikut boleh poliisi untukEach untuk NodeList:

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

Penugasan langsung, seperti yang ditunjukkan dalam kod di atas, adalah mungkin kerana boleh dikira, boleh dikonfigurasikan dan boleh ditulis semuanya harus benar dan ia merupakan sifat nilai.

Contoh Menggunakan Polyfills

Dengan menggabungkan polyfill ini, kod asal boleh diubah suai untuk berjalan dengan lancar dalam semua yang disokong pelayar:

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

Coretan kod yang dikemas kini ini harus berfungsi seperti yang dimaksudkan dalam semua penyemak imbas, termasuk Internet Explorer dan Microsoft Edge.

Atas ialah kandungan terperinci Mengapa forEach Function Tidak Berfungsi dalam Internet Explorer dan Microsoft Edge?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!