2016-12-28 1 views
0

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

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に変わるのは間違っていますか?それとも、新しいバージョンや設定がありますか?

+0

何のブラウザであなたがサポートする必要があるのですか? –

+1

Babelのプリセットで 'loose:true'を使用しているように聞こえるので、探している動作が無効になります。 – loganfsmyth

+0

常緑樹ブラウザのみサポートする必要があります –

答えて

0

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>

関連する問題