JavaScript: 配列に要素を追加 - push() メソッド vs reduce() メソッド

2024-04-02

JavaScriptで既存の配列を別の配列で拡張する方法

concat() メソッドは、複数の配列を結合して新しい配列を作成します。このメソッドを使うと、既存の配列の末尾に別の配列の要素を追加することができます。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
const arr3 = arr1.concat(arr2);

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

スプレッド構文は、配列の要素を個別に展開することができます。この構文を使うと、既存の配列の末尾に別の配列の要素を追加することができます。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
const arr3 = [...arr1, ...arr2];

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

Array.prototype.push() メソッドは、配列の末尾に要素を追加することができます。このメソッドを使うと、別の配列の要素を個別に既存の配列に追加することができます。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
for (const element of arr2) {
  arr1.push(element);
}

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

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
const arr3 = arr2.reduce((acc, element) => {
  acc.push(element);
  return acc;
}, arr1);

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

JavaScriptで既存の配列を別の配列で拡張するには、いくつかの方法があります。どの方法を使うかは、状況によって異なります。

簡単な方法としては、concat() メソッドを使う方法です。
スプレッド構文を使うと、より簡潔にコードを書くことができます。
Array.prototype.push() メソッドを使うと、より柔軟にコードを書くことができます。
reduce() メソッドを使うと、より関数的なコードを書くことができます。

どの方法を使うにしても、パフォーマンスや可読性を考慮して選択することが重要です。

concat() メソッドを使う

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
const arr3 = arr1.concat(arr2);

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

スプレッド構文を使う

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
const arr3 = [...arr1, ...arr2];

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

Array.prototype.push() メソッドを使う

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
for (const element of arr2) {
  arr1.push(element);
}

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

reduce() メソッドを使う

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
const arr3 = arr2.reduce((acc, element) => {
  acc.push(element);
  return acc;
}, arr1);

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

他の方法

for ループを使って、別の配列の要素を個別に既存の配列に追加することができます。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
for (let i = 0; i < arr2.length; i++) {
  arr1.push(arr2[i]);
}

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

forEach() メソッドを使って、別の配列の要素を個別に処理することができます。このメソッドを使うと、既存の配列に要素を追加することができます。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
arr2.forEach((element) => {
  arr1.push(element);
});

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

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 新しい配列を作成
const arr3 = arr2.map((element) => {
  return element + 1;
});

console.log(arr3); // [5, 6, 7]