LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

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

freeflydom
2025年7月11日 10:47 本文热度 51

JavaScript 有三兄弟,经常一起“切人”。
他们名字相似、功能相关,但性格迥异,常被搞混。
今天,就带你喝着奶茶,笑着剖析,帮你彻底搞懂:
spliceslicesplit 到底是谁?干了啥?凭啥这么火?


🍿 一、三兄弟登场:不同对象,不同任务

名称作用对象是否修改原对象返回类型功能简述
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

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

​转自https://juejin.cn/post/7524602914515517483


该文章在 2025/7/11 10:47:22 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2025 ClickSun All Rights Reserved