JavaScript——2.数组基础方法

JavaScript 数组 push、pop、unshift、shift 方法

一、push 方法

1.1 基础概念

push() 方法是 JavaScript 数组对象的一个内置方法，用于将一个或多个元素添加到数组的末尾，并返回新数组的长度。该方法会直接修改原数组。

1.2 语法

array.push(newElement1, newElement2, ..., newElementN);

其中，array 是要操作的数组，newElement1, newElement2, ..., newElementN 是要添加到数组末尾的元素。

1.3 简单示例

// 创建一个数组
let numbers = [10, 20, 30];
// 使用 push 方法将数字 40 添加到数组末尾，并返回新数组的长度
const length = numbers.push(40);
console.log(length); // 输出: 4
console.log(numbers); // 输出: [10, 20, 30, 40]

1.4 进阶示例

可以使用 push() 方法将多个元素添加到数组末尾，也可以使用扩展运算符将另一个数组的元素添加到当前数组末尾。

// 创建一个数组
let colors = ['red', 'green', 'blue'];
let newColors = ['yellow', 'purple'];
// 使用 push 方法将多个元素添加到数组末尾
colors.push('orange', 'pink');
console.log(colors); // 输出: ['red', 'green', 'blue', 'orange', 'pink']
// 使用扩展运算符将另一个数组的元素添加到当前数组末尾
colors.push(...newColors);
console.log(colors); // 输出: ['red', 'green', 'blue', 'orange', 'pink', 'yellow', 'purple']

1.5 注意事项

如果添加的元素类型为数组类型，仍然会被当作一个元素看待，只是这个元素是数组类型而已。如果要合并两个数组，请使用 concat() 函数。

let arr = [1, 2, 3];
// 将数组 [4, 5] 作为一个元素添加到 arr 数组末尾
arr.push([4, 5]);
console.log(arr); // 输出: [1, 2, 3, [4, 5]]

二、pop 方法

2.1 基础概念

pop() 方法用于从数组中移除最后一个元素，并返回移除的元素。该方法会直接修改原数组，使其长度减 1。如果数组为空，pop() 将返回 undefined。

2.2 语法

array.pop();

其中，array 是要操作的数组。

2.3 简单示例

// 创建一个数组
let fruits = ['apple', 'banana', 'orange'];
// 使用 pop 方法移除数组的最后一个元素，并返回该元素
const lastFruit = fruits.pop();
console.log(lastFruit); // 输出: 'orange'
console.log(fruits); // 输出: ['apple', 'banana']

2.4 进阶示例

可以结合 while 循环使用 pop() 方法清空数组。

// 创建一个数组
let numbers = [1, 2, 3, 4, 5];
// 循环使用 pop 方法移除数组元素，直到数组为空
while (numbers.length > 0) { 
  let removed = numbers.pop(); 
  console.log(removed); 
} 
console.log(numbers); // 输出: []

2.5 注意事项

pop() 方法没有参数，即使传入参数也不会影响其功能，它始终移除并返回数组的最后一个元素。

let arr = [1, 2, 3];
// 传入参数不会影响 pop 方法的功能
let removed = arr.pop(1);
console.log(removed); // 输出: 3
console.log(arr); // 输出: [1, 2]

三、unshift 方法

3.1 基础概念

unshift() 方法用于向数组的开头添加一个或多个元素，并返回新数组的长度。该方法会直接修改原数组，将已经存在的元素顺次地移到较高的下标处，以便留出空间。

3.2 语法

array.unshift(newElement1, newElement2, ..., newElementN);

其中，array 是要操作的数组，newElement1, newElement2, ..., newElementN 是要添加到数组开头的元素。

3.3 简单示例

// 创建一个数组
let arr = ['张三', '李四', '王五'];
// 使用 unshift 方法向数组开头添加元素，并返回新数组的长度
const count = arr.unshift('赵六', '小明');
console.log(count); // 输出: 5
console.log(arr); // 输出: ['赵六', '小明', '张三', '李四', '王五']

3.4 进阶示例

可以使用 unshift() 方法实现数组元素的反转添加。

// 创建一个数组
let numbers = [1, 2, 3];
let newNumbers = [4, 5, 6];
// 循环将 newNumbers 数组的元素添加到 numbers 数组开头
for (let i = 0; i < newNumbers.length; i++) { 
  numbers.unshift(newNumbers[i]); 
} 
console.log(numbers); // 输出: [6, 5, 4, 1, 2, 3]

3.5 注意事项

unshift() 方法在 Internet Explorer 中可能无法正确工作。同时，该方法会改变数组的长度，并且会影响原数组中元素的索引。

四、shift 方法

4.1 基础概念

shift() 方法用于移除并返回数组的第一个元素，同时数组长度减 1。当执行 shift() 操作时，数组中的所有元素都会向前移动一位来填补被移除元素留下的空位。

4.2 语法

array.shift();

其中，array 是要操作的数组。

4.3 简单示例

// 创建一个数组
let fruits = ['apple', 'banana', 'orange'];
// 使用 shift 方法移除数组的第一个元素，并返回该元素
const firstFruit = fruits.shift();
console.log(firstFruit); // 输出: 'apple'
console.log(fruits); // 输出: ['banana', 'orange']

4.4 进阶示例

可以使用 shift() 方法实现队列的功能，先进先出。

// 创建一个数组模拟队列
let queue = [1, 2, 3, 4, 5];
// 循环移除队列的第一个元素，直到队列为空
while (queue.length > 0) { 
  let element = queue.shift(); 
  console.log(element); 
} 
console.log(queue); // 输出: []

4.5 注意事项

由于 shift() 方法会导致数组中的所有元素向前移动一位，在处理大型数组时可能会影响性能。因此，在频繁需要从数组开头移除元素的场景下，可以考虑使用其他数据结构，如链表或双端队列。

五、总结

push、pop、unshift、shift 这四个方法是 JavaScript 数组中常用的操作方法，它们可以方便地对数组的开头和末尾进行元素的添加和删除操作。在使用这些方法时，需要注意它们会直接修改原数组，并且不同方法的性能特点也有所不同。通过合理运用这些方法，可以更加高效地处理数组数据。