モダンな配列の結合の方法について

TypeScriptやJavaScriptで配列を結合する場合に様々な方法があるかと思います。

concatやpushなどを使うことで配列を結合できるかと思いますがスプレッド演算子を使うことでより簡潔に配列を結合することができます。

シンプルな結合

2つの配列をそのまま結合する場合、以下のように記述することで簡潔に結合することができます。

const array1: number[] = [1, 2, 3];
const array2: number[] = [4, 5, 6];
const result: number[] = [...array1, ...array2];

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

データ加工を含む結合

array1は2で割り切れたら10倍し、array2は3で割り切れた場合に10倍をする加工を行う場合です。

それぞれの配列で別の加工が必要な場合にはそれぞれでfilterやmap等を使い加工をしてからそのまま結合をしてあげることでより簡潔に分かりやすく記述することができます。

const array1: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const array2: number[] = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

const array: number[] = [
  ...array1.filter((v) => v % 2 === 0)?.map((v) => v * 10)
, ...array2.filter((v) => v % 3 === 0)?.map((v) => v * 10)
]

console.log(array) // [20, 40, 60, 80, 100, 120, 150, 180] 

最後に

データの加工は良く行うと思いますのでシンプルに記述していきたいですね。