配列に要素を追加する

配列に要素を追加する

配列に要素を追加する方法は3種類あります。

• 配列の添字（キー）で指定した位置に値を代入する
• pushメソッドを使う
• unshiftメソッドを使う

それぞれの要素を追加する方法を解説していきます。

配列の添字（キー）で指定した位置に要素を代入する

最も基本的な要素の追加方法になり、変数に値を代入するのと同じ形式で要素を追加することができます。
また、値を入れる位置をピンポイントに指定できることもポイントです。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];

// キーを指定して値を追加
animals[3] = 'tiger';
animals[4] = 'penguin';
animals[2] = 'dolphin';
console.log(animals);
// (5) ["cat", "dog", "dolphin", "tiger", "penguin"]

値が入っていない添字（キー）に値を入れると要素が新規で追加され、すでに値が入っている添字（キー）を指定した場合は上書き（更新）になります。

配列の末尾に要素を追加

pushメソッドを使うと配列の末尾に値を追加していきます。
要素の添字（キー）は指定する必要がなく、機械的に末尾に値を追加していきたいときに便利な方法です。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];

// 配列の末尾に値を追加
animals.push('fox');
animals.push('lion');
console.log(animals);
// (5) ["cat", "dog", "mouse", "fox", "lion"]

配列の先頭に要素を追加

unshiftメソッドを使うと配列の先頭に値を追加していきます。
pushメソッドとは反対方向に値を追加していくメソッドです。

以下の例ではpushメソッドで末尾に値を2つ追加してから、unshiftメソッドで先頭に値を2つ追加します。

JS コード例

let animals = [ 'cat', 'dog', 'mouse'];

// 配列の末尾に値を追加
animals.push('fox');
animals.push('lion');
console.log(animals);
// (5) ["cat", "dog", "mouse", "fox", "lion"]

// 配列の先頭に値を追加
animals.unshift('rhino');
animals.unshift('bear');
console.log(animals);
// (7) ["bear", "rhino", "cat", "dog", "mouse", "fox", "lion"]

配列の要素の添字（キー）が連番じゃないとき

pushメソッドは添字（キー）が連番になっていないときについても、一番後ろに位置する添字（キー）に続く形で値が追加されます。

JS コード例

// 配列に要素を追加する
let animals = [ 'cat', 'dog', 'mouse'];

// 添字（キー）を指定して値を追加
animals[5] = 'tiger';
animals[6] = 'penguin';
console.log(animals);
// (7) ["cat", "dog", "mouse", empty × 2, "tiger", "penguin"]

// 配列の末尾に値を追加
animals.push('fox');
animals.push('lion');
console.log(animals);
// (9) ["cat", "dog", "mouse", empty × 2, "tiger", "penguin", "fox", "lion"]

「// 添字（キー）を指定して値を追加」の箇所で、あえて添字（キー）が連番にならないように値を追加しています。
すると、途中の添字（キー）は空のままスキップ（undefined）され、指定した添字（キー）に値が入ります。
その後にpushメソッドで値を追加すると、途中の空要素は無視したまま配列の末尾に追加していきます。

今回は値を追加していきましたが、反対に値を取り出すメソッドも用意されています。
配列の末尾から値を取り出したい場合はpopメソッド、先頭から値を取り出したい場合にはshiftメソッドがあります。
これらのメソッドの具体的な使用例については、「配列の要素を取り出す」を参照してください。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。