跳到主要内容

JavaScript 数组删除元素

在 JavaScript 编程中,删除数组元素是一项常见的操作。无论是开发网页应用、处理数据还是构建交互式界面,你都需要掌握如何从数组中移除元素。本文将全面介绍 JavaScript 中删除数组元素的多种方法,帮助初学者建立坚实的基础。

数组删除操作概述

JavaScript 提供了多种方法来删除数组元素,每种方法有其特定的用例和行为特点:

  • 从数组末尾删除元素
  • 从数组开头删除元素
  • 从数组中间删除元素
  • 根据元素的值或条件删除元素
  • 删除并替换元素

让我们详细了解这些方法。

从数组末尾删除元素:pop() 方法

pop() 方法删除数组中的最后一个元素,并返回该元素。这个方法会改变原数组

javascript
const fruits = ["苹果", "香蕉", "橙子", "芒果"];

// 使用 pop() 删除最后一个元素
const removedFruit = fruits.pop();

console.log("移除的水果:", removedFruit); // 输出: 移除的水果: 芒果
console.log("剩余水果:", fruits); // 输出: 剩余水果: ["苹果", "香蕉", "橙子"]

从数组开头删除元素:shift() 方法

shift() 方法删除数组中的第一个元素,并返回该元素。这个方法也会改变原数组

javascript
const fruits = ["苹果", "香蕉", "橙子", "芒果"];

// 使用 shift() 删除第一个元素
const removedFruit = fruits.shift();

console.log("移除的水果:", removedFruit); // 输出: 移除的水果: 苹果
console.log("剩余水果:", fruits); // 输出: 剩余水果: ["香蕉", "橙子", "芒果"]
性能提示

shift() 方法会导致数组中所有剩余元素的索引位置向前移动,对于大型数组可能会影响性能。

从特定位置删除元素:splice() 方法

splice() 方法是 JavaScript 中最强大的数组操作方法之一,它可以删除、替换或添加数组元素。该方法会改变原数组,并返回被删除的元素组成的数组。

基本语法

javascript
array.splice(startIndex, deleteCount, item1, item2, ...)
  • startIndex:开始更改的位置(索引)
  • deleteCount:要删除的元素数量
  • item1, item2, ...:可选,要添加的新元素

删除示例

javascript
const fruits = ["苹果", "香蕉", "橙子", "芒果", "葡萄"];

// 从索引 1 开始,删除 2 个元素
const removedFruits = fruits.splice(1, 2);

console.log("移除的水果:", removedFruits); // 输出: 移除的水果: ["香蕉", "橙子"]
console.log("剩余水果:", fruits); // 输出: 剩余水果: ["苹果", "芒果", "葡萄"]

删除并添加新元素

javascript
const fruits = ["苹果", "香蕉", "橙子", "芒果"];

// 从索引 1 开始,删除 2 个元素,并添加新元素
const removedFruits = fruits.splice(1, 2, "草莓", "樱桃");

console.log("移除的水果:", removedFruits); // 输出: 移除的水果: ["香蕉", "橙子"]
console.log("更新后的水果:", fruits); // 输出: 更新后的水果: ["苹果", "草莓", "樱桃", "芒果"]

使用 filter() 创建新数组(不修改原数组)

filter() 方法创建一个新数组,其中包含通过指定条件测试的所有元素。它不会改变原数组

javascript
const numbers = [1, 2, 3, 4, 5, 6];

// 删除所有偶数(实际上是创建一个只有奇数的新数组)
const oddNumbers = numbers.filter(number => number % 2 !== 0);

console.log("原始数组:", numbers); // 输出: 原始数组: [1, 2, 3, 4, 5, 6]
console.log("过滤后的数组:", oddNumbers); // 输出: 过滤后的数组: [1, 3, 5]

使用 filter() 根据值删除特定元素:

javascript
const fruits = ["苹果", "香蕉", "橙子", "香蕉", "芒果"];

// 删除所有 "香蕉"
const withoutBananas = fruits.filter(fruit => fruit !== "香蕉");

console.log("原始数组:", fruits); // 输出: 原始数组: ["苹果", "香蕉", "橙子", "香蕉", "芒果"]
console.log("过滤后的数组:", withoutBananas); // 输出: 过滤后的数组: ["苹果", "橙子", "芒果"]
提示

当你不想修改原始数组时,filter() 是一个很好的选择。它遵循函数式编程的不可变原则。

使用 delete 操作符

JavaScript 的 delete 操作符可以删除数组中的元素,但它会在数组中留下一个"空洞"(undefined),而不是重新调整数组的索引。不建议使用此方法,但了解它的工作方式很重要。

javascript
const fruits = ["苹果", "香蕉", "橙子", "芒果"];

// 使用 delete 删除索引 1 处的元素
delete fruits[1];

console.log(fruits); // 输出: ["苹果", undefined, "橙子", "芒果"]
console.log(fruits.length); // 输出: 4(长度不变)
注意事项

使用 delete 操作符会将数组元素值设置为 undefined,但不会改变数组长度或重新排列其他元素的索引。这可能导致意外的行为,因此通常不推荐用于数组操作。

