JavaScript で配列に要素を追加する

1. JavaScript で配列の .length プロパティを使用して配列内の要素を追加する
2. JavaScript で push() メソッドを使用して配列内の要素を追加する
3. unshift() メソッドを使用して、配列内の要素を追加する
4. splice() メソッドを使用して、配列内の要素を追加する
5. concat() メソッドを使用して、配列内の要素を追加する
6. spread 構文を使用して、配列内の要素を追加する

この記事では、JavaScript で配列に要素を追加する方法を学習します。

JavaScript で配列に要素を追加する方法はいくつかあります。単一の要素、複数の要素を追加したり、配列全体を特定の配列に追加したりすることもできます。変更するかどうか、速度と効率の要件、コードの可読性に応じて、メソッドを使用できます。

JavaScript で配列の .length プロパティを使用して配列内の要素を追加する

これは、配列の全長を使用して配列の最後の空のインデックスを取得し、そのインデックスに要素を挿入する古典的なアプローチです。この方法は最も使いやすく、優れた効率を提供します。一度に追加できる要素は 1つだけです。元の配列を変更するため、これは変更可能な方法です。

let arr = [0, 1, 2];
arr[arr.length] = 3;
console.log(arr);

出力：

[0, 1, 2, 3]

上記のコードでは、arr.length を 3 として使用して配列の最後のインデックスを取得し、それらのインデックスに要素を追加します。

JavaScript で push() メソッドを使用して配列内の要素を追加する

push() メソッドは、配列の最後に要素を追加するために使用されます。単一の要素、複数の要素、または配列を追加することもできます。これは最も単純で最も速いオプションの 1つであり、場合によっては大きな配列で Array.length を使用する上記の方法よりも優れています。.push() によって実行されるアクションは、.pop() メソッドによって元に戻すことができます。複数の要素が一緒に渡される場合、それらの順序は push() 演算子によって保持されます。このメソッドは配列も変更するため、変更可能です。

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.push(4);        // single item
arr.push(5, 6, 7);  // multiple items
arr.push(...arr2);  // spread operator
console.log(arr);

出力：

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

上記のコードでは、すべての 3 のケースを示しました。spread 構文を使用して、単一の要素、複数の要素、さらには配列全体を追加します。すべての要素は配列の最後に追加されます。

unshift() メソッドを使用して、配列内の要素を追加する

unshift() メソッドは、配列の先頭に要素を追加するのに役立ちます。配列の新しい長さを返します。プロパティ内の配列に似たオブジェクトを呼び出したり、オブジェクトに適用したりできます。複数の要素が一緒に渡される場合、それらの順序は unshift() 演算子によって保持されます。このメソッドは配列も変更するため、変更可能です。

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.unshift(4);        // single item
arr.unshift(5, 6, 7);  // multiple items
arr.unshift(...arr2)   // spread operator
console.log(arr);

出力：

[8, 9, 10, 5, 6, 7, 4, 1, 2, 3]

上記のコードでは、3つのケースすべてを示しました。単一の要素、複数の要素、さらにはスプレッド構文を使用した配列全体の追加です。この操作が push() とどのように異なるかに注意してください。すべての要素が配列の先頭に追加されます。

splice() メソッドを使用して、配列内の要素を追加する

splice() メソッドは、要素を追加/削除することで配列の内容を変更できます。次の 3 引数を取ります：

1. index：要素を追加/削除する位置を指定する整数値。負のインデックスを使用して、配列の後ろからインデックスを指定することもできます。
2. howmany：これはオプションのパラメーターです。配列から削除するアイテムの数を指定します。0 に設定されている場合、アイテムは削除されません。
3. item1, item2, ... ,itemx：配列に追加されるアイテム。

このメソッドは配列も変更するため、変更可能です。

const arr = [1, 2, 3, 4, 5];
arr.splice(4, 3, 7, 8, 9);
console.log(arr);

出力：

[1, 2, 3, 4, 7, 8, 9]

上記のコードでは、インデックス 4 を選択し、そのインデックスに 3 要素 7,8,9 を追加しました。

concat() メソッドを使用して、配列内の要素を追加する

concat() メソッドは、配列を入力として受け取り、それらを連結します。つまり、1つの配列を受け取り、残りをその末尾に追加します。ただし、この演算子は元の配列を変更せず、結合された結果を含むまったく新しい配列を返します。2つ以上の配列を取り、それらを連結することができます。このメソッドは指定された配列を変更しないため、非変異型です。

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = arr.concat(arr2);
console.log(arr3);

出力：

[1, 2, 3, 8, 9, 10]

上記のコードでは、arr と arr2 の 2つの配列を取得し、concat() 関数を呼び出してそれらを連結し、新しい配列 arr3 を形成します。

spread 構文を使用して、配列内の要素を追加する

スプレッド構文を使用して、特定の配列に完全な配列を追加できます。配列要素を新しい配列に分散するだけなので、これは非変異型の方法です。これは、concat() 操作と非常によく似ています。これは、コピーを作成したり、2つの分離された配列をマージしたりするのに役立ちます。スプレッド構文を慎重に使用することが重要です。構文 const arr = [arr1, arr2]; を使用する場合 2つのサブ配列を含むネストされた配列を取得しますが、arr=[...arr1 , ...arr2]; を使用すると両方の配列の要素を連結します。

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = [...arr, ...arr2];

出力：

[1, 2, 3, 8, 9, 10]

上記のコードでは、spread 演算子を使用して、2つの配列 arr と arr2 を新しい配列 arr3 に追加しました。

上記のすべてのメソッドは、spread 構文を除くすべての主要なブラウザーでサポートされています。Internet Explorer は、スプレッド構文をサポートしていません。