🔄
JavaScriptの分かりづらい配列メソッド（slice, splice, copyWithin）を理解する
JavaScriptの配列について学習していたとき、初見では理解できなかったものがあったのでまとめる。
ドキュメント：MDN Array
- slice(start?: number, end?: number)
- splice(start: number, deleteCount?: number, Object[]?: insertObject)
- copyWithin(target: number, start: number, end?: number)
slice
比較的わかりやすいメソッド。部分配列を返すために使用する。
// slice(start?: number, end?: number)
let array = Array.from("abcde");
console.log(array.slice(1, 4)); // b, c, d
console.log(array); // 変化なし
array = Array.from("abcde");
// array.slice(0)やarray.slice(0, array.length)と同じ
console.log(array.slice()); // 変化なし
console.log(array); // 変化なし
splice
sliceと字面が似ているので混乱しやすい。splice自体は英単語として存在しており「より継ぎする」という意味 ( https://ejje.weblio.jp/content/splice )
配列に対して要素の削除・挿入を同時に行う。
// splice(start: number, deleteCount?: number, Object[]?: insertObject)
let array = Array.from("abcde");
console.log(array.splice(1, 2, "x", "y", "z")); // b, c
console.log(array); // a, x, y, z, d, e
array = Array.from("abcde");
console.log(array.splice(1, 2, {x: 1})); // b, c
console.log(array); // a, {x: 1}, d, e
array = Array.from("abcde");
// array.splice(1, array.length)と同じ
console.log(array.splice(2)); // c, d, d
console.log(array); // a, b
copyWithin
配列の範囲内でコピーを行うメソッド。一見するとやっていることが分かりづらい。
パフォーマンスが高く型付き配列で使うと便利らしいが、具体的にどう便利なのかはまだ理解できていない。
// copyWithin(target: number, start: number, end?: number)
let array = Array.from("abcde");
console.log(array.copyWithin(1, 0, 3)); // a, a, b, c, e
console.log(array); // a, a, b, c, e
array = Array.from("abcde");
// array.copyWithin(1, 0, array.length)と同じ
console.log(array.copyWithin(1, 0)); // a, a, b, c, d
console.log(array); // a, a, b, c, d
まとめ
| 返値 | 処理後の配列 | 処理後の配列長 | |
|---|---|---|---|
| slice | 部分配列 | 変化なし（非破壊的） | 処理前後で変わらない |
| splice | 削除された要素の配列 | 削除・追加後の配列 | 変わることもある |
| copyWithin | 配列内の要素で上書きコピーした後の配列 | 配列内の要素で上書きコピーした後の配列 | 処理前後で変わらない |
Discussion