JavaScript 中的 split、splice、slice 區別

發表於 2023-05-10 分類於 JavaScript

令人容易搞混的 split、splice、slice

❒ split

原字串會依 .split('') 括號內的「符號，可空格、文字」，把原字串依符號分割成子字串，並放回陣列中回傳，可把字串轉為陣列。

結構

原字串.split("符號");

範例 1. 以空格分割原字串

let str = "Hello world"
let arr = str.split(" ")  //以"空格"分割成子字串
console.log(arr); 

// ['Hello', 'world']

範例 2. 以符號分割原字串

let str = "yellow,blue,red"
let arr = str.split(",")  //以"空格"分割字串
console.log(arr);

// ['yellow', 'blue', 'red']

範例 3. 以文字分割原字串

let str = '2021-12-03T00:00:00.000Z';
let arr = str.split("T")  //以"空格"分割字串
console.log(arr);

// ['2021-12-03', '00:00:00.000Z']

❒ splice

splice() 方法可以藉由刪除原本的元素並／或加入新元素來改變一個陣列的內容，不會回傳新陣列。

結構

splice(start, deleteCount, item);

start
- 從 start 開始刪除 ( 起始值為 0 )。
- 如果括號內只有 start，則會刪除包含 start 本身以後的所有資料。
deleteCount ( 選擇性 )
- 從 start 的位置要往後刪除幾筆資料，包含 start 本身。
- deleteCount 數值為 1 ，表示要刪除 start 本身。
- deleteCount 為 0 或是負數，則不會有元素被刪除。
item ( 選擇性 )
- 可加入多個 item

範例

const alphabet =['a','b','c','d'];
alphabet.splice(1, 1); //  ['a', 'c', 'd']
alphabet.splice(1, 0); //  ['a','b','c','d']
alphabet.splice(2); // ['a','b']

alphabet.splice(2, 1, 'Hello'); // ['a', 'b', 'Hello', 'd']

❒ slice

slice() 方法會回傳一個新陣列，為原陣列選擇的 begin 至 end（不含 end ）部分的淺拷貝（ shallow copy ）。( 可用來預設每頁顯示 x 筆資料，用來生成每頁的資料。 Codepen 範例 )

結構

slice(begin, end);

beging ( 選擇性 )
- 從哪個索引值開始切 ( 起始值為 0 )。
- 可使用負數索引，表示由陣列的最末項開始提取。slice(-2) 代表拷貝陣列中的最後兩個元素。
- 負數索引超過陣列的長度，slice() 就會把所有能給我們都給出來。
end ( 選擇性 )
- 指切到哪個索引值結束 ( 起始值為 0 )，注意 slice 提取不包含索引 end，舉例來說， slice(1, 3) 則從索引 1 開始切至第三個元素前結束，也就是索引 2 結束。
slice()
- 如果括號內沒參數，就會回傳所有值。
slice 括號內如果只有一個參數，則會從會回傳那個索引值 ( 包含 ) 至最後一個元素。

範例

const alphabet =['a','b','c','d','e','f','g'];
console.log(alphabet.slice(3,6));  //['d','e','f']
console.log(alphabet.slice(1));    // ['b','c','d','e','f','g']
console.log(alphabet.slice(-4));  // ['d', 'e', 'f', 'g']
console.log(alphabet.slice(-10)); // ['a','b','c','d','e','f','g'];
console.log(alphabet.slice(4, alphabet.length)); //['e','f','g']