JavaScript で Splice を使用する方法: 配列メソッドを理解する

Splice は、既存の要素を削除または置換するか、新しい要素を追加することにより、配列の内容を変更する Javascript Array メソッドです。

このガイドでは、Javascript Array splice メソッドの使用方法について説明します。どのレベルの開発者でも、この記事を読んで理解できます。

配列メソッド (スプライス) を理解する

MDN Web サイトを見ると、Array() オブジェクトに新しいメソッドとプロパティを追加できる Javascript 配列プロトタイプ コンストラクターには多くのメソッドがあり、splice はその 1 つであることを理解できます。

Array.prototype.splice()

ただし、以下の例のように、文字列プロトタイプで同じメソッドを使用しようとすると、

const strings = 'learn'

strings.splice()

ただし、次のような型エラーを受け取ります。

Uncaught TypeError: strings.splice is not a function

スプライスとスライスは同じではないことに注意してください。 slice メソッドはデータを変更したり変更したりしませんが、 splice メソッドは変更します。これが、 splice メソッドを文字列で使用できない理由です。文字列は不変です。

Javascript 配列 splice メソッドの使用方法

splice Javascript 配列メソッドを使用するのは簡単ですが、構文が誤用されることがあります。

次の手順で splice メソッドを使用できます

arr.splice(start, deleteCount, item1, ..., itemN)

splice() プロパティはいくつかのパラメーターを受け取ります。これらのパラメーターは、splice メソッドが呼び出された配列の動作を決定するために使用されます。

それらは次のとおりです。

• 始める
• 削除数
• アイテム

始める

これは、配列が変更を開始するインデックスにすぎません。要素のインデックスが配列の長さよりも大きい場合、要素は削除されません。ただし、インデックスが配列の長さよりも小さい場合は、配列の末尾に引数が追加されます。

削除数

これは、配列から削除する要素の数を示すオプションのパラメーターです。要素を削除または削除するには、開始パラメーターが存在する必要があります。

このパラメーターを含めない場合、または配列の長さと同じ値を持つか、配列の長さよりもさらに大きい場合は、開始パラメーターから配列内の最後の項目までのすべての要素が削除されます。 item パラメータが存在する場合、このパラメータを含める必要があることに注意してください。

アイテム

これは、配列に追加する要素を示すオプションのパラメーターでもあります

要素を指定しないと、Javascript 配列の splice() メソッドが配列から要素を削除します。これは空の配列を返します。

ユースケース

パラメーターが何であるかを理解したので、プログラムを作成するときにこれを実装する方法の使用例と例を見てみましょう。

指定されたインデックスの前のゼロ要素を削除する

アイテムを削除せずに要素を追加したい場合は、インデックスを指定するだけで、指定されたインデックスの前に開始するだけで何も削除されません。

以下の例を見てみましょう。

const myMusic = ['piano', 'guitar', 'violin', 'orchestra'];

const removedElement = myMusic.splice(2, 0, 'drum');

// myMusic is [piano', 'guitar', 'drum', 'guitar', 'violin', 'orchestra']

// removedElement is empty [ ], no elements deleted

上記のコードでは、インデックス 3 (マンダリン) の要素を削除しようとしています。つまり、インデックス 3 に到達するとすぐに、見つかったアイテムは要素に置き換えずに削除されます。

1 つの要素を削除して、他の要素を追加することもできます。

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(3, 1, 'sax');

// myMusic is ['piano', 'guitar', 'drum', 'sax', 'orchestra']

// removedElement is ['violin']

同様に、インデックス 3 に到達するとすぐに、見つかったもの (この場合は「オーケストラ」) が削除され、新しいもの (「sax」) が追加されます。上記のコードは、「ドラム」が配列に追加された方法を示しています。 .インデックス 2 から始まるゼロは、何も削除しないことを示します。1 があれば、1 つの要素を削除し、必要な項目を追加します。以下同様です。

指定されたインデックスで 1 つまたは複数の要素を削除する

配列に新しいものを追加せずに、1 つの項目または要素を削除したいとします。前のコード スニペットのように記述できます。

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra'];

const removedElement = myMusic.splice(3, 1);

// myMusic is ['piano', 'guitar', 'drum', 'ochestra']

// removedElement is ['violin']

任意のインデックスから開始して、必要な数のアイテムを削除できます。

指定されたインデックスから始まるすべての要素を削除します

必要なインデックスから始まる配列内のすべての要素を削除できます。たとえば、インデックス 1 から始まるすべての要素を削除したいとします。インデックス 1 に到達すると、インデックス 1 から始まるすべての要素が削除されます。

const myMusic = ['piano', 'guitar', 'drum', 'violin', 'orchestra']

const removedElement = myMusic.splice(1);

// myMusic is ['piano', 'guitar']

// removedElement is ['drum', 'sax', 'ochestra']

このコード スニペットは、インデックス 1 から始まるすべての要素を削除しようとします。ここで、インデックス 1 は配列内の「ピエロ」です。カウントは 0 から始まるため、これは新しい配列を返します。 「天使」という要素が1つだけ含まれています。これは、カウント中に 'angel' がインデックス 0 にあるように見え、カウントがインデックス 1 から開始されるためです。インデックス 0 は省略され、その結果が返されます。

お持ち帰り

配列に対してタスクを実行する必要があり、元の配列を変更したくない場合は、データが変更されるため、Javascript 配列の splice() メソッドは避ける必要があります。

const beforeSplice = ['bread','fish','cook']

console.log(beforeSplice)

// ['bread', 'fish', 'cook']

const afterSpliceData = beforeSplice.splice(1)

console.log(afterSplice)

// ['fish', 'cook']

上記の例では。 splice Javascript 配列のメソッドが beforeSplice 変数で呼び出される前。 3 つの要素がありましたが、メソッドが適用されると、2 つの要素が返されます。このメソッドはデータを変更しました。時々、これは私たちが望むものではありません。しかし、単純に要素を削除したり、要素を追加したりしたいだけなら、それで完璧です。

次の機会にお会いしましょう。