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