JavaScriptで効率的に配列を操作して新しい配列を生成する方法

記事の内容
まとめ

記事の内容

配列はJavaScriptにおいて非常に便利なデータ構造であり、多くの操作が可能です。

本記事では、効率的に配列を操作して新しい配列を生成する方法について解説します。具体的なコード例もいくつか用意しましたので、ぜひ参考にしてください。

フィルタリングを活用した配列の操作

配列から特定の条件を満たす要素だけを抽出するフィルタリングは、新しい配列を生成する際によく用いられます。以下は、数値の配列から偶数だけを抽出する例です。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

マッピングを利用した要素の変換

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

要素の集約とリダクション

配列の要素を集約して、1つの値にまとめるリダクションもよく使われます。以下は、数値の配列を合計する例です。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

条件に基づく要素の検索

配列から特定の条件に合致する要素を検索する際には、findメソッドを使います。次の例では、配列から5より大きい最初の要素を見つけています。

const numbers = [1, 3, 5, 7, 9, 10];
const result = numbers.find(num => num > 5);
console.log(result); // 7

複数の配列の結合

複数の配列を結合して1つの新しい配列を作成する場合には、スプレッド演算子を利用します。以下は、2つの配列を結合する例です。

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

条件による配列の分割

条件に基づいて、1つの配列を複数の配列に分割する方法もあります。次の例では、数値の配列を奇数と偶数に分割しています。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const isEven = num => num % 2 === 0;
const [evenNumbers, oddNumbers] = numbers.reduce((acc, num) => {
  acc[isEven(num) ? 0 : 1].push(num);
  return acc;
}, [[], []]);
console.log(evenNumbers); // [2, 4, 6, 8, 10]
console.log(oddNumbers); // [1, 3, 5, 7, 9]