2. 数组增删改查与 splice

数组增删改查就是往这排箱子里放东西、拿东西、改东西、删东西。

核心五个方法：
① push()——末尾加
② pop()——末尾删
③ unshift()——开头加
④ shift()——开头删
⑤ splice(位置, 删几个, 加什么)——任意位置增删改

坑：splice 会改变原数组、push 返回新长度、pop 返回被删的元素。

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

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

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

① 查与改：直接用编号

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

// 货架上三样水果
let arr = ["苹果", "香蕉", "葡萄"];

// 看编号1里是啥 → 香蕉
console.log(arr[1]);

// 把编号2那格，换成橙子
arr[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(从几号开始, 删几个, 要插入的东西...)。一个方法搞定增、删、替换，工作中天天用。记不住没关系，下面表格背。

// ① 只删除：从编号1开始，删1个
let arr = ["苹果", "香蕉", "葡萄"];

// 香蕉被抽走
arr.splice(1, 1);

// ② 删+换：编号1删1个，顺手塞个橙子
// ③ 只加不删：删几个填0，在编号2插两个
arr.splice(1, 1, "橙子");

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 递被删东西；它们都直接改原数组。

本页重点

API	作用	参数	返回值	代码示例
arr.push(x)	末尾加一个	要加的元素	新长度	let arr = [1, 2]; arr.push(3); // [1,2,3]
arr.pop()	末尾删一个	无	被删掉的元素	let last = arr.pop(); // 去掉末尾
arr.unshift(x)	开头加一个	要加的元素	新长度	arr.unshift(0); // 插到最前面
arr.shift()	开头删一个	无	被删掉的元素	let first = arr.shift(); // 去掉最前
arr.splice(i,n)	中间删/插，改原数组	起始编号、删几个	被删元素组成的数组	arr.splice(1, 1); // 从下标1删1个