JavaScript配列挿入-プッシュ、シフト解除、および連結関数を使用して配列に追加する方法

JavaScript配列は、簡単に私のお気に入りのデータ型の1つです。それらは動的で使いやすく、利用できる組み込みメソッドを多数提供します。

ただし、オプションが多ければ多いほど、どちらを使用するかを決めるのが混乱する可能性があります。

この記事では、JavaScript配列に要素を追加する一般的な方法について説明します。

プッシュ方式

遭遇する最初の、そしておそらく最も一般的なJavaScript配列メソッドはpush()です。push()メソッドは、配列の最後に要素を追加するために使用されます。

要素の配列があり、各要素が実行する必要のあるタスクを表す文字列であるとします。以前のタスクを最初に完了することができるように、配列の最後に新しいアイテムを追加することは理にかなっています。

コード形式の例を見てみましょう。

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

了解しました。pushにより、配列の最後に項目を追加するための素晴らしくシンプルな構文が得られました。

リストに一度に2つまたは3つのアイテムを追加したいとします。それでは、どうしますか?結局のところ、push()は、一度に追加される複数の要素を受け入れることができます。

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

配列にさらにいくつかのタスクを追加したので、プレートに多すぎるかどうかを判断するために、現在配列にあるアイテムの数を知りたい場合があります。

幸い、push()には、要素が追加された後の配列の長さを示す戻り値があります。

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

アンシフトメソッド

すべてのタスクが同じように作成されるわけではありません。配列にタスクを追加しているときに、突然、他のタスクよりも緊急性の高いタスクに遭遇するシナリオに遭遇する可能性があります。

配列の先頭に項目を追加できる友人のunshift()を紹介します。

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

上記の例では、push()メソッドと同様に、unshift()が使用する新しい配列の長さを返すことに気付くかもしれません。また、一度に複数の要素を追加することもできます。

Concatメソッド

concatenate(一緒にリンクする)の略で、concat()メソッドは2つ(またはそれ以上)の配列を結合するために使用されます。

上から覚えているなら、unshift ()メソッドとpush()メソッドは新しい配列の長さを返します。一方、concat()は、完全に新しい配列を返します。

これは非常に重要な違いであり、変更したくない配列(React状態で格納されている配列など)を処理する場合にconcat()を非常に便利にします。

かなり基本的で単純なケースは次のようになります。

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

一緒に結合したい複数の配列があるとしましょう。心配いりません、concat()はその日を救うためにあります!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

Concatによるクローニング

concat()は、既存の配列を変更したくない場合に役立つと言ったことを覚えていますか?この概念を活用して、ある配列の内容を新しい配列にコピーする方法を見てみましょう。

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

驚くばかり!基本的に、concat()を使用して配列を「複製」できます。

しかし、このクローン作成プロセスには小さな「落とし穴」があります。新しい配列は、コピーされた配列の「浅いコピー」です。これは、実際のオブジェクトではなく、参照によってオブジェクトがコピーされることを意味します。

この考えをより明確に説明するために例を見てみましょう。

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

元の配列に直接変更を加えなかったとしても、配列は最終的に、複製された配列に加えた変更の影響を受けました。

There are multiple different ways to properly do a "deep clone" of an array, but I will leave that for you as homework.

TL;DR

When you want to add an element to the end of your array, use push(). If you need to add an element to the beginning of your array, try unshift(). And you canadd arrays together using concat().

There are certainly many other options for adding elements to an array, and I invite you to go out and find some more great array methods!

Feel free to reach out to me on Twitter and let me know your favorite array method for adding elements to an array.