0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

sliceとspliceの違いそろそろ覚えるぞ!!

Posted at

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が元々の配列に変更を加えるという大きな違いを理解してあとは使いながら理解していければなって感じですね(笑)。
ドキュメント読みながらまとめてみると理解が深まったのであとはどんどん使っていきます!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?