現役エンジニアが解説！JavaScriptの配列操作：push、unshift、concatを使いこなそう

2024-06-09

JavaScriptで配列に複数の要素をプッシュする方法

pushメソッドの構文

array.push(element1, element2, ..., elementN);

引数

element1, element2, ..., elementN: 配列に追加する要素をカンマ区切りで指定します。要素の数は制限ありません。様々なデータ型を混在させることもできます。

戻り値

追加後の配列の長さを返します。

例

// 初期化
const numbers = [1, 2, 3];

// 複数の要素を追加
numbers.push(4, 5, 6);

// 結果
console.log(numbers); // [1, 2, 3, 4, 5, 6]

複数回のpush

pushメソッドは、何度でも呼び出すことができます。

// 初期化
const numbers = [10];

// 複数回push
numbers.push(20);
numbers.push(30, 40);

// 結果
console.log(numbers); // [10, 20, 30, 40]

注意点

pushメソッドは、元の配列を変更します。新しい配列を作成したい場合は、concatメソッドを使用します。
配列の要素の型は、推測されます。そのため、意図した型にならない場合は、明示的に型を指定する必要があります。

例1：数値の配列に要素を追加

// 初期化
const numbers = [1, 2, 3];

// 複数の要素を追加
numbers.push(4, 5, 6);

// 結果
console.log(numbers); // [1, 2, 3, 4, 5, 6]

// 初期化
const fruits = ['apple', 'orange'];

// 複数の要素を追加
fruits.push('banana', 'grape', 'strawberry');

// 結果
console.log(fruits); // ['apple', 'orange', 'banana', 'grape', 'strawberry']

// 初期化
const mixedArray = [1, 'apple', true];

// 複数の要素を追加
mixedArray.push(false, 2.5, 'grape');

// 結果
console.log(mixedArray); // [1, 'apple', true, false, 2.5, 'grape']

// 初期化
const numbers = [];

// 複数回push
numbers.push(10);
numbers.push(20, 30);
numbers.push(40, 50, 60);

// 結果
console.log(numbers); // [10, 20, 30, 40, 50, 60]

JavaScriptで配列に複数の要素をプッシュするその他の方法

concatメソッド

concatメソッドは、2つ以上の配列を結合して新しい配列を作成します。このメソッドを使用して、既存の配列に複数の要素を追加することもできます。

構文

array1.concat(array2, ..., arrayN);

array2, ..., arrayN: 結合する配列をカンマ区切りで指定します。

結合された新しい配列を返します。

// 初期化
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

// concatメソッドを使用して結合
const numbers = numbers1.concat(numbers2);

// 結果
console.log(numbers); // [1, 2, 3, 4, 5, 6]

元の配列を変更しないという利点があります。
複数の配列を結合する際に便利です。

スプレッド構文

スプレッド構文は、イテレータブルなオブジェクトを展開して、個々の要素をカンマ区切りの引数として渡す構文です。配列に要素を追加する場合にも使用できます。

array.push(...iterable);

iterable: 展開するイテレータブルなオブジェクトを指定します。配列、文字列、ジェネレータなどがこれに該当します。

// 初期化
const numbers = [1, 2, 3];
const newNumbers = [4, 5, 6];

// スプレッド構文を使用して要素を追加
numbers.push(...newNumbers);

// 結果
console.log(numbers); // [1, 2, 3, 4, 5, 6]