2017-11-14 4 views
2

ECMAScript compatibility table에서 Edge 15 및 Edge 16이 for ... of 루프를 지원한다고 표시됩니다. 그러나노드 목록에서 'for ... of'을 사용할 때 Edge 15에서 오류가 발생 함

,이 코드를 실행하면

const list = document.querySelectorAll('[data-test]'); 
 
console.log(list); 
 

 
for (const item of list) { 
 
    console.log(item); 
 
}
<div data-test></div> 
 
<div data-test></div> 
 
<div data-test></div> 
 
<div data-test></div> 
 
<div data-test></div>

그것은 크롬과 파이어 폭스에서 작동하지만 가장자리있다. 대신 그것은 말합니다 :

개체가 속성 또는 메서드 'Symbol.iterator'를 지원하지 않습니다.

제가 이해하는 것처럼 NodeList 실제로 지원할 것입니다. 맞습니까?

여기 fildde 그것을 자신을 시도하고있다 : Test it online

누군가가 문제 또는 여기에 실수를 설명 할 수 있습니까?

+1

Edge는 'for ... of'을 지원합니다. 'NodeList's의 iterator를 지원하지 않는 것 같습니다. – JLRishe

+0

polyfill로드를 고려해 보셨습니까? 이런 종류의 일은 그들이 최선의 것입니다. – loganfsmyth

+0

@loganfsmyth 좋은 지적.또한 polyfill과 같은 제안 된 솔루션을 고려 중이지만이 특정 문제에 대해서만 설명합니다. – lampshade

답변

5

가장자리가 for... of을 지원합니다.

NodeLists의 iterator를 지원하지 않는 것 같습니다. 모든 배열과 같은 객체가 반복자를 지원하는 것은 아니며 NodeLists에 대한 표준이 있는지 여부는 확실하지 않습니다. 어떤 경우

, 그것은 그들과 함께 작업 할 for ... of를 쉽게 얻을 충분 : for..of가 지원되지만 에지 (15)는 NodeList를에 동작을 추가하는 것을 잊었다

const list = document.querySelectorAll('[data-test]'); 
 

 
for (const item of Array.from(list)) { 
 
\t console.log(item); 
 
}
<div data-test>a</div> 
 
<div data-test>b</div> 
 
<div data-test>c</div> 
 
<div data-test>d</div> 
 
<div data-test>e</div>

+1

설명해 주셔서 감사합니다. 그래서 나는 그 오버 헤드를 피할 수 있다고 생각한'Array.from'을 사용해야 만합니다. 문제를 찾아 주셔서 감사합니다. +1. – lampshade

2

경우 polyfill 수 아주 작은 코드로 직접 작성하십시오 :

NodeList.prototype[Symbol.iterator] = function*() { 
    for(var i = 0; i < this.length ; i++) { 
     yield this[i] 
    } 
} 

다른 질문에 답하십시오 기 (이것은 사양에 반복자로 정의입니까?) 대답은 '예입니다 :

DOM을 사양 defines NodeList 등 :

interface NodeList { 
    getter Node? item(unsigned long index); 
    readonly attribute unsigned long length; 
    iterable<Node>; 
}; 

주 세 번째 특성, iterable<Node>;. in the WebIDL spec 그것을 찾고 : 바인딩 ECMA 스크립트 언어에서

, 반복자는 은 "항목", "대해 forEach", "키", "값"과 인터페이스 프로토 타입에 @@ 반복자 특성 있을 것이다 인 인터페이스를 목적.

Edge에서 구현하지 않은 것으로 보입니다.

+1

아 너무 유망 해 보인다. 고마워. – lampshade

+0

'Edge'는'NodeList # values'를 구현하지 않습니다. – JLRishe

+1

아, 잘 확인해 주셔서 감사합니다. 최소한 그것은 DOM 레벨 3과 일치합니다. 나는 내 대답을 편집 할 것입니다. – Touffy

관련 문제