🔄

JavaScriptの分かりづらい配列メソッド(slice, splice, copyWithin)を理解する

2024/08/05に公開

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