清空数组

有时候你可能需要删除数组中的所有元素。这里有几种方法:

方法 1: 将长度设置为零

javascript
const fruits = ["苹果", "香蕉", "橙子", "芒果"];
fruits.length = 0;
console.log(fruits); // 输出: []

方法 2: 赋值为空数组

javascript
let fruits = ["苹果", "香蕉", "橙子", "芒果"];
fruits = [];
console.log(fruits); // 输出: []
备注

第二种方法创建了一个新的空数组并分配给变量。如果有其他变量引用原始数组,它们将继续引用原始数组。

方法 3: 使用 splice 方法

javascript
const fruits = ["苹果", "香蕉", "橙子", "芒果"];
fruits.splice(0, fruits.length);
console.log(fruits); // 输出: []

实际应用案例

购物车项目移除

假设我们正在构建一个在线购物网站,需要实现从购物车中移除商品的功能:

javascript
// 购物车数组
let cart = [
{ id: 1, name: "笔记本电脑", price: 5999, quantity: 1 },
{ id: 2, name: "键盘", price: 299, quantity: 1 },
{ id: 3, name: "鼠标", price: 99, quantity: 2 },
{ id: 4, name: "显示器", price: 1299, quantity: 1 }
];

// 通过商品ID删除购物车中的商品
function removeFromCart(productId) {
// 找到商品在数组中的索引
const index = cart.findIndex(item => item.id === productId);

// 如果找到了商品,则从购物车中移除
if (index !== -1) {
cart.splice(index, 1);
console.log(`已从购物车中移除商品 ${productId}`);
} else {
console.log(`购物车中未找到商品 ${productId}`);
}
}

console.log("原始购物车:", cart);

// 移除键盘
removeFromCart(2);
console.log("移除键盘后的购物车:", cart);

// 移除不存在的商品
removeFromCart(5);

// 使用 filter 方法重新实现(不修改原数组)
function removeFromCartImmutable(productId) {
return cart.filter(item => item.id !== productId);
}

// 创建移除鼠标后的新购物车
const newCart = removeFromCartImmutable(3);
console.log("使用不可变方法移除鼠标后:", newCart);
console.log("原始购物车仍然保持不变:", cart);

任务列表管理

假设我们正在开发一个任务管理应用,需要实现删除已完成任务或特定任务的功能:

javascript
let tasks = [
{ id: 1, text: "学习 JavaScript", completed: true },
{ id: 2, text: "构建网站", completed: false },
{ id: 3, text: "阅读技术文章", completed: true },
{ id: 4, text: "锻炼身体", completed: false }
];

// 删除所有已完成的任务
function removeCompletedTasks() {
tasks = tasks.filter(task => !task.completed);
}

// 删除特定ID的任务
function removeTask(id) {
const index = tasks.findIndex(task => task.id === id);
if (index !== -1) {
tasks.splice(index, 1);
return true;
}
return false;
}

console.log("原始任务列表:", tasks);

// 删除ID为3的任务
removeTask(3);
console.log("删除特定任务后:", tasks);

// 删除所有已完成的任务
removeCompletedTasks();
console.log("删除已完成任务后:", tasks);

性能比较

不同的数组删除方法在性能上有差异,特别是对大型数组:

  • 从数组末尾删除元素(pop())性能最好
  • 从数组开头删除元素(shift())需要重新索引所有元素,性能较差
  • 从数组中间删除元素(splice())需要重新索引删除位置后的所有元素
  • 使用 filter() 创建新数组性能适中,但会消耗额外内存

方法对比总结

方法修改原数组返回值适用场景
pop()✅ 是被删除的元素删除最后一个元素
shift()✅ 是被删除的元素删除第一个元素
splice()✅ 是被删除元素的数组删除指定位置的元素或多个元素
filter()❌ 否新数组根据条件删除元素(函数式方法)
delete✅ 是undefined不推荐用于数组
length = 0✅ 是undefined清空整个数组

总结

JavaScript 提供了多种删除数组元素的方法,每种方法都有其特定的用例:

  1. 使用 pop() 从数组末尾删除元素
  2. 使用 shift() 从数组开头删除元素
  3. 使用 splice() 从任意位置删除一个或多个元素
  4. 使用 filter() 创建一个不包含特定元素的新数组
  5. 将数组 length 设置为 0 来快速清空数组

当你设计程序时,应该根据具体需求选择最合适的方法。考虑因素包括:是否需要保留原始数组、删除操作的频率和位置、数组大小等。

练习题

为了巩固所学知识,尝试完成以下练习:

  1. 编写一个函数,从数组中删除所有重复元素
  2. 创建一个函数,从数组中删除所有假值(false, null, 0, "", undefined, NaN)
  3. 实现一个购物车应用,能够添加商品、删除商品、清空购物车
  4. 创建一个函数,删除数组中指定索引范围内的所有元素

扩展阅读

通过掌握这些数组删除方法,你将能够更有效地处理 JavaScript 中的数据操作,无论是在前端还是后端开发中。