Internet Explorer 및 Microsoft Edge에서 forEach 기능이 작동하지 않는 이유는 무엇입니까?

최근 Microsoft 브라우저에서 각 기능이 작동하지 않음

웹 애플리케이션에서 제품 선택에 대한 스크립트를 생성하려는 개발자가 Internet Explorer 11 및 Microsoft Edge에서 오류가 발생했습니다. IE9 및 최신 버전에서 해당 기능을 사용할 수 있다고 알려졌음에도 불구하고 forEach 기능이 지원되지 않는다는 오류 메시지가 표시되었습니다.

문제 탐색

forEach 메서드는 일반적으로 배열 요소를 반복하고 각 요소에 함수를 적용하는 데 사용됩니다. 이 경우 개발자는 제품 구성에서 색상 옵션을 선택하는 방법을 활용했습니다. 그러나 조사 결과 다음 코드 조각이 발견되었습니다.

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에서 예상대로 작동하지 않아 forEach 함수가 NodeList의 속성이 아니라는 오류가 발생했습니다. querySelectorAll에서 반환되었습니다.

문제 원인

추가 조사 결과 querySelectorAll 및 유사한 메서드에서 반환되는 개체 유형인 NodeList 및 HTMLCollection이 다음과 같은 것으로 확인되었습니다. 실제 배열이 아니라 반복 가능합니다. JavaScript에서 반복 가능 항목은 for-of 루프, 확산 연산자 또는 구조 분해 할당을 사용하여 반복할 수 있는 객체입니다.

NodeList 객체는 최근 forEach 메소드에 대한 지원을 얻었지만 HTMLCollection 객체는 지원하지 않으며 앞으로도 그럴 것으로 예상되지 않습니다. 그것을 지원하기 위해. 이는 HTMLCollection에 forEach 메소드를 추가하면 잠재적으로 기존 코드가 손상될 수 있기 때문에 이전 버전과의 호환성 문제 때문입니다.

Polyfilling forEach

이 문제를 해결하려면 다음을 수행하는 것이 좋습니다. NodeList 객체에 대한 forEach 메소드를 폴리필합니다. 폴리필에는 기본적으로 지원되지 않는 개체에 메서드를 추가하는 작업이 포함됩니다. 다음 코드 조각은 NodeList에 대해 forEach를 폴리필할 수 있습니다.

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

위 코드에 표시된 대로 직접 할당은 열거 가능, 구성 가능 및 쓰기 가능이 모두 true여야 하고 값 속성이기 때문에 가능합니다.

폴리필 반복성

또한 NodeList 객체를 반복 가능하게 만들어 for-of 루프 및 스프레드 연산자를 사용하여 반복을 지원할 수도 있습니다. 이는 다음 폴리필을 사용하여 달성할 수 있습니다.

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

폴리필 사용 예

이러한 폴리필을 통합하면 원본 코드를 수정하여 지원되는 모든 환경에서 원활하게 실행될 수 있습니다. 브라우저:

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

이 업데이트된 코드 조각은 Internet Explorer 및 Microsoft Edge를 포함한 모든 브라우저에서 의도한 대로 작동해야 합니다.

위 내용은 Internet Explorer 및 Microsoft Edge에서 forEach 기능이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!