web関連

【javascript】「[].slice.call()」について

「[].slice.call()」という見慣れない書き方があったので備忘録

配列風オブジェクトを配列にすることができる

[].slice.call()はHTMLコレクションといった配列風オブジェクトを配列にすることができる
※HTMLCollectionは配列のようなもので、配列として使うには配列への変換が必要
リンク:HTMLコレクションのループ方法

<div class="div">テストです</div>
<div class="div">テストです</div>
…

<script>
var HTMLCollection = document.getElementsByTagName("div");
console.log(HTMLCollection);// HTMLCollection
console.log([].slice.call(HTMLCollection));// Array
</script>

以前、Array.from(HTMLCollection)[...HTMLCollection]で配列に変換できると備忘録を書いたけど、違いとしてはie11でも使えるか使えないかの違いがある

○(ie11で使える)…
console.log([].slice.call(HTMLCollection));// Array

×(ie11で使えない)…
console.log(Array.from(HTMLCollection));// オブジェクトは 'from' プロパティまたはメソッドをサポートしていません。
console.log([...HTMLCollection]);// 構文エラーです。

ie11もサポートの終了が近づいてきたけど、配列風オブジェクト(HTMLCollection)を配列にするなら使うべきは[].slice.call()だね

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。