JavaScriptスプライス:JavaScriptスプライスとは何ですか?何ができますか?

ソースノード: 1402106

試してみたいレストランのリストがあり、最終的にそのうちの XNUMX つで夕食をとった後、そのレストランをリストから外すだけでなく、完全に削除したいと考えているとします。

そこで、試したことのあるレストランを削除すると、元のリストにはまだ試していないレストランだけが表示されます。 ここでは、JavaScript splice でできることの XNUMX つについて説明しました。

JavaScript の splice メソッドとは何ですか?また、何ができるのですか?

さて、少しバックアップしましょう。 JavaScript splice でできることについて説明しましたが、それは正確には何でしょうか?

JavaScript splice() メソッドは、JavaScript 配列関数の組み込みメソッドです。 Splice は、要素を削除、置換、または追加することにより、元の配列を変更します。 戻り値は、削除された要素を含む新しい配列です。 要素が削除されない場合は、空の配列が返されます。 JavaScript スプライスの基本構文は次のとおりです。


Array.splice(start, removeCount, newItem, newItem, newItem, ...)

JavaScript スプライスを使用して配列から要素を削除する方法

JavaScript スプライスを使用して配列から要素を単純に削除するには、削除する要素のインデックス番号を知っている必要があります。

このチュートリアルの冒頭で取り上げた例に戻ります。 レストランのやりたいことリストが A、B、C、D で構成されているとします。これが元の配列になります。 私たちが試したレストランは D です。D を削除するには、そのインデックス番号を知る必要があります。 配列のインデックスは 0 から始まるため、インデックスは (X-1) になります。 この場合、インデックス番号は 3 になります。

ここで、JavaScript のスライス メソッドを使用して、元の配列から既に訪問したレストランを削除できます。
const レストラン = [“A”、“B”、“C”、“D”]

console.log(restaurants.splice(3, 1)) // 出力: [“D”]
console.log(restaurants) // 出力: [“A”, “B”, “C”]
「 `

ここでは、元の配列が XNUMX つに結合されていることがわかります。XNUMX つは残りの要素を含む元の配列で、戻り値は削除された要素を含む配列です。

JavaScript スプライスを使用して配列から要素を削除する方法の詳細については、以下を参照してください。 このブログ記事.

JavaScript スプライスを使用して配列に要素を追加する方法

JavaScript スプライスを使用して、配列に新しい要素を追加することもできます。 完全なスプライス構文を念頭に置いて、新しい要素を宣言する前に、削除する要素の数を「0」として定義することで、新しい要素を追加できます。

たとえば、配列に E を追加してみましょう。

「 `
const レストラン = [“A”、“B”、“C”、“D”]

console.log(restaurants.splice(3, 0,”E”)) // 出力: []
console.log(restaurants) // 出力: [“A”, “B”, “C”, “E”, “D”]
「 `

これは、配列への要素の削除と追加の両方を行う場合にも機能します。 たとえば、上記の配列から D を削除し、D の位置に F と G を追加してみましょう。

「 `
const レストラン = [“A”、“B”、“C”、“D”]

console.log(restaurants.splice(3, 0,”E”)) // 出力: [“D”]
console.log(restaurants) // 出力: ["A", "B", "C", "F", "G"]
「 `
JavaScript Splice JavaScript ヘルプ JavaScript Mentor.png

スプライスとスライス: XNUMX つの JavaScript メソッドの違いは何ですか?

多くの JavaScript 開発者が抱える混乱の XNUMX つは、スプライスとスライス、つまりスプライスとスライスは同じなのかということです。 そうでない場合、違いは何ですか? すごく似ていますね!

Splice と Slice は両方とも組み込みの JavaScript メソッドで非常によく似ていますが、実際には異なる役割を果たします。 JavaScript のスプライスとスライスの両方を使用して、配列内の項目を操作できます。

ただし、前述したように、JavaScript の splice メソッドは元の配列を直接変更し、存在する場合は、削除された要素の配列を返します。 一方、JavaScript のスライス メソッドは、元の配列を変更せず、元の配列の「セクション」である新しい配列を返します。 スライス メソッドが返す選択範囲の「開始」と「終了」を定義できます。

この記事を読むと、JavaScript splice の使用方法の基本を理解できるようになります。 単純そうに見えますが、スプライス方法で実現できる魔法を過小評価しないでください。 splice で何ができるかについて詳しく知りたい場合は、 メンターを見つける JavaScript を段階的にマスターするのに役立ちます。

関連リンク:

タイムスタンプ:

より多くの Codementorブログ