配列操作: JavaScript 配列メソッドを理解する

JavaScript の配列とは何ですか? JavaScript 配列は、要素のコレクションを格納できるデータ型です。これらの要素は、数値、文字列、オブジェクトなど、任意のデータ型にすることができます。 JavaScript の配列は動的です。つまり、作成後に要素を追加または削除できます。

このチュートリアルでは、すべての JavaScript 配列メソッドと、それらが実際にどのように適用されるかを調べます。

配列メソッドの種類

JavaScript 配列を操作する方法はいくつかあります。これらの方法のいくつかは次のとおりです。

1.連結()

このメソッドは、2 つ以上の配列をマージするために使用されます。元の配列を変更するのではなく、元の配列の要素を含む新しい配列を返します。

JavaScript で concat() を使用する方法の例を次に示します。

 const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const array3 = [7, 8, 9]; const mergedArray = array1.concat(array2, array3); // mergedArray is [1, 2, 3, 4, 5, 6, 7, 8, 9]

上記の例では、array1、array2、および array3 はすべて「mergedArray」と呼ばれる 1 つの配列にマージされます。 `concat()` は引数として任意の数の配列を取り、元の配列のすべての要素を含む新しい配列を返します。

`concat()` を使用して、配列を非配列値とマージすることもできます。例えば：

 const array1 = [1, 2, 3]; const mergedArray = array1.concat(4, 5, 6); // mergedArray is [1, 2, 3, 4, 5, 6]

この場合、値 4、5、および 6 が array1 の最後に追加され、「mergedArray」が作成されます。

`concat()` は元の配列を変更しないことに注意してください。代わりに、元の配列の要素を含む新しい配列を作成します。配列をその場で変更したい場合は、代わりに `push()` メソッドを使用できます。

2.結合()

このメソッドは、配列のすべての要素を文字列に結合するために使用されます。結果の文字列で配列の要素を区切るために使用する文字を指定するオプションの区切りパラメーターを使用します。セパレーターが指定されていない場合、要素はコンマで区切られます。

JavaScript で `join()` を使用する方法の例を次に示します。

 const array = ['apple', 'banana', 'orange']; const fruitString = array.join(); // fruitString is 'apple,banana,orange' const array = [1, 2, 3]; const numberString = array.join('-'); // numberString is '1-2-3'

最初の例では、配列の要素は、コンマを区切り文字として使用して 1 つの文字列に結合されます。 2 番目の例では、配列の要素が結合されて、ハイフンを区切り文字とする 1 つの文字列になります。

配列の配列で `join()` を使用して、ネストされた配列の文字列を作成することもできます。

 const array = [[1, 2], [3, 4], [5, 6]]; const nestedArrayString = array.join('-'); // nestedArrayString is '1,2-3,4-5,6'

`join()` は元の配列を変更しないことに注意してください。配列の要素を含む新しい文字列を作成します。配列をその場で変更したい場合は、代わりに `splice()` メソッドを使用できます。

3. ポップ()

このメソッドは、配列の最後の要素を削除して返すために使用されます。元の配列を変更します。

JavaScript で pop() を使用する方法の例を次に示します。

 const array = [1, 2, 3, 4, 5]; const lastElement = array.pop(); // lastElement is 5 // array is [1, 2, 3, 4]

この例では、`pop()` メソッドは配列から最後の要素 (5) を削除し、それを `lastElement` 変数に割り当てます。次に、配列を変更して最後の要素を削除し、長さ 4 のままにします。

`pop()` を他の配列メソッド (`push()` など) と組み合わせて使用して、配列の末尾に要素を追加することもできます。

 const array = [1, 2, 3]; array.push(4); array.pop(); // array is [1, 2, 3]

この例では、`push()` メソッドは要素 4 を配列の末尾に追加し、`pop()` メソッドはそれを再び削除して、配列を変更しません。

配列が空の場合、 pop() は undefined を返すことに注意してください。

 const array = []; const element = array.pop(); // element is undefined

4.プッシュ()

このメソッドは、配列の末尾に 1 つ以上の要素を追加するために使用されます。元の配列を変更し、配列の新しい長さを返します。

JavaScript で push() を使用する方法の例を次に示します。

 const array = [1, 2, 3]; const newLength = array.push(4, 5, 6); // array is [1, 2, 3, 4, 5, 6] // newLength is 6

この例では、push() メソッドは要素 4、5、および 6 を配列の末尾に追加し、配列の新しい長さ (6) を返します。次に、これらの要素を含むように配列が変更されます。

