[JS] 頻繁に使用する文字列、配列で似ているメソッドの違いを口頭で説明できますか？Part 1

似た動きをするメソッド

以下のメソッドたちは似た動きをするので、明確な違いを理解しておく必要がある

slice vs splice

const arr = [1, 2, 3, 4, 5, 6];

// slice
const sliceArr = arr.slice(0, 2); // [1, 2]
console.log(arr) // [1, 2, 3, 4, 5, 6]

// splice
const spliceArr = arr.splice(0, 2); // [1, 2]
console.log(arr) // [3, 4, 5, 6]

このようにsliceとspliceは同じく開始indexと終了index 第一引数は開始indexと同じですが、第二引数はsliceは終了index、spliceは取り除く要素の数を引数として受け取っており、
返される配列は開始indexが0の時は同じものなのでよく混同しやすいです。

しかし、元の配列を確認してみるとsliceの場合は変化がありませんがspliceを使用したあとはspliceで返された配列の要素が抜き取られており、中身が変わってるのがわかります。

このようにsliceとspliceは得られる値こそ一緒ですがspliceの場合は元の配列に影響を及ぼすところが違いとなり、spliceは元の配列の要素を削除したい場合に使用して、ただ配列の一部を取得したいときはsliceを使うようにしましょう。

slice vs substring

const str = "123456";

// slice
const sliceStr = str.slice(0, 2); // "12"
const sliceStrNegativeIndex = str.slice(0, -2); // "1234"

// substring
const substringStr = str.substring(0, 2); // "12"
const substringStrNegativeIndex = str.substring(0, -2); // ""

どちらも開始インデックスから終了インデックスまでの文字列を返すところは一緒ですが、substringの場合は負のインデックスを使用した時に空の文字列が返されます。

なので、負のインデックスでの操作をしたい場合はsliceを使用して、そうじゃない場合はどちらでも大丈夫ですね。

sliceは先ほどのように配列でも使用できるところが便利です。