JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで既存の配列を別の配列で拡張する方法｜concat()の使い方を解説

配列を別の配列で拡張するには？

JavaScriptで既存の配列に別の配列を結合して拡張したい場合は、Array.concat()メソッドを使用します。concat()は、元の配列を変更することなく、複数の配列や値をつなげた新しい配列を返すのが特徴です。

サンプルコード

以下は、既存の配列numbersに別の配列numbers2をconcat()で結合する例です。

<html>
  <head>
    <title>JavaScript Array concat Method</title>
  </head>
  <body>
    <script>
      var numbers = new Array(1, 4, 9);
      var numbers2 = new Array(2, 5);

      // numbers2 を numbers の末尾に結合
      numbers = numbers.concat(numbers2);

      document.write("new numbers is : " + numbers);
    </script>
  </body>
</html>

実行結果

new numbers is : 1,4,9,2,5

ポイント：元の配列は変更されない

concat()は非破壊的なメソッドのため、呼び出し元の配列はそのまま維持され、結合結果が格納された新しい配列が生成されます。そのため、上の例では結果を変数numbersに再代入しています。

モダンな代替手段：スプレッド構文

ES2015（ES6）以降では、スプレッド構文（...）を使うことで、より簡潔に配列を結合できます。

const numbers = [1, 4, 9];
const numbers2 = [2, 5];

// 新しい配列を作成して結合
const merged = [...numbers, ...numbers2];
console.log(merged); // [1, 4, 9, 2, 5]

また、既存の配列そのものを変更したい場合は、push()メソッドとスプレッド構文を組み合わせる方法もあります。

numbers.push(...numbers2); // numbers 自体が [1, 4, 9, 2, 5] になる

用途に応じて、新しい配列を作りたいならconcat()やスプレッド構文、元の配列を直接更新したいならpush()を使い分けるとよいでしょう。なお、document.write()は現在では非推奨とされているため、実際の開発ではconsole.log()などでの確認をおすすめします。

  1. JavaScriptでオブジェクトが配列かどうか判定する方法！Array.isArray()の使い方を実例付きで解説

    JavaScriptであるオブジェクトが配列（Array）なのか、それとも別のオブジェクトなのかを判別したい場面はよくあります。そんなときに便利なのが Array.isArray() メソッドです。Array.isArray() は、引数に渡した値が配列であれば true を、そうでなければ false を返すメソッドです。この戻り値のブール値（Boolean）を確認することで、対象が配列かどうかを簡単に判定できます。Array.isArray() の基本構文Array.isArray(value)value：判定したいオブジェクトや値戻り値：配列なら true、それ以外は falsetype

  2. JavaScriptで配列の要素を同じ配列内に複製する方法

    JavaScriptでは、concat()メソッドとsort()メソッドを組み合わせることで、既存の配列の要素を同じ配列内に複製することができます。ここでは、実際に動作するサンプルコードを使って、その手順をわかりやすく解説します。 コード例 以下は、配列の要素を同じ配列内に複製するためのコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont