JavaScript の配列の作成

ここでは JavaScript の配列 (Array) を作成する方法を説明します。

• コンストラクタによる Array オブジェクトの作成
• Array.of() Array オブジェクトを作成
• Array.from() コレクションから Array オブジェクトを作成
• flat() 入れ子の配列をフラットにして新しい配列を作る
• split() 文字列から配列を作成

コンストラクタによる Array オブジェクトの作成

JavaScript で配列、すなわち、Array オブジェクトを作るには次のように Array() コンストラクタを呼ぶことで作成します。

var a1 = Array();
var a2 = Array(111, 222, 1000);

この例のように、コンストラクタに要素の値を渡すことで、作成とデータの初期化を同時にできます。

ただし、引数 arg をひとつだけ渡した時は、空の要素をもつ長さ arg の配列が作成されます。 例えば、Array(3) は空の値 (empty) を三つ持つ配列が作成されます。

配列の作成は、[] を使って記述できます。

var a1 = [];
var a2 = [111, 222, 1000];

配列内のそれぞれの要素にはゼロベースのインデックスが割り当てられます。 つまり、1番目の要素はインデックス 0、2番目の要素はインデックス 1、となります。

ひとつの配列内の要素は、同じ型の要素である必要はありません。次の例のように、number、string、Function オブジェクトなどと、別々の型でも構いません。

function foo(s) {
	//...
}

var a3 = [1, 'Hello', foo];
for (var i=0; i<a3.length; i++) {
    console.log(typeof a3[i]);
}

この結果はコンソールに、次のように出力されます。

number
string
function

Array.of() Array オブジェクトを作成

Array.of(...items) を使うと、引数 ...items で渡した値を要素としてもつ配列を作成します。

普通のコンストラクタ Array() を使う場合と Array.of() を使う場合では、特にひとつの値を渡した時に違いがあります。

Array(5) とすると空の要素が 5 つある配列が作成されます。一方、Array.of(5) とすると 5 という値をもつ要素をひとつもつ配列 [5] が作成されます。

let a, b;
a = Array.of(5);
console.log(a); // [5]
a = Array.of(1, 2, 3);
console.log(a); // [1, 2, 3]

b = Array(5); // [empty x 5]
console.log(b);
b = Array(1, 2, 3);
console.log(b); // [1, 2, 3]

Array.from() でコレクションから Array オブジェクトを作成

Array.from() を使うと、HTMLCollection などのイテラブル (iterable) から Array オブジェクトを作成することができます。

リストなどのコレクションは、複数の要素を保持している点では配列に似ているのですが、オブジェクトのタイプとしては別物なので注意が必要です。

例えば、DOM の HTML 要素は children属性を持っています。このタイプは Array ではなく HTMLCollection です。このため、Array の関数である forEach() などを適用しようとすると、forEach is not a function というエラーが発生します。

コレクションを Array として扱うには、Array.from() 関数で Array オブジェクトを作成します。

let c = document.getElementById("ul1").children;
let a = Array.from(c);
a.forEach(e => {
    console.log(e);
});

flat() 入れ子の配列をフラットにして新しい配列を作る

flat( depth ) 関数を使うと、配列の要素に配列を持つ場合に、 子の配列の要素を展開して元の配列に結合します。

この操作を引数 depth で指定した深さ分だけ、繰り返します。depth を省略した場合は 1 とみなされます。

次の例では、深さを 1 と 2 にして違いをみています。

let a = [1, 2, 3, [10, 11, ['A', 'B']], 4, [5, 6]];
console.log(a);

let b = a.flat(1);
console.log(b);
// [1, 2, 3, 10, 11, ['A', 'B'], 4, 5, 6]

let c = a.flat(2);
console.log(c);
// [1, 2, 3, 10, 11, 'A', 'B', 4, 5, 6]

また、flat() を使うと、配列内の空のスロット (empty) が削除されます。

let a = [1, 2, , 3];
let b = a.flat();
console.log(b); // [1, 2, 3]

フラットにする入れ子の深さに制限が不要な場合、depth として Infinity を指定できます。

let a = [1, 2, , [10, ['A', 'B', ['x', 'y']]]];
console.log(a);

let b = a.flat(Infinity);
console.log(b);
// [1, 2, 10, "A", "B", "x", "y"]

split() 文字列から配列を作成

文字列 (String) の操作関数である split() を使うことで、 Array オブジェクトを作成することができます。

split() を用いると、 例えば Hello,world! という文字列から、, を区切り文字として、 文字列を分割して ['Hello', 'world!'] という内容の配列オブジェクトを作成する、ということができます。

詳しくは「split() の使い方」をみてください。