概要: このチュートリアルでは、JavaScriptの配列`toSpliced()`メソッドを使用して、配列の内容を変更し、新しい配列を返す方法を学習します。
JavaScript配列のtoSpliced()メソッドの紹介
`toSpliced()`メソッドを使用すると、指定されたインデックスで指定された要素を削除および/または置換することで、元の配列を変更せずに新しい配列を取得できます。
`toSpliced()`メソッドは、`splice()`メソッドとは異なり、元の配列を直接変更しません。代わりに、変更された要素を含む新しい配列を返し、元の配列は変更されません。
`toSpliced()`メソッドの構文は次のとおりです。
Array.prototype.toSpliced(start, deleteCount, element1, element2,... elementN)Code language: JavaScript (javascript)この構文では、
- `start`：配列の変更を開始する0から始まるインデックスです。
- `deleteCount`（オプション）：`start`から始まる配列から削除する要素の数を示す整数です。`deleteCount`が0の場合、メソッドは要素を削除しません。この場合、配列に追加する要素を少なくとも1つ指定する必要があります。
- `element1`、`element2`、… `elementN`：`start`から始まる配列に追加する新しい要素です。要素を指定しない場合、メソッドは削除のみを実行します。
`toSpliced()`メソッドは、指定された`start`より前のすべての要素、`element1`、`element2`、…、`elementN`、および`start + deleteCount`より後のすべての要素で構成される新しい配列を返します。
JavaScript配列のtoSpliced()メソッドの例
`toSpliced()`メソッドの使用例をいくつか見てみましょう。
1) toSpliced()メソッドを使用して配列から要素を削除する
以下の例は、`toSpliced()`メソッドを使用して配列から要素を削除し、それらの要素を含まない新しい配列を生成する方法を示しています。
const scores = [1,2,3,4,5];
const newScores = scores.toSpliced(0,2);
console.log(scores);
console.log(newScores);Code language: JavaScript (javascript)出力
[ 1, 2, 3, 4, 5 ]
[ 3, 4, 5 ]Code language: JavaScript (javascript)出力は、元の配列（`scores`）が変更されていないことを確認し、返された配列（`newScores`）から2つの要素が削除されていることを示しています。
2) toSpliced()メソッドを使用して配列に要素を追加する
次の例では、`toSpliced()`メソッドを使用して、`scores`配列の先頭に2つの数値を追加します。
const scores = [3,4,5];
const newScores = scores.toSpliced(0, 0, 1, 2);
console.log(scores);
console.log(newScores);Code language: JavaScript (javascript)出力
[ 3, 4, 5 ]
[ 1, 2, 3, 4, 5 ]Code language: JavaScript (javascript)この例では、
- 最初の引数0は、メソッドが位置0から配列の変更を開始することを示します。
- 2番目の引数0は、メソッドに要素を削除しないように指示します。
- 最後の2つの引数1と2は、メソッドが配列に追加する新しい要素です。
このメソッドは、配列の先頭に2つの新しい要素1と2を持つ新しい配列`newScores`を返します。
3) toSpliced()を使用して配列の要素を置き換える
次の例では、`toSpliced()`メソッドを使用して、`scores`配列の先頭にある2つの数値を置き換えます。
const scores = [0,0,3,4,5];
const newScores = scores.toSpliced(0, 2, 1, 2);
console.log(scores);
console.log(newScores);Code language: JavaScript (javascript)出力
[ 0, 0, 3, 4, 5 ]
[ 1, 2, 3, 4, 5 ]Code language: JavaScript (javascript)この例では、
- 最初の引数0（`start`）は、メソッドが位置0から配列の変更を開始することを示します。
- 2番目の引数2（`deleteCount`）は、メソッドに位置0から始まる2つの要素を削除するように指示します。つまり、`scores`配列の最初と2番目の要素を削除します。
- 最後の2つの引数は、メソッドが位置0に`scores`配列に追加する新しい要素です。
まとめ
- JavaScriptの配列`toSpliced()`メソッドを使用して、配列の要素を変更し、更新された配列を結果として取得します。
