JavaScript 数组方法：使用 push、pop、shift 和 unshift 修改数组

在上一章中，我们探索了创建和访问数组的基础知识。

现在，我们将深入研究如何使用内置的数组方法动态地修改数组。

1. 修改数组：push()

push() 方法将一个或多个元素添加到数组的 末尾。它会修改原始数组，并返回数组的 新长度。

1.1 基本用法

let fruits = ['苹果', '香蕉'];
let newLength = fruits.push('橙子'); // 将 '橙子' 添加到末尾
console.log(fruits); // 输出: ['苹果', '香蕉', '橙子']
console.log(newLength); // 输出: 3

在这个例子中，push('橙子') 将 "橙子" 添加到了 fruits 数组的末尾。newLength 变量存储了更新后的数组长度 (3)。

1.2 添加多个元素

push() 方法也可以一次性添加多个元素：

let fruits = ['苹果', '香蕉'];
fruits.push('橙子', '葡萄');
console.log(fruits); // 输出: ['苹果', '香蕉', '橙子', '葡萄']

在这里，我们在一次操作中将 "橙子" 和 "葡萄" 都添加到了 fruits 数组的末尾。

1.3 数字示例

let numbers = [1, 2, 3];
numbers.push(4, 5, 6);
console.log(numbers); // 输出: [1, 2, 3, 4, 5, 6]

1.4 实际应用

想象一下你在管理一个歌曲播放列表。当用户选择新歌时，你可以使用 push() 将新歌添加到播放列表的末尾。

let playlist = ['歌曲 1', '歌曲 2'];
let newSong = '歌曲 3';
playlist.push(newSong);
console.log(playlist); // 输出: ['歌曲 1', '歌曲 2', '歌曲 3']

2. 移除元素：pop()

pop() 方法从数组中移除 最后一个 元素。它会修改原始数组，并返回 被移除的元素。如果数组为空，pop() 返回 undefined。

2.1 基本用法

let fruits = ['苹果', '香蕉', '橙子'];
let removedFruit = fruits.pop(); // 从末尾移除 '橙子'
console.log(fruits); // 输出: ['苹果', '香蕉']
console.log(removedFruit); // 输出: '橙子'

在这个例子中，pop() 从 fruits 数组中移除了 "橙子"，并且 removedFruit 变量存储了被移除的值。

2.2 在空数组上使用 pop()

let emptyArray = [];
let removedElement = emptyArray.pop();
console.log(removedElement); // 输出: undefined
console.log(emptyArray); // 输出: []

如上所示，在空数组上使用 pop() 会返回 undefined，并且数组保持为空。

2.3 实际应用

考虑文本编辑器中的撤销功能。你可以使用 pop() 从操作堆栈中移除最后一个动作。

let actions = ['输入了 a', '输入了 b', '输入了 c'];
let lastAction = actions.pop();
console.log(actions); // 输出: ['输入了 a', '输入了 b']
console.log(lastAction); // 输出: '输入了 c'

3. 添加元素到开头：unshift()

unshift() 方法将一个或多个元素添加到数组的 开头。它会修改原始数组，并返回数组的 新长度。

3.1 基本用法

let fruits = ['香蕉', '橙子'];
let newLength = fruits.unshift('苹果'); // 将 '苹果' 添加到开头
console.log(fruits); // 输出: ['苹果', '香蕉', '橙子']
console.log(newLength); // 输出: 3

在这个例子中，unshift('苹果') 将 "苹果" 添加到了 fruits 数组的开头。newLength 变量存储了更新后的数组长度 (3)。

3.2 添加多个元素

与 push() 类似，unshift() 方法也可以一次性添加多个元素：

let fruits = ['橙子'];
fruits.unshift('苹果', '香蕉');
console.log(fruits); // 输出: ['苹果', '香蕉', '橙子']

在这里，"苹果" 和 "香蕉" 都被添加到了数组的开头。

3.3 实际应用

想象一下管理一个任务队列。你可以使用 unshift() 将一个高优先级任务添加到队列的最前面。

let taskQueue = ['任务 1', '任务 2'];
let urgentTask = '紧急任务';
taskQueue.unshift(urgentTask);
console.log(taskQueue); // 输出: ['紧急任务', '任务 1', '任务 2']

4. 从开头移除元素：shift()

shift() 方法从数组中移除 第一个 元素。它会修改原始数组，并返回 被移除的元素。如果数组为空，shift() 返回 undefined。

4.1 基本用法

let fruits = ['苹果', '香蕉', '橙子'];
let removedFruit = fruits.shift(); // 从开头移除 '苹果'
console.log(fruits); // 输出: ['香蕉', '橙子']
console.log(removedFruit); // 输出: '苹果'

在这个例子中，shift() 从 fruits 数组中移除了 "苹果"，并且 removedFruit 变量存储了被移除的值。

4.2 在空数组上使用 shift()

let emptyArray = [];
let removedElement = emptyArray.shift();
console.log(removedElement); // 输出: undefined
console.log(emptyArray); // 输出: []

与 pop() 一样，在空数组上使用 shift() 会返回 undefined 并且不修改数组。

4.3 实际应用

考虑处理队列中的任务。你可以使用 shift() 移除并处理队列中的下一个任务。

let taskQueue = ['任务 1', '任务 2', '任务 3'];
let nextTask = taskQueue.shift();
console.log(taskQueue); // 输出: ['任务 2', '任务 3']
console.log(nextTask); // 输出: '任务 1'

5. 数组修改方法对比

理解这些方法之间的区别对于选择正确的工具来有效地操作数组数据至关重要。