JavaScriptのconcatメソッドの使い方!配列要素を結合する

JavaScript

JavaScriptで配列を結合するconcatメソッドについて解説します。

concatメソッドを使うことで、複数の配列を結合して新しい配列を作成することができます。
元の配列は変更されないため、安全に結合処理を行うことができます。

実際に動くサンプルを使って、以下の操作を解説します。

・`concat()`メソッドの基本的な使い方
・複数の配列を結合する
・配列と値を結合する
・`concat()`メソッドを使うメリット

関連記事:JavaScriptで配列を結合する方法3選!

concatメソッドの基本的な使い方

concatメソッドは、配列に他の配列や値を追加して新しい配列を作成します。
基本的な構文は以下のとおりです。

array.concat(value1, value2, ..., valueN)

value1, value2, …, valueNには、結合したい配列または値を指定します。

配列と配列を結合する

concatメソッドを使って、複数の配列を結合する例を見てみましょう。

const array1 = [1, 2];
const array2 = [3, 4];
const array3 = [5, 6];

const newArray = array1.concat(array2, array3);
console.log(newArray); // 結果:[1, 2, 3, 4, 5, 6]
console.log(array1); // 結果:[1, 2] (元の配列は変更されない)

array1array2array3という3つの配列を作成し、concatメソッドを使って結合しています。
concatメソッドは新しい配列を返すため、元の配列(array1)は変更されません。

配列と値を結合する

concatメソッドは、配列だけでなく、値も結合することができます。

const array = [1, 2];
const newValue = 3;

const newArray = array.concat(newValue, 4, [5, 6]);
console.log(newArray); // 結果:[1, 2, 3, 4, 5, 6]
console.log(array); // 結果:[1, 2] (元の配列は変更されない)

配列arrayに値newValue(3)と数値4、配列[5, 6]を結合しています。
このように、配列と値を組み合わせて結合することも可能です。

concatメソッドを使うメリット

concatメソッドを使う主なメリットは以下のとおりです。

  • 元の配列を変更しない: concat()メソッドは新しい配列を返すため、元の配列が変更される心配がありません。
  • 複数の配列や値を一度に結合できる: 複数の配列や値を引数に指定することで、一度の操作で結合処理を行うことができます。
  • 簡潔な記述: 結合処理を簡潔に記述できるため、コードの可読性が向上します。

JavaScriptのconcatメソッドの使い方まとめ

今回はJavaScriptのconcatメソッドの使い方について解説しました。
記事の内容をまとめます。

・`concat()`メソッドは、配列に他の配列や値を結合して新しい配列を作成する。
・複数の配列や値を一度に結合できる。
・元の配列は変更されない。(pushメソッドを使うと変更される)
・簡潔な記述で可読性が高い。

コメント

タイトルとURLをコピーしました