配列 の

配列について

JavaScriptの配列は、長さが固定されていないリストのような構造で、プリミティブやオブジェクトを、型が混ざっていても格納できます。 lengthプロパティを持ち、配列の中を順にたどったり内容を変更したりするための便利なメソッドもたくさんあります。

配列を作るには、角括弧（[]）の間に要素を並べます。 配列から値を読み出すには、識別子のあとに角括弧（[]）を書いて、その中にインデックスを指定します。配列のインデックスは0から始まります。

例えば、次のとおりです。

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names[1];
// => Laura

配列はコンストラクター構文でも作成できますが、ほとんどの場合には配列リテラルの構文をおすすめします。

const names = new Array();
names.push('Jack', 'Laura', 'Paul', 'Megan');

names[1];
// => Laura

配列では、要素のインデックスにstringsは使えず、整数（number）を使う必要があります。 整数以外の値でブラケット記法（またはドット記法）を使って設定や取得を行っても、配列のリストそのものに要素を設定・取得するのではなく、その配列のオブジェクトプロパティの集合に関連付けられた変数を設定・取得することになります。 配列のオブジェクトプロパティと配列要素のリストは別のものであり、配列の走査や変更の操作をこれらの名前付きプロパティに適用することはできません。

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length;
// => 4

// Properties can be set on arrays using bracket ['property'] or
// dot .property notation, and this will affect the length, as
// shown below.

names.magician = 'Elyse';
names.length;
// => 4

// The property shows up when logging the array, making it seem
// that the property is somehow incorporated in the array.

names;
// => ["Jack", "Laura", "Paul", "Megan", magician: "Elyse"]

// However, be aware. Properties added via non-numeric keys are
// NOT part of the array's internal list, and are not traversed
// or mutated when using one of the traversal or mutation
// operations.

names.forEach((name) => console.log(name));
// => Jack
// => Laura
// => Paul
// => Megan

配列から要素を削除する

JavaScriptの配列は通常のobjectsであり、deleteキーワードを使って要素を削除できます。 ただし、これによって配列の_長さ_は変わらず、emptyという穴が残ります。 他の言語では、これは疎な配列に似ています。 emptyの穴は、走査や変更の操作を行うときにスキップされます。

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
delete names[1];

names;
// =>  ["Jack", empty, "Paul", "Megan"]

names.length;
// => 4

names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan

穴を残したくない場合や、lengthに走査・変更の対象となる要素の数を反映させたい場合は、代わりにspliceを使います。

splice()メソッドは、既存の要素を削除したり置き換えたり、新しい要素を追加したりすることで、配列の内容をその場で変更します。¹

例えば、次のとおりです。

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(1, 1);

names;
// =>  ["Jack", "Paul", "Megan"]

names.length;
// => 3

names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan

配列の長さは変更できる

配列のlengthプロパティは、配列が持つ要素のリストと結び付いています。 これは変更できます。 長さを増やすとemptyの穴ができ、それらは配列の走査や変更の際には考慮されません。 長さを減らすと、配列の末尾の要素が_削除_されます。

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length = 6;

names;
// => ["Jack", "Laura", "Paul", "Megan", empty × 2]

names.length = 2;
// =>  ["Jack", "Laura"]

ある値が配列かどうかを確認する

配列はobjectsなので、typeof namesは"object"を返します。 ある値が配列かどうかを確認するには、Array.isArrayを使います。

const names = ['Jack', 'Laura', 'Paul', 'Megan'];

typeof names;
// => "object"

Array.isArray(names);
// => true

const object = {};
Array.isArray(object);
// => false

names instanceof Arrayを使いたくなるかもしれません。これは動作しますが、すべての状況でうまくいくわけではありません。 詳しくはこの記事を参照してください。

配列のメソッド

すべての配列オブジェクトで利用できるメソッドの一部は、配列に要素を追加したり削除したりするのに使えます。 ここではそのうちのいくつかを紹介します。

push

push()メソッドは、配列の末尾に1つ以上の要素を追加し、配列の新しい長さを返します。²

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.push('Jill'); // => 5
names;
// => ['Jack', 'Laura', 'Paul', 'Megan', 'Jill']

pop

pop()メソッドは、配列の最後の要素を削除し、その要素を返します。 このメソッドは配列の長さを変更します。³

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.pop(); // => 'Megan'
names;
// => ['Jack', 'Laura', 'Paul']

shift

shift()メソッドは、配列の最初の要素を削除し、削除されたその要素を返します。 このメソッドは配列の長さを変更します。⁴

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.shift(); // => 'Jack'
names;
// => ['Laura', 'Paul', 'Megan']

unshift

unshift()メソッドは、配列の先頭に1つ以上の要素を追加し、配列の新しい長さを返します。⁵

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.unshift('Jill'); // => 5
names;
// => ['Jill', 'Jack', 'Laura', 'Paul', 'Megan']

splice

splice()メソッドは、既存の要素を削除したり置き換えたり、新しい要素を追加したりすることで、配列の内容をその場で変更します。 このメソッドは、削除された要素を含む配列を返します。¹

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(2, 1, 'Jill'); // => ['Paul']
names;
// => ['Jack', 'Laura', 'Jill', 'Megan']

---

1. splice、MDN。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice（参照日：2021年9月29日） ↩

2. push、MDN。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push（参照日：2021年9月29日） ↩

3. pop、MDN。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop（参照日：2021年9月29日） ↩

4. shift、MDN。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift（参照日：2021年9月29日） ↩

5. unshift、MDN。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift（参照日：2021年9月29日） ↩