sliceとspliceがしっかりと使い分けられるように備忘録として残しておく。
元々この2つのメソッドがあるのは知っていたが、オリジナルアプリを作成した時に一度も使っていなかったので、すぐ使えるようにと思って書いていく。
すぐ使える状態にあれば、オリジナルアプリのコードの幅がもう少し広がったと思う。
slice
sliceは断片、一部分という意味。
元の配列に変更を加えず、新しい配列を生成する。
array.slice([start[, end]])
・startは取り出しの開始位置を示すインデックス
※startが指定されなかった場合は、インデックス0から開始される。
※startが入れるのインデックスの範囲よりも大きい場合は、空の配列が返される。
・endは取り出し直前の位置を示すインデックス
※end自体は含めず、その直前までを取り出す。
※endが省略された場合は、配列の最後まで取り出す。
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
const newAnimals = animals.slice(2,3);
console.log(animals) //Array ["ant", "bison", "camel", "duck", "elephant"]
console.log(newAnimals) //Array ["camel"]
返り値
sliceは元の配列を変更せず、新しい配列を返す。
splice
spliceは接合する、繋ぎ合わせるという意味。
元々の配列に変更を加える。
splice(start, deleteCount, item1)
・startは配列を変更する最初の位置
・deleteCountはstartの位置から取り除く個数を示す整数
※0だった場合はどの要素も取り除かれない。
・item1は配列に追加する要素
※要素を指定しなかった場合、splice()は単に配列から要素を取り除く。
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months); //Array ["Jan", "Feb", "March", "April", "June"]
結論
細かい使い方の違いはあるけど、sliceが新しい配列を生成し、spliceが元々の配列に変更を加えるという大きな違いを理解してあとは使いながら理解していければなって感じですね(笑)。
ドキュメント読みながらまとめてみると理解が深まったのであとはどんどん使っていきます!