91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

JavaScript 有三兄弟，經常一起“切人”。
他們名字相似、功能相關，但性格迥異，常被搞混。
今天，就帶你喝著奶茶，笑著剖析，幫你徹底搞懂：
splice、slice、split 到底是誰？干了啥？憑啥這么火？

?? 一、三兄弟登場：不同對象，不同任務

?? 三兄弟性格畫像：

• splice：動刀硬漢，“你讓我切，我就直接改了，還能塞新料”
• slice：溫柔攝影師，“我只是幫你剪一塊，別擔心，我不動本體”
• split：爆破專家，“給我個分隔符，我讓字符串四分五裂”

?? 二、splice —— 原數組的“改造師”

?? 語法：

array.splice(start, deleteCount, item1, item2, ...)

?? 參數說明

?? 作用細節

• 刪除 deleteCount 個元素
• 插入 itemX 元素（可選）
• 原地修改原數組
• 返回被刪除的元素組成的數組

?? 示例

let arr = ['??', '??', '??', '??'];
let res = arr.splice(1, 2, '??', '??');
console.log(arr); // ['??', '??', '??', '??']
console.log(res); // ['??', '??']

?? 實現邏輯簡析（偽代碼）

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;
}

?? 注意點

• start 超出范圍時會被限制在數組末尾
• deleteCount 超出實際刪除范圍不會報錯
• 可以只刪除不插入，或只插入不刪除（deleteCount 為 0）

?? 三、slice —— 不動聲色的“復制專家”

?? 語法

array.slice(start, end)
string.slice(start, end)

半開區間 [start, end)，取從 start 到 end（不含）的部分。

?? 參數說明

?? 示例

let fruits = ['??', '??', '??', '??'];
let res = fruits.slice(1, 3);
console.log(res);      // ['??', '??']
console.log(fruits);   // ['??', '??', '??', '??']  原數組未改動

?? 實現簡析

function slice(arr, start, end) {
  const result = [];
  start = normalizeIndex(start, arr.length);
  end = normalizeIndex(end ?? arr.length, arr.length);
  for (let i = start; i < end; i++) {
    result.push(arr[i]);
  }
  return result;
}

也可用于字符串，返回子串。

?? 四、split —— 字符串的“爆破能手”

?? 語法

string.split(separator, limit)

?? 參數說明

?? 示例

let str = "你/我/他/她";
let parts = str.split('/');
console.log(parts); // ['你', '我', '他', '她']
let limited = str.split('/', 2);
console.log(limited); // ['你', '我']

?? 使用小技巧

• str.split('') 把字符串拆成單字數組
• 正則表達式支持復雜拆分，如空白、標點等

?? 簡化模擬

function split(str, sep, limit) {
  let parts = str.split(sep);
  return parts.slice(0, limit ?? parts.length);
}

?? 五、終極口訣：一秒區分三兄弟

?? 記住這句：

• Splice 改數組，一刀兩斷再塞新
• Slice 拷貝段，半開區間不傷真
• Split 拆字符串，按符爆破成碎銀

?? 加個數字口訣：

• 5 分裂（split）
• 6 切片（slice）
• 7 動刀（splice）

?? 字母聯想：

• sp 是“拼割”的信號，
• 多一個 p（splice）意味著“拼接”，
• 少一個 p（slice）意味著“切片”，
• 結尾 lit（split）像“炸裂”。

?? 六、常見誤區與注意點

1. slice 不改原數組，splice 會
2. split 的參數是分隔符，不是索引
3. splice 返回被刪元素數組，而非新數組
4. slice 可用于字符串，splice 僅限數組

?? 七、面試加餐題

let arr = ['a', 'b', 'c', 'd'];
let res = arr.splice(1, 2).slice(0, 1).join().split('');
console.log(res);

步驟解析：

1. arr.splice(1, 2) 刪除 'b', 'c'，返回 ['b', 'c']
2. .slice(0,1) 取第一項 ['b']
3. .join() 轉成字符串 'b'
4. .split('') 拆成數組 ['b']

? 輸出：['b']

?? 八、終章總結表

?? 寫在最后

JS 三兄弟雖長得相似，但性格鮮明。
掌握他們，你就擁有了三把強力的“切割刀”：

• 動刀重塑的 splice
• 溫柔取片的 slice
• 震懾爆裂的 split

下次使用時，不怕混淆，輕松辨別，寫出干凈利落的代碼！

?轉自https://juejin.cn/post/7524602914515517483