Array.prototype.from()とは

2020/06/17

Array.prototype.from()とは?


Array.form()メソッドは、配列風オブジェクトや反復可能オブジェクトから、新しい、浅いコピーの Array インスタンスを生成します。

MDN

ポイントは二つ。

1,配列っぽいものをちゃんとした配列にしてくれる。

2,新しい配列はシャローコピーのArrayインスタンスを生成します。

1,配列っぽいものをちゃんとした配列にしてくれる。


そもそも配列っぽいものって何?

僕が最近遭遇した配列っぽいものはNodeList。

const elements = document.querySelectorAll(''); console.log(elements) // NodeList()

Array.prototype.from()に出会う前はこんな感じで対応してた、、、

const elements = document.querySelectorAll(''); const list = Array.prototype.slice.call(elements, 0);

今はこんな感じ

const elements = document.querySelectorAll(''); const list = Array.from(elements);

とても気持ちが良い

ただ、IEではArray.from()で配列に変更しても使えなかったので

IE対応が必要な場合はsliceとcallで対応するしかなさそうです。。

2,新しい配列はシャローコピーのArrayインスタンスを生成します。


ここはよくわからん

調べた感じ、コピーしたオブジェクトと新しい配列の参照が同じであるが故に、コピーしたオブジェクトに変更があった場合

新しい配列にも変更が反映されるってことなのではないか?

と思っています。。

ここはもうちょっと真面目に調べた方が良さそう、、、