slice、splice、split傻傻分不清

这三个方法名称相似，但功能完全不同，极易混淆！用一句话总结它们的核心区别：

👉 切片（slice）、剪贴（splice）、分割（split）——分别对应三种不同的操作场景。

一图秒懂区别

详细场景解析

1️⃣ slice（切片）—— 安全截取

• 适用场景：想从数组或字符串中取出一部分，但不改变原数据。

• 参数：start（起始索引）, end（结束索引，不包含）

• 特点：

  • 支持负数索引（从末尾算起）。

  • 若参数越界，自动调整到合理范围。

• 示例：

  javascript// 数组const arr = [1, 2, 3, 4];arr.slice(1, 3);   // [2, 3]（原数组不变）// 字符串"hello".slice(1, 3); // "el"

2️⃣ splice（剪贴）—— 增删元素

• 适用场景：需要直接修改原数组，删除旧元素或插入新元素。

• 参数：start（起始位置）, deleteCount（删除数量）, ...items（插入的新元素）

• 特点：

  • 删除元素时返回被删元素的数组。

  • 可用负数索引（如 -1 表示最后一个元素）。

• 示例：

  javascriptconst arr = [1, 2, 3, 4];// 删除：从索引1开始删2个元素arr.splice(1, 2);         // 返回 [2, 3]，arr变为 [1, 4]// 插入：删除0个元素，插入新元素arr.splice(1, 0, "a", "b"); // arr变为 [1, "a", "b", 4]

3️⃣ split（分割）—— 字符串转数组

• 适用场景：将一个字符串按指定规则拆分为数组。

• 参数：separator（分隔符）, limit（限制数组长度）

• 特点：

  • 分隔符可以是字符串或正则表达式。

  • 空字符串 "" 会分割成单个字符组成的数组。

• 示例：

  javascript"apple,banana,orange".split(","); // ["apple", "banana", "orange"]"2023-10-01".split(/-/);          // ["2023", "10", "01"]"hello".split("");                // ["h", "e", "l", "l", "o"]

常见混淆场景

❌ 错误用法

javascript// 误将 split 用于数组[1,2,3].split(","); // 报错！数组没有 split 方法// 误将 splice 用于字符串"hello".splice(1, 2); // 报错！字符串没有 splice 方法// 误将 slice 当 splice 用（不修改原数组）const arr = [1,2,3];arr.slice(1); // 返回 [2,3]，但 arr 还是 [1,2,3]

✅ 正确选择

• 想从数组中取子集，且不修改原数组 → slice

• 需要删除或插入数组元素 → splice

• 将字符串按规则拆分成数组 → split

速记口诀

text切片（slice）不伤身，剪贴（splice）动真格，分割（split）字符串，数组靠边站！

记住这个口诀，再也不怕写代码时手忙脚乱啦！ 😉