potisanのプログラミングメモ

趣味のプログラマーがプログラミング関係で気になったことや調べたことをいつでも忘れられるようにメモするブログです。はてなブログ無料版なので記事の上の方はたぶん広告です。記事中にも広告挿入されるみたいです。

JavaScript 配列様オブジェクトの作成とArray.from()での利用

配列様オブジェクト(Array-like object)

MDNのArray.from()の説明には「Array-like object」(「配列様オブジェクト」)あるいは「配列のようなオブジェクト」という表現があります。具体的には次のようなオブジェクトです。

{length: 5};
{length: 5, "1", 1, "2", 2};

これらが配列様オブジェクトであることは次のコードで確認できます。なお、リテラル表記法で作成したオブジェクトなので配列でないことは自明としています。

Array.from({length: 5});
// Array(5) [ undefined, undefined, undefined, undefined, undefined ]
Array.from({length: 5, "1": 1, "2": 2});
// Array(5) [ undefined, 1, 2, undefined, undefined ]

{length: 5}は長さ5で全要素undefinedの配列、{length: 5, "1": 1, "2": 2}は長さ5で1、2番目の要素が1、2、他はundefinedの配列とみなされています。

これらの共通点はlengthプロパティを持つことです。また、lengthプロパティの値は整数とみなせれば問題ないようです。

Array.from({length: "5"})
// Array(5) [ undefined, undefined, undefined, undefined, undefined ]
Array.from({length: 5.5})
// Array(5) [ undefined, undefined, undefined, undefined, undefined ]
Array.from({length: "a"})
// Array []

逆に整数とみなせるキーは持つがlengthプロパティを持たないオブジェクトは配列様オブジェクトとはみなされません。次のコードで確かめられます。

Array.from({"0": 0, "1": 1, "2": 2});
// Array []

配列様オブジェクトのArray.from()での利用

Array.from()メソッド(MDN)を使えば余分な配列を作成せずにある長さの配列を作成できます。例えば次のコードは長さ5でbからfまでの文字の配列を作成します。

Array.from({length: 5}, (_, i) => String.fromCodePoint("b".codePointAt(0) + i));
// Array(5) [ "b", "c", "d", "e", "f" ]