JavaScript 有三兄弟，經(jīng)常一起“切人”。
他們名字相似、功能相關(guān)，但性格迥異，常被搞混。
今天，就帶你喝著奶茶，笑著剖析，幫你徹底搞懂：
splice、slice、split 到底是誰？干了啥？憑啥這么火？
?? 一、三兄弟登場：不同對(duì)象，不同任務(wù)
| 名稱 | 作用對(duì)象 | 是否修改原對(duì)象 | 返回類型 | 功能簡述 |
|---|
splice | 數(shù)組 | ? 是 | 被刪除元素?cái)?shù)組 | 原地刪除元素并可插入新元素 |
slice | 數(shù)組 / 字符串 | ? 否 | 副本（子集） | 復(fù)制選中部分，原體不動(dòng) |
split | 字符串 | ? 否 | 數(shù)組 | 按分隔符拆分成字符串?dāng)?shù)組 |
?? 三兄弟性格畫像：
- splice：動(dòng)刀硬漢，“你讓我切，我就直接改了，還能塞新料”
- slice：溫柔攝影師，“我只是幫你剪一塊，別擔(dān)心，我不動(dòng)本體”
- split：爆破專家，“給我個(gè)分隔符，我讓字符串四分五裂”
?? 二、splice —— 原數(shù)組的“改造師”
?? 語法：
array.splice(start, deleteCount, item1, item2, ...)
?? 參數(shù)說明
| 參數(shù) | 說明 |
|---|
start | 操作起始索引（可負(fù)數(shù)，表示從尾部開始） |
deleteCount | 要?jiǎng)h除的元素?cái)?shù)量 |
item1... | 要插入的新元素（可選） |
?? 作用細(xì)節(jié)
- 刪除
deleteCount 個(gè)元素 - 插入
itemX 元素（可選） - 原地修改原數(shù)組
- 返回被刪除的元素組成的數(shù)組
?? 示例
let arr = ['??', '??', '??', '??'];
let res = arr.splice(1, 2, '??', '??');
console.log(arr); // ['??', '??', '??', '??']
console.log(res); // ['??', '??']
?? 實(shí)現(xiàn)邏輯簡析（偽代碼）
function splice(arr, start, deleteCount, ...items) {
const deleted = arr.slice(start, start + deleteCount)
const before = arr.slice(0, start)
const after = arr.slice(start + deleteCount)
arr.length = 0
arr.push(...before, ...items, ...after)
return deleted
}
?? 注意點(diǎn)
start 超出范圍時(shí)會(huì)被限制在數(shù)組末尾deleteCount 超出實(shí)際刪除范圍不會(huì)報(bào)錯(cuò)- 可以只刪除不插入，或只插入不刪除（
deleteCount 為 0）
?? 三、slice —— 不動(dòng)聲色的“復(fù)制專家”
?? 語法
array.slice(start, end)
string.slice(start, end)
半開區(qū)間 [start, end)，取從 start 到 end（不含）的部分。
?? 參數(shù)說明
| 參數(shù) | 說明 |
|---|
| start | 起始索引（可為負(fù)數(shù)） |
| end | 結(jié)束索引（可省略） |
?? 示例
let fruits = ['??', '??', '??', '??'];
let res = fruits.slice(1, 3);
console.log(res); // ['??', '??']
console.log(fruits); // ['??', '??', '??', '??'] 原數(shù)組未改動(dòng)
?? 實(shí)現(xiàn)簡析
function slice(arr, start, end) {
const result = []
start = normalizeIndex(start, arr.length)
end = normalizeIndex(end ?? arr.length, arr.length)
for (let i = start
result.push(arr[i])
}
return result
}
也可用于字符串，返回子串。
?? 四、split —— 字符串的“爆破能手”
?? 語法
string.split(separator, limit)
?? 參數(shù)說明
| 參數(shù) | 說明 |
|---|
| separator | 分隔符（字符串或正則表達(dá)式） |
| limit | 最多返回元素個(gè)數(shù)（可選） |
?? 示例
let str = "你/我/他/她"
let parts = str.split('/')
console.log(parts)
let limited = str.split('/', 2)
console.log(limited)
?? 使用小技巧
str.split('') 把字符串拆成單字?jǐn)?shù)組- 正則表達(dá)式支持復(fù)雜拆分，如空白、標(biāo)點(diǎn)等
?? 簡化模擬
function split(str, sep, limit) {
let parts = str.split(sep);
return parts.slice(0, limit ?? parts.length);
}
?? 五、終極口訣：一秒?yún)^(qū)分三兄弟
?? 記住這句：
- Splice 改數(shù)組，一刀兩斷再塞新
- Slice 拷貝段，半開區(qū)間不傷真
- Split 拆字符串，按符爆破成碎銀
?? 加個(gè)數(shù)字口訣：
- 5 分裂（split）
- 6 切片（slice）
- 7 動(dòng)刀（splice）
?? 字母聯(lián)想：
sp 是“拼割”的信號(hào)，- 多一個(gè)
p（splice）意味著“拼接”， - 少一個(gè)
p（slice）意味著“切片”， - 結(jié)尾
lit（split）像“炸裂”。
?? 六、常見誤區(qū)與注意點(diǎn)
- slice 不改原數(shù)組，splice 會(huì)
- split 的參數(shù)是分隔符，不是索引
- splice 返回被刪元素?cái)?shù)組，而非新數(shù)組
- slice 可用于字符串，splice 僅限數(shù)組
?? 七、面試加餐題
let arr = ['a', 'b', 'c', 'd']
let res = arr.splice(1, 2).slice(0, 1).join().split('')
console.log(res)
步驟解析：
arr.splice(1, 2) 刪除 'b', 'c'，返回 ['b', 'c'].slice(0,1) 取第一項(xiàng) ['b'].join() 轉(zhuǎn)成字符串 'b'.split('') 拆成數(shù)組 ['b']
? 輸出：['b']
?? 八、終章總結(jié)表
| 方法 | 操作對(duì)象 | 返回類型 | 是否改原對(duì)象 | 功能簡述 |
|---|
| splice | 數(shù)組 | 數(shù)組 | ? 是 | 刪除 / 插入 / 替換 |
| slice | 數(shù)組 / 字符串 | 子集 | ? 否 | 復(fù)制指定范圍 |
| split | 字符串 | 數(shù)組 | ? 否 | 拆成多個(gè)子字符串 |
?? 寫在最后
JS 三兄弟雖長得相似，但性格鮮明。
掌握他們，你就擁有了三把強(qiáng)力的“切割刀”：
- 動(dòng)刀重塑的 splice
- 溫柔取片的 slice
- 震懾爆裂的 split
下次使用時(shí)，不怕混淆，輕松辨別，寫出干凈利落的代碼！
?轉(zhuǎn)自https://juejin.cn/post/7524602914515517483
該文章在 2025/7/11 10:47:22 編輯過
400 186 1886