push() を使用して、要素の配列を別の配列の末尾に追加することもできます。

 const array = [1, 2, 3]; const newLength = array.push([4, 5, 6]); // array is [1, 2, 3, [4, 5, 6]] // newLength is 4

この例では、push() メソッドは、配列 [4, 5, 6] を単一要素として配列の末尾に追加し、配列の新しい長さ (4) を返します。

push() は元の配列を変更することに注意してください。元の配列の要素を含む新しい配列を作成する場合は、代わりに concat() メソッドを使用できます。

5.シフト()

このメソッドは、配列の最初の要素を削除して返すために使用されます。元の配列を変更します。

JavaScript で shift() を使用する方法の例を次に示します。

 const array = [1, 2, 3, 4, 5]; const firstElement = array.shift(); // firstElement is 1 // array is [2, 3, 4, 5]

この例では、shift() メソッドは配列から最初の要素 (1) を削除し、それを firstElement 変数に割り当てます。次に、配列を変更して最初の要素を削除し、長さ 4 のままにします。

shift() を unshift() などの他の配列メソッドと組み合わせて使用して、配列の先頭に要素を追加することもできます。

 const array = [1, 2, 3]; array.unshift(0); array.shift(); // array is [1, 2, 3]

この例では、unshift() メソッドによって要素 0 が配列の先頭に追加され、次に shift() メソッドによって要素 0 が再び削除され、配列は変更されません。

配列が空の場合、shift() は undefined を返すことに注意してください。

 const array = []; const element = array.shift(); // element is undefined

6. unshift()

このメソッドは、配列の先頭に 1 つ以上の要素を追加するために使用されます。元の配列を変更し、配列の新しい長さを返します。

JavaScript で unshift() を使用する方法の例を次に示します。

 const array = [1, 2, 3]; const newLength = array.unshift(4, 5, 6); // array is [4, 5, 6, 1, 2, 3] // newLength is 6

この例では、unshift() メソッドは要素 4、5、および 6 を配列の先頭に追加し、配列の新しい長さ (6) を返します。次に、これらの要素を先頭に含めるように配列が変更されます。

unshift() を使用して、要素の配列を別の配列の先頭に追加することもできます。

 const array = [1, 2, 3]; const newLength = array.unshift([4, 5, 6]); // array is [[4, 5, 6], 1, 2, 3] // newLength is 4

この例では、unshift() メソッドは、配列 [4, 5, 6] を単一要素として配列の先頭に追加し、配列の新しい長さ (4) を返します。

unshift() は元の配列を変更することに注意してください。元の配列の要素を含む新しい配列を作成する場合は、代わりに concat() メソッドを使用できます。

7.スライス()

このメソッドは、配列のセクションを抽出し、新しい配列を返すために使用されます。元の配列は変更されません。 slice メソッドは、開始インデックスと終了インデックスの 2 つのオプションのパラメーターを取ります。

開始インデックスが指定されていない場合、デフォルトで配列の開始になります。終了インデックスが指定されていない場合、デフォルトで配列の最後になります。

JavaScript で slice() を使用する方法の例を次に示します。

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(1, 3); // slice is [2, 3] // array is [1, 2, 3, 4, 5] (unchanged)

この例では、slice() メソッドはインデックス 1 と 2 (2 と 3) の要素を配列から抽出し、slice という新しい配列で返します。元の配列は変更されません。

開始インデックスを示す引数を 1 つ指定して、slice() を使用することもできます。

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(2); // slice is [3, 4, 5] // array is [1, 2, 3, 4, 5] (unchanged)

この場合、slice() メソッドは、インデックス 2 (両端を含む) から配列の末尾まで、配列のすべての要素を抽出します。

配列の末尾に対する要素の位置を示す、slice() で負のインデックスを使用することもできます。

 const array = [1, 2, 3, 4, 5]; const slice = array.slice(-2); // slice is [4, 5] // array is [1, 2, 3, 4, 5] (unchanged)

この場合、slice() メソッドは配列の最後の 2 つの要素を抽出します。

開始インデックスが終了インデックスより大きい場合、slice() は空の配列を返すことに注意してください。

8.スプライス()

JavaScript の splice() メソッドは、配列から要素を追加または削除し、削除された要素を新しい配列として返すために使用されます。元の配列を変更します。

splice() メソッドは、開始インデックスと削除カウントの少なくとも 2 つの引数を取ります。開始インデックスはスプライスが開始するインデックスであり、削除カウントは削除される要素の数です。

splice() を使用して配列から要素を削除する方法の例を次に示します。

 const array = [1, 2, 3, 4, 5]; const removedElements = array.splice(1, 2); // removedElements is [2, 3] // array is [1, 4, 5]

