本教程聚焦JavaScript 数组 push 与 pop 的使用，带你从入门到实战，整理成一份完整的前端开发必备技巧指南，帮助你掌握两大核心操作的语义、用法和高效实践。
快速上手：push 与 pop 的基本语义
push 的基本行为与返回值
在 JavaScript 中，push 方法用于在数组末尾追加一个或多个元素，它会直接修改原数组的长度并返回新的长度值。
示例演示如何向一个已有数组追加一个元素或多个元素，并观察长度变化和数组变化。
let arr = [1, 2, 3];
let newLen = arr.push(4); // 新长度为 4
console.log(arr); // [1, 2, 3, 4]
console.log(newLen); // 4
pop 的基本行为与返回值
pop 方法用于移除数组末尾的一个元素，它直接修改原数据，并返回被移除的元素；如果数组为空，则返回 undefined。
示例演示如何从数组末尾取出一个元素，同时观察数组状态与返回值。
let arr = [1, 2, 3, 4];
let last = arr.pop(); // 移除最后一个元素
console.log(arr); // [1, 2, 3]
console.log(last); // 4let empty = [];
console.log(empty.pop()); // undefined
实战应用：在前端开发中的典型场景
实现一个简单栈结构
使用 push 入栈、使用 pop 出栈，实现一个简单的栈结构，在回退、撤销或历史记录等场景中非常实用。
下面的示例展示了一个基本栈的入栈、读取栈顶以及出栈的流程。
// 简单栈实现
let stack = [];
stack.push('A');
stack.push('B');
const top = stack[stack.length - 1];
const popped = stack.pop();
console.log({ top, popped, stack }); // { top: 'B', popped: 'B', stack: ['A'] }
结合解构赋值和副作用控制
在一些场景下，配合解构赋值可以让代码更简洁，但要注意对原数组的修改。
例如，我们可以把栈顶元素解构出来，同时保留其余元素。
let stack = [1, 2, 3, 4];
let top = stack[stack.length - 1];
let rest = stack.slice(0, stack.length - 1);
console.log({ top, rest }); // top: 4, rest: [1,2,3]
注意事项与坑点
空数组中的 pop 与 push 的返回值
如前所述，pop 在空数组时返回 undefined，而 push 在空数组上仍会返回 1（添加后长度）。
理解这一点可以帮助你在逻辑判断中避免意外行为。
let a = [];
console.log(a.pop()); // undefined
console.log(a.length); // 0
console.log(a.push(1)); // 1
console.log(a); // [1]
对比其他方法的替代方案
在需要不修改原数组的场景，可以考虑使用 slice、concat 或解构赋值 等方式生成新数组，以保持不可变性。
通过不改变原数组来实现数据流的可预测性，有助于调试和单元测试。
let original = [1, 2, 3];
let copy = original.slice(); // 浅拷贝
copy.push(4);
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]
进阶技巧：与其他方法的协同使用
批量添加：使用 spread 与 push
当需要一次性把一个集合中的元素添加到末尾，可以结合 spread 运算符与 push，以减少代码量并提升可读性。
下面的示例展示了将一个数组的内容一次性追加到另一个数组末尾的写法。
let arr = [1, 2, 3];
arr.push(...[4, 5, 6]);
console.log(arr); // [1,2,3,4,5,6]
返回新数组的函数式写法
如果你需要返回新数组而不修改原数组，可以创建一个纯函数，先复制再使用 push。
通过这种方式可以保持原始数据不变，同时获得扩展后的结果。
function appendAll(arr, items){const copy = arr.slice();copy.push(...items);return copy;
}
let a = [1,2,3];
let b = appendAll(a, [4,5]);
console.log(a); // [1,2,3]
console.log(b); // [1,2,3,4,5]
