[ js 筆記 ] 一次搞懂Javascript中的slice()、splice()、split()


Posted by ChloeLin on 2022-02-14

一定很多人跟我一樣,slice()、splice()、split() 這三者從初學JS時一直沒記住。這次就來整理這三者的差別吧。

三者差異

slice() splice() split()
對象 Array及String Array String
原值 不改變 改變 不改變
用法 arr.slice(begin, end)
str.slice(begin, end)
array.splice(start, deleteCount, item1, item2, ...) str.split(separator, limit)

這表格看不懂沒關係,我們再來細說吧!

slice( )

  • 回傳一個新陣列物件,為原陣列選擇之開始位置結束位置 ( 不含結束位置 )部分的淺拷貝(shallow copy)。
  • 原本的陣列將不會被修改。
  • 對象:Array及String
arr.slice(開始位置, 結束位置-不包含)
str.slice(開始位置, 結束位置-不包含)

什麼意思呢?直接來看一下範例。

let friends = ['David', 'Peggy', 'Amy', 'Anna', 'Kiki'];
let friends2 = friends.slice(2);
let friends3 = friends.slice(1, 3);
let friends4 = friends.slice(-1);

console.log(friends2) //[ 'Amy', 'Anna', 'Kiki' ]
console.log(friends3) //[ 'Peggy', 'Amy' ]
console.log(friends4) //[ 'Kiki' ]
console.log(friends) //[ 'David', 'Peggy', 'Amy', 'Anna', 'Kiki' ]

arr.slice(2) 從陣列的索引位子 '2' 開始到最後。
friends.slice(1, 3) 從陣列的索引位子 '1' 開始到 '2'。
friends.slice(-1) 開始位子為負數的話,會從陣列的最後一個索引位子開始往前推。
friends 最後我們可以發現原陣列friends並未改變。

splice( )

  • 可以藉由刪除既有元素或加入新元素來改變一個陣列的內容。
  • 原本的陣列將會被修改。
  • 對象:Array。
arr.splice(起始點, 要刪掉的個數, 要插入的值) // 插入一個或多個值
arr.splice(起始點, 要刪掉的個數) // 刪除中間的值
const nums = [0, 1, 2, 3, 4]
nums.splice(2, 0, 99) // 在陣列 2 的位子,刪掉 0 個,插入數字 99。
console.log(nums) // [0, 1, 99, 2, 3, 4]

const nums = [0, 1, 2, 3, 4]
nums.splice(2, 2) // 在陣列 2 的位子,刪掉 2 個。
console.log(nums) // [0, 1, 4]

當我們使用 splice 取值時,也可以運用另一個變數來接住回傳值(陣列),以便後續應用:

const nums = [0, 1, 2, 3, 4]
const deletedNumbers = nums.splice(2, 2)
console.log(deletedNumbers) // [2, 3]

split( )

  • 使用指定的分隔符字符串將一個 string 分割成子字符串數組。
  • 原本的陣列將不會被修改。
  • 對象:String
str.split(分隔符, 限制的數量)

如果使用空字符串("")作為分隔符,則將會單獨拆分所有字符。
舉例來說:

let myString = 'hello, nihao, 你好'
let myNewArray1 = myString.split(',')
let myNewArray2 = myString.split('')
let myNewArray3 = myString.split(',',2)

console.log(myNewArray1) // ['hello', ' nihao', ' 你好']
console.log(myNewArray2) // [ 'h', 'e', 'l',  'l', 'o', ',', ' ',  'n',  'i', 'h', 'a',  'o',  ',', ' ', '你', '好' ]
console.log(myNewArray3) // [ 'hello', ' nihao' ]

myString.split(',') 以','做為分隔前後的字符。
myString.split('') 分隔所有字符。
myString.split(',',2) 以','做為分隔前後的字符,但只取前兩個。

參考資料:
MDN: splice()
MDN: slice()
MDN: splite()


#javascript #Front-End #splice #slice #split







Related Posts

Day 123

Day 123

client library

client library

【JS幼幼班】Step.07 基本語法:物件型別(object、function)

【JS幼幼班】Step.07 基本語法:物件型別(object、function)


Comments