【JavaScript】配列arrayに要素を追加する方法

push()メソッドを使う方法

push()メソッドを使うことで、配列arrayの末尾に要素を追加することができます。

const array = ['a', 'b', 'c'];

array.push('d');

console.log(array); // ['a', 'b', 'c', 'd']

また、引数にカンマ区切りで複数の値を指定することで、一度に複数の値を追加することもできます。

const array = ['a', 'b', 'c'];

array.push('d', 'e');

console.log(array); // ['a', 'b', 'c', 'd', 'e']

unshift()メソッドを使う方法

unshift()メソッドを使うことで、配列arrayの先頭に要素を追加することができます。

const array = ['a', 'b', 'c'];

array.unshift('d');

console.log(array); // ['d', 'a', 'b', 'c']

unshift()メソッドでも、push()メソッドと同様に、一度に複数の値を追加することができます。

const array = ['a', 'b', 'c'];

array.unshift('d', 'e');

console.log(array); // ['d', 'e', 'a', 'b', 'c']

index番号を指定する方法

シンプルに、配列のindex番号を指定して要素を追加します。

const array = ['a', 'b', 'c'];

array[3] = 'd';

console.log(array); // ['a', ''b, 'c', 'd']

任意の長さの配列arrayに対しては、lengthプロパティを使うことで、push()メソッドのように配列arrayの末尾に要素を追加することができます。

const array = ['a', 'b', 'c'];
let len = array.length; // 配列の長さ

array[len] = 'd';

console.log(array); // ['a', 'b', 'c', 'd']

len = array.length; // 配列の長さを更新する
array[len] = 'e';

console.log(array); // ['a', 'b', 'c', 'd', 'e']

スプレッド構文を使う方法

JavaScriptのスプレッド構文を使って、配列arrayに要素を追加します。

const array = ['a', 'b', 'c'];

// 配列arrayの末尾に要素を追加する
const new_array = [...array, 'd']; // ['a', 'b', 'c', 'd']

console.log(new_array);

// 配列arrayの先頭に要素を追加する
const new_array_2 = ['d', ...array]; // ['d', 'a', 'b', 'c']

console.log(new_array_2);

JavaScriptのスプレッド構文については、以下の記事で解説しているのでぜひご覧ください。

【JavaScript】スプレッド構文について理解を深める

スプレッド構文とは JavaScriptでドットが3つ並んだコード「 ... 」を見かけることがありますが、これをスプレッド構文と呼びます。 スプレッド構文を使用することで、オブジェクトを展開したり結合したりすることができます。 とは言って...

maaengineerhouse.com