JavaScriptで配列メソッドを使用する方法：ミューテーターメソッド

序章

JavaScriptのArraysは、要素のリストで構成されています。 JavaScriptには、配列を操作するための便利な組み込みメソッドが多数あります。 元の配列を変更するメソッドはmutatorメソッドと呼ばれ、新しい値または表現を返すメソッドはアクセサーメソッドと呼ばれます。 このチュートリアルでは、ミューテイタメソッドに焦点を当てます。

このチュートリアルを最大限に活用するには、配列の作成、インデックス作成、変更、およびループにある程度精通している必要があります。これは、チュートリアルJavaScriptでの配列の理解で確認できます。

配列は文字列に似ており、どちらもインデックス番号を介してアクセスできる要素のシーケンスで構成されています。 ただし、文字列は不変のデータ型であり、変更できないことを覚えておくことが重要です。 一方、配列は変更可能です。つまり、多くの配列メソッドは、配列のコピーではなく、元の配列に影響を与えます。

このチュートリアルでは、要素の追加と削除、配列内の要素の反転、置換、その他の変更について説明します。

注：Array.prototypeはArrayオブジェクト自体を参照するため、配列メソッドはArray.prototype.method()として正しく記述されます。 簡単にするために、名前をmethod()と単純にリストします。

isArray（）

ミューテイタメソッドに入る前に、isArray()メソッドを見て、オブジェクトが配列であるかどうかをテストしましょう。 これはBooleanメソッドであり、変数の値が配列と等しい場合にtrueを返します。 オブジェクトが配列でない場合、このメソッドはfalseを返します。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Test if fish variable is an array
Array.isArray(fish);

Outputtrue

isArray()メソッドは便利です。これは、通常テストに使用するtypeof演算子が、配列で使用するとobjectを返し、オブジェクトとArrayオブジェクトが必要です。

isArray()は、ほとんどの配列メソッドとは異なる方法で記述されており、配列変数がメソッドの引数として提供されていることに注意してください。

オブジェクトが配列であることを確認する方法がわかったので、ミューテイタメソッドに移りましょう。

ポップ（）

最初に取り上げるミューテイタメソッドはpop()メソッドで、配列の最後から最後の要素を削除します。

fishアレイから始めます。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

最後のアイテムを削除するために、pop()メソッドを初期化してみましょう。 この場合、文字列リテラル"eel"になります。

// Use pop method to remove an item from the end of an array
fish.pop();

配列を呼び出して、最後の項目なしで配列が返されるようにします。

fish;

Output[ 'piranha', 'barracuda', 'koi' ]

fishアレイから"eel"を正常に削除しました。 pop()メソッドは、追加のパラメーターを取りません。

シフト（）

別のミューテイタメソッドであるshift()メソッドは、配列の先頭から最初の要素を削除します。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

shift()を使用して、インデックス0から"piranha"を削除し、残りのすべての要素を1つのインデックス番号だけ下にシフトします。

// Use shift method to remove an item from the beginning of an array
fish.shift();

fish;

Output[ 'barracuda', 'koi', 'eel' ]

この例では、"piranha"が削除され、各アイテムが1つのインデックス番号を下にシフトしています。 このため、他の配列要素はインデックス位置を維持するため、可能な限りpop()メソッドを使用することをお勧めします。

押す（）

push()ミューテイタメソッドは、配列の最後に1つまたは複数の新しい要素を追加します。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

最後に項目を追加するために、関数のパラメーターとして新しい要素を記述します。

// Use push method to add an item to the end of an array
fish.push("swordfish");

fish;

Output[ 'piranha', 'barracuda', 'koi', 'eel', 'swordfish' ]

配列に複数の新しい値を追加することもできます。 たとえば、fish.push("swordfish", "dragonfish")は、インデックス4および5にアイテムを追加します。

unshift（）

unshift()ミューテーター配列メソッドは、新しい要素を配列の先頭に追加します。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Use unshift method to add an item to the beginning of an array
fish.unshift("shark");

fish;

Output[ 'shark', 'piranha', 'barracuda', 'koi', 'eel' ]

上記の例では、"shark"がインデックス位置0に追加され、他のすべての配列要素が1つシフトされています。 shift()と同様に、複数のカンマ区切りの項目を一度に配列に追加できます。

pop()とpush()は配列の終わりに影響し、shift()とunshift()は配列の始まりに影響します。 これを覚える簡単な方法は、shift()とunshift()が返された配列のすべてのインデックス番号を変更することを覚えておくことです。

スプライス（）

splice()メソッドは、配列内の任意の位置にアイテムを追加または削除できます。 ミューテイタメソッドsplice()は、追加または削除するか、同時に追加および削除することができます。

splice()は、開始するインデックス番号、削除するアイテムの数、追加するアイテム（オプション）の3つのパラメーターを取ります。

splice(index number, number of items to remove, items to add)

splice(0, 0, "new")は、文字列"new"を配列の先頭に追加し、何も削除しません。

