配列の要素の削除と追加を同時おこなう - splice, toSpliced
《 初回公開：2023/10/19 , 最終更新：未 》
【 目次 】
配列の要素の削除と追加を同時おこなうメソッドに、spliceメソッドとtoSplicedメソッドがある。
spliceメソッドは破壊的メソッドで元の配列を変更する。
toSplicedメソッドはspliceメソッドの非破壊的メソッドバージョンで元の配列を変更せずに新しい配列を生成して返す。
これらのメソッドは空のスロットとundefinedを混同しない。
splice
spliceとは日本語で接合するとか継ぐという意味。
指定した位置から複数の要素の削除するとともにその位置に別の複数の要素を挿入する破壊的メソッド。
- 構文
- array.splice(start[, deleteCount[, item1, item2, ...]]);
- 引数
-
- start
- 操作を開始するインデックス。
配列の長さより大きい場合、配列の長さに設定される。
負の値の場合、開始するインデックスは列の末尾から要素数だけ戻ったところから，つまりarray.length + startとなる。
この時、array.length + startが0以下になった場合、開始インデックスは0として処理される。 - deleteCount(オプション)
- 操作を開始するインデックス(start)からの要素を削除する数を指定。
0 や負の値を指定すると要素は削除されない。
この引数の指定を省略した場合、開始インデックスから最後の要素までが削除される。
開始インデックスからの最後の要素までの要素数を超える場合、開始インデックスから最後の要素までが削除される。 - item1, item2, ...(オプション)
- 開始するインデックスの後に追加する要素があれば任意の個数、追加する要素を指定する。
- 戻り値
- 削除された要素を含む配列を返す。
例
開始インデックス1から2個の要素を削除してそこに文字列xとyの要素を追加する。
const array = ["a", "b", "c", "d"];
const result = array.splice(1, 2, "x", "y");
console.log(array, result); // ['a', 'x', 'y', 'd'] ['b', 'c']
arrayの要素からb, cの要素が削除されspliceメソッドの戻り値resultの要素となり、代わりにarrayの要素にxとyが挿入される。
配列の破壊的メソッドは変更された配列の参照を返すメソッドが多いがspliceメソッドはそうではない。
削除された要素を含む配列が返される。
従って、メソッドチェインをおこなうと削除された要素を含む配列に対するメソッドチェインとなるので注意。
const array = ["a", , "c", "d"];
const result = array.splice(2, 1, "x", "y");
console.log(array, result); // ['a', ,'x', 'y', 'd'] ['c']
引数startが配列の長さより大きい場合、開始インデックスは配列の長さに設定される。
const array = ["a", "b", "c", "d"];
const result = array.splice(10, 2, "x", "y");
console.log(array, result); // ['a', 'b', 'c', 'd', 'x', 'y'] []
開始インデックスは配列の長さに設定されるので、削除される要素はなく、最後にx, yが追加される。 従って、resultは空の配列となる。
引数startが負の値の場合、開始インデックスはarray.length + startとなる。
const array = ["a", "b", "c", "d"];
const result = array.splice(-2, 2, "x", "y");
// 開始インデックスはarray.length(4) + start(-2) = 2
console.log(array, result); // ['a', 'b', 'x', 'y'] ['c', 'd']
引数startが負の値の場合でarray.length + startが0以下になった場合、開始インデックス0として処理される。
const array = ["a", "b", "c", "d"];
const result = array.splice(-10, 2, "x", "y");
// 開始インデックスはarray.length(4) + start(-10) = -6 ⇒ 0
console.log(array, result); // ['x', 'y', 'c', 'd'] ['a', 'b']
引数deleteCountに 0 や負の値を指定すると要素は削除されない。
const array = ["a", "b", "c", "d"];
const result = array.splice(1, -2, "x", "y");
console.log(array, result); // ['a', 'x', 'y', 'b', 'c', 'd'] []
引数deleteCountの指定を省略した場合、開始インデックスから最後の要素までが削除される。
const array = ["a", "b", "c", "d"];
const result = array.splice(1);
console.log(array, result); // ['a'] ["b", "c", "d"]
引数deleteCountの値が開始インデックスからの最後の要素までの要素数を超える場合、開始インデックスから最後の要素までが削除される。
const array = ["a", "b", "c", "d"];
const result = array.splice(1, 10, "x", "y");
console.log(array, result); // ['a', 'x', 'y'] ['b', 'c', 'd']
toSpliced
指定した位置から複数の要素の削除するとともにその位置に別の複数の要素を挿入する非破壊的メソッド。
元の配列は変更されない。
- 構文
- array.toSpliced(start[, deleteCount[, item1, item2, ...]]);
- 引数
-
- start
- 操作を開始するインデックス。
配列の長さより大きい場合、配列の長さに設定される。
負の値の場合、開始するインデックスは列の末尾から要素数だけ戻ったところから，つまりarray.length + startとなる。
この時、array.length + startが0以下になった場合開始インデックス0として処理される。 - deleteCount(オプション)
- 開始するインデックスからの要素を削除する数を指定。
0 や負の値を指定すると要素は削除されない。
この引数の指定を省略した場合、開始インデックスから最後の要素までが削除される。
開始インデックスからの最後の要素までの要素数を超える場合、開始インデックスから最後の要素までが削除される。 - item1, item2, ...(オプション)
- 開始するインデックスの後に追加する要素があれば任意の個数、追加する要素を指定する。
- 戻り値
- 要素の削除と追加を同時におこないった結果の配列を返す。
spliceメソッドと異なりtoSplicedメソッドの戻り値は、配列の要素の削除と追加をおこなった結果の新しい配列。
従って、メソッドチェインをおこなうと削除された要素を含む配列に対するメソッドチェインでは無く、要素の削除と追加をおこなった結果の新しい配列に対するメソッドチェインとなるので注意。
例
開始インデックス1から2個の要素を削除してそこに文字列xとyの要素を追加する。
const array = ["a", "b", "c", "d"];
const result = array.toSpliced(1, 2, "x", "y");
console.log(array, result); // ["a", "b", "c", "d"] ['a', 'x', 'y', 'd']
メソッドの戻り値resultにはarrayの要素からb, cの要素が削除され代わりにarrayの要素にxとyが挿入されている。
非破壊的メソッドなので元の配列は変更されない。
空のスロットを含む場合は。
const array = ["a", , "c", "d"];
const result = array.toSpliced(2, 1, "x", "y");
console.log(array, result); // ["a", , "c", "d"] ['a', ,'x', 'y', 'd']
引数startが配列の長さより大きい場合、開始インデックスは配列の長さに設定される。
const array = ["a", "b", "c", "d"];
const result = array.toSpliced(10, 2, "x", "y");
console.log(array, result); // ["a", "b", "c", "d"] ['a', 'b', 'c', 'd', 'x', 'y']
開始インデックスは配列の長さに設定されるので、削除される要素はなく、最後にx, yが追加される。
引数startが負の値の場合、開始インデックスはarray.length + startとなる。
const array = ["a", "b", "c", "d"];
const result = array.toSpliced(-2, 2, "x", "y");
// 開始インデックスはarray.length(4) + start(-2) = 2
console.log(array, result); // ["a", "b", "c", "d"] ['a', 'b', 'x', 'y']
引数startが負の値の場合でarray.length + startが0以下になった場合開始、インデックス0として処理される。
const array = ["a", "b", "c", "d"];
const result = array.toSpliced(-10, 2, "x", "y");
// 開始インデックスはarray.length(4) + start(-10) = -6 ⇒ 0
console.log(array, result); // ["a", "b", "c", "d"] ['x', 'y', 'c', 'd']
引数deleteCountに 0 や負の値を指定すると要素は削除されない。
const array = ["a", "b", "c", "d"];
const result = array.toSpliced(1, -2, "x", "y");
console.log(array, result); // ["a", "b", "c", "d"] ['a', 'x', 'y', 'b', 'c', 'd']
引数deleteCountの指定を省略した場合、開始インデックスから最後の要素までが削除される。
const array = ["a", "b", "c", "d"];
const result = array.toSpliced(1);
console.log(array, result); // ["a", "b", "c", "d"] ['a']
引数deleteCountの値が開始インデックスからの最後の要素までの要素数を超える場合、開始インデックスから最後の要素までが削除される。
const array = ["a", "b", "c", "d"];
const result = array.toSpliced(1, 10, "x", "y");
console.log(array, result); // ["a", "b", "c", "d"] ['a', 'x', 'y']