LoginSignup
13

More than 3 years have passed since last update.

もう絶対にググらない。sliceとspliceの違いを覚えてやる。

Posted at

「一度使えば覚えられるでしょ」そう思っていた。
甘かった。そいつは忘れたころにやってくる。配列操作の一卵性双生児、sliceとsplice。
どっちがどうだったっけ?
もう何度ぐぐったことか。ぐぐるごとに命が削られる。
もう二度とググらないくらい徹底的に調べてやるぞ。
決意表明の意味も込めてここに書き留めておく。

まずはおさらい

var arr1 = [0, 1, 2, 3, 4]

// .slice(開始位置, 終了位置)
console.log(arr1.slice(0, 2)) //=> [0,1]
console.log(arr1) //=> [0,1,2,3,4]

var arr2 = [0, 1, 2, 3, 4]

// .splice(開始位置[, 削除カウント[, 追加要素1[, 追加要素2, ...]]])
console.log(arr2.splice(0, 2)) //=> [0,1]
console.log(arr2) //=> [2,3,4]

要素を抽出したい場合、出力結果が同じなところがややこしい。
違いは元の配列から要素が削除されるかどうか。
いつもどっちが元の配列が変わらないのかがわからなくなってググらざるを得なくなってしまう。
悩ましいポイントはここにある。

メソッド名の意味

slice

断片

splice

繋ぎ合わせる

。。あれ、なんだか意味の違いははっきりしてるじゃないか。
そうか、繋ぎ合わせるという意味のspliceは元来要素の抽出のためにあるわけではなく、要素を消して違う要素を入れるためにあるのか。
てことは、元の配列から要素が消えるのも納得できる。

結論

メソッド名の意味の違いを知れば動作の予測がある程度できそう。
こんな初歩的なことだったとわ。。
これで覚えられると良いなー。

。。文字列操作の、substring, substr, sliceも同じ感じでいけるだろうか。

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
13