開発者ドキュメント

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

序章

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

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

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

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

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

isArray()

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

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

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

The 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' ]

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

シフト()

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

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

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

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

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

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

押す()

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

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") インデックスにアイテムを追加します 45.

unshift()

The 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() 返された配列のすべてのインデックス番号を変更します

スプライス()

The 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' ]

インデックスから始めて、配列から2つのアイテムを削除しました 1, "barracuda". 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() 配列のセクションのコピーを作成するアクセサ配列。

逆行()

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

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

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

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

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

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

塗りつぶし()

The 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つ以上の要素を静的な値に置き換えることができます。

選別()

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

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

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

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

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

以来 sort() 最初のUnicode文字に基づいており、小文字の前に大文字の項目をソートします。

文字列の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 ]

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

結論

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

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

モバイルバージョンを終了