순회 내가 <a href="https://babeljs.io/docs/usage/polyfill/" rel="nofollow">babel-polyfill</a>을 사용하고 있는데 내가 루프의를 위해 사용 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection" rel="nofollow"><code>HTMLCollection</code></a> 개체를 반복하기 위해 노력하고있어 대한-의 루프

사용하여 HTMLCollection 객체 : 그것은 작동하지 않습니다순회 내가 <a href="https://babeljs.io/docs/usage/polyfill/" rel="nofollow">babel-polyfill</a>을 사용하고 있는데 내가 루프의를 위해 사용 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection" rel="nofollow"><code>HTMLCollection</code></a> 개체를 반복하기 위해 노력하고있어 대한-의 루프

const elements = document.getElementsByClassName('some-class') 
for (const element of elements) { 
    console.log(element) 
}

. elements[Symbol.iterator] is not a function 오류가 나타납니다. 제대로 작동시키는 방법? "Iterable DOM collections" on the core-js GitHub page에서

출처

2016-09-29 thesublimeobject

오해 한 몇 가지 사항을 설명합니다. core-js는 babel-polyfill의 일부이므로 두 번 포함 할 필요가 없습니다. 'Symbol.iterator'를 콘솔에 입력하면이 심볼이 있음을 의미합니다. 반드시'elements'가'Symbol.iterator' 속성을 가지고 있다는 것을 의미하지는 않습니다. for-of 루프는 아무 것도 배열로 취급하지 않고 단지 객체의'@@ iterator' 메소드를 호출합니다. –

또한, HTMLCollection 객체가 무엇인지 모를 경우'document.getElementsByClassName()'에 의해 반환되는 객체입니다. –

@Gothdo, 명확히하기 위해, 나는 core-js와 babel-polyfill을 모두 포함하지 않았다 : 나는 다른 것을 작동시킬 것인지를보기 위해 여러 번 가져 오기를 시도했다. 그럼에도 불구하고 명확히 해 주셔서 감사합니다. – thesublimeobject

일부 DOM의 컬렉션은 iterable interface을해야하거나 inherited from Array을해야합니다. 즉, 은 keys, values, entries 및 @@iterator 개의 메소드 반복해야합니다. 그래서 그들을 추가하십시오. 모듈 web.dom.iterable : 당신이 볼 수 있듯이
{ 
    NodeList, 
    DOMTokenList, 
    MediaList, 
    StyleSheetList, 
    CSSRuleList 
} 
    #values()  -> iterator 
    #keys()  -> iterator 
    #entries() -> iterator 
    #@@iterator() -> iterator (values) 

, 그 목록은 HTMLCollection 포함되지 않습니다. HTMLCollection과 for-of 루프를 사용하려면 수동으로 Array.prototype.values을 HTMLCollection.prototype[Symbol.iterator]에 할당해야합니다. 이 예를 참조하십시오

HTMLCollection.prototype[Symbol.iterator] = Array.prototype.values 
 

 
for (const element of document.getElementsByTagName('a')) { 
 
    console.log(element.href) 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script> 
 
<a href="//www.google.com">Google</a> 
 
<a href="//www.github.com">GitHub</a>

또는, 당신은 단지 document.querySelectorAll()을 사용할 수 있습니다, 이는 리턴한다 NodeList 객체입니다.

출처

2016-09-29 22:32:38

@ zer00ne 답변을 추가했습니다. –

@ 고토 이것은 매우 유용한 답변입니다. 고맙습니다. 반복 가능한 사양을 오해하고 왜 지금이 문제가 발생했는지 정확히 이해합니다. – thesublimeobject

답변

관련 문제