2. 数组增删改查与 splice

继续用超市货架比喻：push 就是「往货架最右边塞一个格子」，pop 是「抽走最右边那个」，splice 是「万能工具——中间抽掉、塞进、替换随便你」。今天重点不是背单词，而是每按一下，货架变成什么样、它还给你什么东西。

2.1 互动演示（可视化增删改 + 实时返回值）

点按钮操作数组：上方彩色方块是当前数组，下方输出每步的返回值。

2.2 知识点逐条讲解（配合代码）

① 查与改：直接用编号

货架摆好了，想看看某号格子里是啥、想换一个，直接报编号就行。查：arr[编号]；改：直接给这个格子重新赋值。

let arr = ["苹果", "香蕉", "葡萄"];  // 货架上三样水果
console.log(arr[1]);     // 看编号1里是啥 → 香蕉
arr[2] = "橙子";          // 把编号2那格，换成橙子
console.log(arr);        // 现在是 [苹果,香蕉,橙子]

② 头尾增删：push / pop / unshift / shift

这四个是「加/删」的快捷按钮，分两组：最右边用 push/pop，最左边用 unshift/shift。它们都会直接把货架改掉（不是复制一份新的）。

let arr = ["苹果", "香蕉"];        // 货架起点
arr.push("西瓜", "榴莲"); // 最右边一口气加两个
arr.pop();               // 抽走最右边的榴莲
arr.unshift("芒果");      // 最左边塞进芒果
arr.shift();             // 抽走最左边的芒果

③ splice：万能增删改替换（重点）

语法：arr.splice(从几号开始, 删几个, 要插入的东西...)。一个方法搞定增、删、替换，工作中天天用。记不住没关系，下面表格背。

let arr = ["苹果", "香蕉", "葡萄"];
// ① 只删除：从编号1开始，删1个
arr.splice(1, 1);            // 香蕉被抽走
// ② 删+换：编号1删1个，顺手塞个橙子
arr.splice(1, 1, "橙子");
// ③ 只加不删：删几个填0，在编号2插两个
arr.splice(2, 0, "西瓜", "猕猴桃");

④ 方法返回值速查表

很多新手只记得「货架被改了」，忘了它还顺手递给你一样东西（术语叫返回值）。记住下表，别把「新长度」和「被删的东西」搞混：

方法	干嘛的	递给你什么	改原货架？
push(...)	最右加	新的格子总数 length	是
pop()	抽最右	被抽走的那个东西	是
unshift(...)	最左加	新的格子总数 length	是
shift()	抽最左	被抽走的那个东西	是
splice(...)	删/插/替换	被抽走的东西打包成新数组	是

如果你搞混返回值，就会拿错东西去用。因为 push/unshift 递的是「新长度」，pop/shift/splice 递的是「被删的东西」。下面演示里每一步都会打印出来，点几个按钮就记住了。

⑥ X.3 实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：购物车加商品 push()、删商品 splice()、刷新列表后看新 length。

② 常见坑：把 push() 当返回了新数组用，或忘了 splice() 会直接改原数组。

③ 怎么解决：记住口诀——push/unshift 返长度，pop/shift/splice 返被删内容；不想动原数组就先 [...arr] 复制。

一句话记住：头尾用 push/pop/unshift/shift；中间全靠 splice(从几号,删几个,插谁...)；push/unshift 递长度，pop/shift/splice 递被删东西；它们都直接改原数组。