配列に要素を追加：push、unshift、concat メソッド徹底解説

2024-04-05

JavaScriptで配列に要素を追加する方法

push() メソッドを使う

概要: 配列の末尾に要素を追加します。

例:

const fruits = ["apple", "banana", "orange"];

// "mango" を配列の末尾に追加
fruits.push("mango");

console.log(fruits); // ["apple", "banana", "orange", "mango"]

メリット:

シンプルで使いやすい

配列の先頭に要素を追加したい場合は使えない

unshift() メソッドを使う

const fruits = ["apple", "banana", "orange"];

// "mango" を配列の先頭に追加
fruits.unshift("mango");

console.log(fruits); // ["mango", "apple", "banana", "orange"]

concat() メソッドを使う

概要: 複数の配列を結合して新しい配列を作成します。

const fruits = ["apple", "banana", "orange"];
const vegetables = ["tomato", "cucumber", "carrot"];

// fruits と vegetables を結合して新しい配列を作成
const allFoods = fruits.concat(vegetables);

console.log(allFoods); // ["apple", "banana", "orange", "tomato", "cucumber", "carrot"]

複数の配列を結合したい場合に便利

スプレッド構文を使う

概要: 配列を展開して、別の配列に追加することができます。

const fruits = ["apple", "banana", "orange"];
const newFruits = ["mango", ...fruits];

console.log(newFruits); // ["mango", "apple", "banana", "orange"]

簡潔でモダンな書き方

古いブラウザではサポートされていない

JavaScriptで配列に要素を追加するには、いくつかの方法があります。それぞれの方法のメリットとデメリットを理解して、状況に応じて使い分けることが重要です。

// 1. push() メソッドを使う

const fruits = ["apple", "banana", "orange"];

// "mango" を配列の末尾に追加
fruits.push("mango");

console.log(fruits); // ["apple", "banana", "orange", "mango"]

// 2. unshift() メソッドを使う

const fruits = ["apple", "banana", "orange"];

// "mango" を配列の先頭に追加
fruits.unshift("mango");

console.log(fruits); // ["mango", "apple", "banana", "orange"]

// 3. concat() メソッドを使う

const fruits = ["apple", "banana", "orange"];
const vegetables = ["tomato", "cucumber", "carrot"];

// fruits と vegetables を結合して新しい配列を作成
const allFoods = fruits.concat(vegetables);

console.log(allFoods); // ["apple", "banana", "orange", "tomato", "cucumber", "carrot"]

// 4. スプレッド構文を使う

const fruits = ["apple", "banana", "orange"];
const newFruits = ["mango", ...fruits];

console.log(newFruits); // ["mango", "apple", "banana", "orange"]

このコードを実行すると、次のような出力が得られます。

["apple", "banana", "orange", "mango"]
["mango", "apple", "banana", "orange"]
["apple", "banana", "orange", "tomato", "cucumber", "carrot"]
["mango", "apple", "banana", "orange"]

配列に要素を追加する方法は、他にもいくつかあります。
上記のコードは、あくまでもサンプルです。実際の使用例に合わせて、コードを修正してください。

JavaScriptで配列に要素を追加するその他の方法

splice() メソッドを使う

概要: 配列の指定位置に要素を追加したり、削除したりすることができます。

const fruits = ["apple", "banana", "orange"];

// 配列の2番目の要素の後に "mango" を挿入
fruits.splice(2, 0, "mango");

console.log(fruits); // ["apple", "banana", "mango", "orange"]

配列の任意の位置に要素を追加できる

他の方法に比べて少し複雑

for ループを使う

概要: for ループを使って、配列の末尾に要素を追加することができます。

const fruits = ["apple", "banana", "orange"];

// 配列の末尾に "mango" を追加
for (let i = 0; i < fruits.length; i++) {
  if (i === fruits.length - 1) {
    fruits.push("mango");
  }
}

console.log(fruits); // ["apple", "banana", "orange", "mango"]

forEach() メソッドを使う

const fruits = ["apple", "banana", "orange"];

// 配列の末尾に "mango" を追加
fruits.forEach((fruit, index) => {
  if (index === fruits.length - 1) {
    fruits.push("mango");
  }
});

console.log(fruits); // ["apple", "banana", "orange", "mango"]