배열 확산 표기법은 Babel의 NodeLists와 어떻게 작동합니까?

Question

querySelectorAll은 배열과 유사하지만 배열이 아닌 것을 반환한다는 것을 알고 있습니다. 그래서 내 코드에서 나는 ES6 확산 구문을 사용하여 반복 해요 : 예상대로

const things = document.querySelectorAll('.things'); 
[...things].forEach(thing => thing.do()); 

을 나는 크롬에 정확한 코드는 콘솔을 DevTools로 있음을 작성하는 경우, 그것을 작동합니다. 그러나 바벨 ES5에 transpiling된다

var things = document.querySelectorAll('.things'); 
[].concat(things).forEach(function(thing) { thing.do() }); 

[].concat(things)이가 [...things]으로 동일한 작업을 수행하지 않습니다. 예상 결과는 노드 배열이지만 concat은 노드 목록 배열을 반환합니다. 따라서 thing.do()을 호출하면 NodeList에 do 메소드가 없으므로 오류가 발생합니다.

NodeList에서 Array 메소드를 사용하는 ES5에 친숙한 방법은 과 같이 slice을 먼저 호출하는 것입니다.

바벨은 배열을 사용할 때마다 concat으로 바꿀 수 없습니까? 아니면 제가 누락 된 최신 버전이나 구성이 있습니까?

Answer 1

당신은 [].concat 제대로 작동하도록 true에 NodeList.prototype에 @@isConcatSpreadable 속성을 설정할 수 있습니다.

NodeList.prototype[Symbol.isConcatSpreadable] = true; 
 
const divs = document.querySelectorAll('div'); 
 
console.log([].concat(divs));

<div>foo</div> 
 
<div>bar</div>