配列スプレッド表記法はBabelのNodeListsでどのように動作するのでしょうか？

Question

querySelectorAllは配列のようなものではありますが、配列ではないものが返されることは承知しています。だから私のコードで私はES6を使用して、それを反復してい構文を広める：私はクロームデベロッパーツールのコンソールにその正確なコードを記述する場合、期待どおり

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

、それが動作します。しかし、バベルは、ES5にそれをtranspilingさ：

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

[].concat(things)がが[...things]と同じことをしていません。予想される結果はノードの配列ですが、concatはNodeListsの配列を返します。したがって、thing.do()を呼び出すと、NodeListにはdoメソッドがないため、エラーになります。

代わりに、NodeListでArrayメソッドを使用するES5に優しい方法は、のように先にsliceを呼び出すことです。

バベルは配列の広がりを利用するたびにconcatに変わるのは間違っていますか？それとも、新しいバージョンや設定がありますか？

Answer 1

NodeList.prototypeの@@isConcatSpreadableプロパティをtrueに設定して、[].concatで正しく動作させることができます。

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

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