【JS三兄弟谁是谁】搞懂 splice、slice、split，只需一杯奶茶的时间！

JavaScript 有三兄弟，经常一起"切人"。

他们名字相似、功能相关，但性格迥异，常被搞混。

今天，就带你喝着奶茶，笑着剖析，帮你彻底搞懂：
splice、slice、split 到底是谁？干了啥？凭啥这么火？

---

🍿 一、三兄弟登场：不同对象，不同任务

名称	作用对象	是否修改原对象	返回类型	功能简述
splice	数组	✅ 是	被删除元素数组	原地删除元素并可插入新元素
slice	数组 / 字符串	❌ 否	副本（子集）	复制选中部分，原体不动
split	字符串	❌ 否	数组	按分隔符拆分成字符串数组

---

👤 三兄弟性格画像：

• splice：动刀硬汉，"你让我切，我就直接改了，还能塞新料"
• slice：温柔摄影师，"我只是帮你剪一块，别担心，我不动本体"
• split：爆破专家，"给我个分隔符，我让字符串四分五裂"

---

🥩 二、splice ------ 原数组的"改造师"

🧬 语法：

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

🧠 参数说明

参数	说明
start	操作起始索引（可负数，表示从尾部开始）
deleteCount	要删除的元素数量
item1...	要插入的新元素（可选）

🔬 作用细节

• 删除 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（不含）的部分。

🧠 参数说明

参数	说明
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)

🧠 参数说明

参数	说明
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']

---

🧩 八、终章总结表

方法	操作对象	返回类型	是否改原对象	功能简述
splice	数组	数组	✅ 是	删除 / 插入 / 替换
slice	数组 / 字符串	子集	❌ 否	复制指定范围
split	字符串	数组	❌ 否	拆成多个子字符串

---

🍵 写在最后

JS 三兄弟虽长得相似，但性格鲜明。

掌握他们，你就拥有了三把强力的"切割刀"：

• 动刀重塑的 splice
• 温柔取片的 slice
• 震慑爆裂的 split

下次使用时，不怕混淆，轻松辨别，写出干净利落的代码！