JavaScript での splice と slice

JavaScript 配列は、事前定義されたプロパティを持つ特別なオブジェクトです。これらは、入力パラメーターとして渡される値に割り当てることができる数値プロパティです。JavaScript は、配列を操作するためのいくつかのメソッドを提供します。最も一般的な配列メソッドには、.push()、.pop()、.reverse() などがあります。これらのメソッドはすべて、配列を変更します。

この記事では、JavaScript の splice と slice の違いを学びます。

JavaScript の splice() と slice()

splice()

splice() メソッドは、配列のコンテンツに影響を与えるか、変更します。既存の要素を削除または置換したり、新しい要素を追加したりします。

構文：

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

JavaScript splice メソッドには 3つのパラメーターがあり、最初のパラメーターは start です。これは、アレイの変更を開始するアレイの開始位置/インデックスを指定する必須パラメーターです。配列の長さより大きい場合、開始は配列の長さに設定されます。

この場合、要素は削除されませんが、メソッドは合計関数のように動作し、[n *]要素と同じ数の要素を追加します。負の場合は、配列の最後にあるその数の要素から始まります。

2 番目のパラメーターは deleteCount で、これはオプションのパラメーターです。このパラメーターは、最初から削除する配列内の要素の数を指定します。deleteCount が省略されているか、その値が array.length - start 以上の場合、配列の最初から最後までのすべての要素が 0 または負に削除され、アイテムは削除されません。この場合、少なくとも 1つの新しい記事を入力する必要があります。

3 番目のパラメーターは、オプションのパラメーターである item1, item2, ... です。このパラメーターは、最初から配列に追加される要素を指定します。項目を指定しない場合、splice()は配列の要素のみを削除します。

このメソッドは、削除されたアイテムを含む配列を返します。1つの要素のみが削除された場合、1つの要素の配列が返されます。要素が削除されていない場合は、空の配列が返されます。詳細については、splice メソッドのドキュメントを参照してください。

const osConfig = ['Linux', 'Ubuntu', 'MacOS', 'Windows'];
console.log(osConfig, osConfig.splice(0, 2));

上記の例では、さまざまな種類のオペレーティングシステムを指定しています。オープンソース OS を抽出しようとすると、元の osConfig 配列に影響を与え、オープンソース OS の名前を含まない配列を返します。上記のコードを任意のブラウザで実行すると、次のように出力されます。

出力：

["MacOS", "Windows"], ["Linux", "Ubuntu"]

slice()

slice() メソッドは、配列の一部の浅いコピーを、新しく選択された配列オブジェクトに最初から最後まで返します。ここで、start と end は、その配列内の要素のインデックスです。元のアレイは影響を受けたり変更されたりしません。splice() メソッドは n 個の引数を取ることができ、slice() メソッドは 2つの引数を受け入れます。

構文：

slice()
slice(start)
slice(start, end)

JavaScript の slice() メソッドには 2つのパラメーターが含まれ、そのうち start は最初のパラメーターであるオプションのパラメーターです。このパラメーターは、抽出を開始するインデックスを指定します。このインデックスは 0 から始まります。start のデフォルト値は常に 0 です。開始が配列の長さより大きい場合、空の配列が返されます。

2 番目のパラメーターは、オプションのパラメーターである end です。このパラメーターは、抽出を終了する必要があるエンドポイントを指定します。slice は、指定されたインデックスまで抽出しますが、末尾は含まれません。たとえば、末尾が n の場合、最後に抽出される要素は n-1 です。末尾が指定されていない場合、slice メソッドは配列の末尾から抽出します。

このメソッドは、抽出された要素を含む新しい配列を返します。詳細については、slice メソッドのドキュメントを参照してください。

const osConfig = ['Linux', 'Ubuntu', 'MacOS', 'Windows'];
console.log(osConfig, osConfig.slice(0, 2););

上記の例では、さまざまな種類のオペレーティングシステムを指定しています。オープンソース OS を抽出しようとしても、元の osConfig アレイには影響しませんが、代わりに、オープンソース OS の名前を含む新しいアレイが作成されます。上記のコードを任意のブラウザで実行すると、次のように出力されます。

出力：

["Linux", "Ubuntu", "MacOS", "Windows"], ["Linux", "Ubuntu"]