splice()が配列内のアイテムを追加および削除する方法について、以下のいくつかの例を見てみましょう。

splice()で追加

2番目のパラメーター（削除するアイテム）を0に設定すると、splice()はゼロのアイテムを削除します。 このように、任意のインデックス番号で始まるアイテムのみを追加することを選択できます。これにより、splice()はpush()またはunshift()よりも強力になります。配列の始まり。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Splice a new item number into index position 1
fish.splice(1, 0, "manta ray");

fish;

Output[ 'piranha', 'manta ray', 'barracuda', 'koi', 'eel' ]

新しい文字列"manta ray"が、インデックス1から始まる配列に追加されました。

splice()で削除

3番目のパラメーター（追加するアイテム）を空白のままにすると、配列内の任意のポイントからアイテムを削除できます。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Remove two items, starting at index position 1
fish.splice(1, 2);

fish;

Output[ 'piranha', 'eel' ]

配列から、インデックス1、"barracuda"で始まる2つのアイテムを削除しました。 2番目の引数を削除すると、配列の最後にあるすべての項目が削除されます。

splice()による追加と削除

すべてのパラメーターを一度に使用すると、配列にアイテムを追加したり、配列からアイテムを同時に削除したりできます。

これを示すために、上記と同じアイテムを削除し、それらの位置に新しいアイテムを追加しましょう。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Remove two items and add one
fish.splice(1, 2, "manta ray");

fish;

Output[ 'piranha', 'manta ray', 'eel' ]

splice()は、配列の任意の部分を変更するための強力な方法です。 splice()は、アレイのセクションのコピーを作成するアクセサアレイslice()と混同しないように注意してください。

逆行（）

reverse()メソッドは、配列内の要素の順序を逆にします。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

reverse()を使用すると、最後の要素が最初になり、最初の要素が最後になります。

// Reverse the fish array
fish.reverse();

fish;

Output[ 'eel', 'koi', 'barracuda', 'piranha' ]

reverse()配列メソッドにはパラメーターがありません。

塗りつぶし（）

fill()メソッドは、配列内のすべての要素を静的な値に置き換えます。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

fish配列には、4つのアイテムがあります。 fill()を適用してみましょう。

// Replace all values in the array with "shark"
fish.fill("shark");

fish;

Output[ 'shark', 'shark', 'shark', 'shark' ]

配列内の4つの項目はすべて、同じ値"shark"に置き換えられました。 fill()は、開始点と終了点のオプションの引数も取ります。

fish.fill("shark", 1) // > [ 'piranha', 'shark', 'shark', 'shark' ]
fish.fill("shark", 1, 3); // > [ 'piranha', 'shark', 'shark', 'eel' ]

fill()を使用すると、配列内の1つ以上の要素を静的な値に置き換えることができます。

選別（）

sort()メソッドは、要素の最初の文字に基づいて配列内の要素を並べ替えます。 最初の文字が同一である場合、それは行を続けて2番目の文字を比較します。

デフォルトでは、sort()は、すべて大文字または小文字の文字列の配列をアルファベット順に並べます。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

// Sort items in array
fish.sort();

fish;

Output[ 'barracuda', 'eel', 'koi', 'piranha' ]

sort()は最初のユニコード文字に基づいているため、小文字の前に大文字の項目を並べ替えます。

文字列の1つが大文字で始まるように、元の配列を変更してみましょう。

let fish = [ "piranha", "barracuda", "Koi", "eel" ];

fish.sort();

fish;

Output[ 'Koi', 'barracuda', 'eel', 'piranha' ]

数字は大文字と小文字の両方の前にあります。

配列を再度変更して、文字列アイテムの1つに数値を含めることができます。

let fish = [ "piranha", "barracuda", "Koi", "1 eel" ];

fish.sort();

Output[ '1 eel', 'Koi', 'barracuda', 'piranha' ]

sort()は、デフォルトでは数値の配列をサイズで並べ替えません。 代わりに、番号の最初の文字のみをチェックします。

let numbers = [ 42, 23, 16, 15, 4, 8 ];

numbers.sort();

Output[ 15, 16, 23, 4, 42, 8 ]

数値を正しくソートするために、引数として比較関数を作成できます。

// Function to sort numbers by size
const sortNumerically = (a, b) => {
  return a - b;
}

numbers.sort(sortNumerically);

Output[ 4, 8, 15, 16, 23, 42 ]

sortNumerically比較機能により、意図したとおりに並べ替えることができました。 sort()は、変更を元のアレイに適用します。

結論

このチュートリアルでは、JavaScriptの主要なミューテーター配列メソッドを確認しました。 ミューテイタメソッドは、アクセサメソッドのようにコピーを作成するのではなく、使用されている元の配列を変更します。 配列の最初または最後に要素を追加および削除する方法と、配列アイテムの値を並べ替え、反転、および置換する方法を学びました。

配列の基本を確認するには、JavaScriptでの配列についてをお読みください。 すべての配列メソッドの完全なリストを表示するには、Mozilla DeveloperNetworkの配列リファレンスを参照してください。