この例では、splice() メソッドはインデックス 1 と 2 (2 と 3) の要素を配列から削除し、removedElements という新しい配列で返します。これらの要素を削除するために、元の配列が変更されます。

splice() を使用して要素を配列に追加することもできます。

 const array = [1, 2, 3]; const removedElements = array.splice(1, 0, 4, 5, 6); // removedElements is [] // array is [1, 4, 5, 6, 2, 3]

この場合、splice() メソッドは要素 4、5、および 6 を配列のインデックス 1 に追加し、削除カウントは 0 であるため、要素は削除されません。元の配列は、これらの要素を含むように変更されます。

splice() を使用して、要素の追加と削除を同時に行うこともできます。

 const array = [1, 2, 3, 4, 5]; const removedElements = array.splice(1, 2, 6, 7); // removedElements is [2, 3] // array is [1, 6, 7, 4, 5]

この例では、splice() メソッドは、配列からインデックス 1 と 2 (2 と 3) の要素を削除し、同じインデックスに要素 6 と 7 を追加します。元の配列は、追加された要素を含み、削除された要素を削除するように変更されます。

開始インデックスが配列の長さより大きい場合、 splice() は要素を追加または削除せず、単に空の配列を返すことに注意してください。

9.リバース()

このメソッドは、配列内の要素の順序を逆にするために使用されます。元の配列を変更します。

JavaScript で reverse() を使用する方法の例を次に示します。

 const array = [1, 2, 3, 4, 5]; array.reverse(); // array is [5, 4, 3, 2, 1]

この例では、reverse() メソッドは配列内の要素の順序を逆にして、最初の要素が最後になり、最後の要素が最初になるようにします。

オブジェクトの配列で reverse() を使用することもできます。

 const array = [{id: 1}, {id: 2}, {id: 3}]; array.reverse(); // array is [{id: 3}, {id: 2}, {id: 1}]

この場合、reverse() メソッドは、配列内のオブジェクトの順序を逆にします。

reverse() は元の配列を変更することに注意してください。元の配列を逆にした新しい配列を作成したい場合は、slice() メソッドと reverse() メソッドを一緒に使用できます。

 const array = [1, 2, 3, 4, 5]; const reversedArray = array.slice().reverse(); // reversedArray is [5, 4, 3, 2, 1] // array is [1, 2, 3, 4, 5] (unchanged)

この例では、slice() メソッドは配列の浅いコピーを作成し、reverse() メソッドはコピー内の要素を逆にして、元の配列を変更しません。

10.ソート()

このメソッドは、配列の要素をその場でソートするために使用されます。オプションの比較関数をパラメーターとして取ることができるため、カスタムの並べ替えアルゴリズムを指定できます。比較関数が提供されていない場合、要素は Unicode コード ポイントに従って昇順で並べ替えられます。

JavaScript で sort() を使用する方法の例を次に示します。

 const array = [5, 2, 4, 1, 3]; array.sort(); // array is [1, 2, 3, 4, 5]

この例では、sort() メソッドは配列の要素を昇順でソートします。

sort() を引数として比較関数とともに使用して、カスタムの並べ替え順序を指定することもできます。

 const array = [{name: 'John'}, {name: 'Jane'}, {name: 'Bob'}]; array.sort((a, b) => a.name.localeCompare(b.name)); // array is [{name: 'Bob'}, {name: 'Jane'}, {name: 'John'}]

この場合、sort() メソッドは、localeCompare() メソッドを使用して、name プロパティに基づいて配列内のオブジェクトをソートします。 sort() は元の配列を変更することに注意してください。

また、デフォルトでは、sort() は配列の要素を文字列に変換し、Unicode ポイント値に基づいて並べ替えます。これにより、文字列以外の値に対して予期しない結果が生じる可能性があります。例えば：

 const array = [10, 5, 8, 1, 7]; array.sort(); // array is [1, 10, 5, 7, 8]

この場合、sort() メソッドは数値を並べ替える前に文字列に変換するため、結果の配列は数値順ではありません。配列を数値順に並べ替えるには、sort() の引数として比較関数を使用できます。

 const array = [10, 5, 8, 1, 7]; array.sort((a, b) => a - b); // array is [1, 5, 7, 8, 10]

配列の要素を降順で並べ替えたい場合は、次の比較関数を sort() の引数として使用できます。

 const array = [5, 2, 4, 1, 3]; array.sort((a, b) => b - a); // array is [5, 4, 3, 2, 1]

結論

これらは、JavaScript で配列を操作するために使用できる多くのメソッドのほんの一部です。これが役立つことを願っています！他にご不明な点がございましたら、お問い合わせください。