JavaScriptの「Array.from」について簡単なサンプルコードで解説
6 回閲覧されました
みなさんこんにちは、jonioです。
今回はJavaScriptのArray.fromについて簡単なサンプルコードで解説します。
Laravelの無料学習サイトを作りました
Laravelをこれから勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
Array.fromとは
反復できる物を、配列に変換する為のメソッドです。
「反復できる物」の意味が分からないと思うのでサンプルコードを使ってどんな場合にArray.fromが使えるかを解説します。
文字列に使う場合
下記のコードで考えます。
const str = 'ABC';
const arr = Array.from(str);
console.log(arr);文字列(サンプルコードはABC)を1文字ずつ(A・B・C)に分解して配列の要素に変換します。
5行目は「[“A”, “B”, “C”]」になります。
NodeListに使う場合
下記のコードで考えます。
<ul>
<li>apple</li>
<li>banana</li>
<li>grape</li>
</ul>
<script>
const nodeList = document.querySelectorAll('li');
const arr = Array.from(nodeList);
console.log(arr);
</script>8行目のnodeListはオブジェクトですがオブジェクトの要素を配列の要素に変換します。
12行目は「li, li, li」になります。
オブジェクトの長さを使う場合
下記のコードで考えます。
const nums = Array.from({ length: 10 }, (_, i) => i);
console.log(nums);1行目の「{ length: 10 }」ですが長さだけを指定したオブジェクトを使うこともできます。
今までは第二引数がありませんでした。
第二引数を指定してメソッドを使うこともできます。
「(_, i) => i」の「-」はインデックス番号だけを使うという意味です。
1行目は長さが10のオブジェクトのインデックス番号を配列の要素にするという意味です。
3行目は「[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]」になります。