怎样用JavaScript从数组中删除元素

在JavaScript开发中，数组是最常用的数据结构之一，很多时候我们需要从数组中删除不需要的元素。不同的删除场景对应不同的方法，下面我们结合实际场景和代码示例，详细介绍几种常用的数组元素删除方式。

一、删除数组末尾的元素：pop()方法

如果只需要删除数组最后一个元素，最简便的方式是使用数组自带的pop()方法。这个方法会修改原数组，删除最后一个元素，并且返回被删除的元素。

// 定义一个包含多个元素的数组
let fruits = ['苹果', '香蕉', '橙子', '葡萄'];
console.log('原数组：', fruits); // 输出：['苹果', '香蕉', '橙子', '葡萄']

// 调用pop方法删除最后一个元素
let removedItem = fruits.pop();
console.log('被删除的元素：', removedItem); // 输出：葡萄
console.log('删除后的数组：', fruits); // 输出：['苹果', '香蕉', '橙子']

二、删除数组开头的元素：shift()方法

如果需要删除数组的第一个元素，可以使用shift()方法。和pop()类似，这个方法也会直接修改原数组，删除第一个元素并返回被删除的元素。

let numbers = [10, 20, 30, 40, 50];
console.log('原数组：', numbers); // 输出：[10, 20, 30, 40, 50]

// 调用shift方法删除第一个元素
let firstRemoved = numbers.shift();
console.log('被删除的元素：', firstRemoved); // 输出：10
console.log('删除后的数组：', numbers); // 输出：[20, 30, 40, 50]

三、删除指定位置的元素：splice()方法

当需要删除数组中任意位置的一个或多个元素时，splice()方法是最灵活的选择。它的语法是数组.splice(起始索引, 删除个数, 新增元素1, 新增元素2...)，其中前两个参数是删除操作必需的，后面可选的参数用于在删除位置插入新元素。splice()会修改原数组，返回一个由被删除元素组成的新数组。

let colors = ['红', '橙', '黄', '绿', '蓝', '紫'];
console.log('原数组：', colors); // 输出：['红', '橙', '黄', '绿', '蓝', '紫']

// 从索引2开始，删除2个元素
let removedColors = colors.splice(2, 2);
console.log('被删除的元素：', removedColors); // 输出：['黄', '绿']
console.log('删除后的数组：', colors); // 输出：['红', '橙', '蓝', '紫']

// 删除的同时插入新元素
let moreColors = ['青', '粉'];
colors.splice(1, 0, ...moreColors); // 从索引1开始，删除0个元素，插入两个新元素
console.log('插入后的数组：', colors); // 输出：['红', '青', '粉', '橙', '蓝', '紫']

四、删除满足条件的元素：filter()方法

如果我们想删除所有符合某个条件的元素，比如删除数组中所有的偶数，或者删除所有值为null的元素，使用filter()方法会更合适。filter()不会修改原数组，而是返回一个符合条件的新数组，我们可以把新数组赋值给原变量来实现删除效果。

let scores = [85, 92, 68, 45, 78, 90, 55];
console.log('原数组：', scores); // 输出：[85, 92, 68, 45, 78, 90, 55]

// 删除所有低于60分的成绩，保留及格的成绩
let passedScores = scores.filter(score => score >= 60);
console.log('删除不及格成绩后的数组：', passedScores); // 输出：[85, 92, 68, 78, 90]

// 也可以直接覆盖原数组
scores = scores.filter(score => score >= 60);
console.log('覆盖后的原数组：', scores); // 输出：[85, 92, 68, 78, 90]

五、通过索引删除单个元素：结合indexOf和splice

如果我们知道要删除的元素的值，但不知道它的索引，可以先使用indexOf()方法找到元素的索引，再用splice()删除。不过要注意，indexOf()只会返回第一个匹配元素的索引，如果数组中有多个相同的值，只会删除第一个。

let hobbies = ['篮球', '足球', '羽毛球', '跑步', '足球'];
console.log('原数组：', hobbies); // 输出：['篮球', '足球', '羽毛球', '跑步', '足球']

// 找到第一个'足球'的索引
let targetIndex = hobbies.indexOf('足球');
if (targetIndex !== -1) {
  // 如果找到了元素，就删除它
  hobbies.splice(targetIndex, 1);
}
console.log('删除第一个足球后的数组：', hobbies); // 输出：['篮球', '羽毛球', '跑步', '足球']

方法选择建议

不同的删除场景可以对应选择不同的方法，我们可以参考下面的表格快速判断：

实际开发中可以根据需求选择合适的方法，如果需要保留原数组不被修改，优先选择filter()这类返回新数组的方法；如果允许修改原数组，使用pop()、shift()、splice()会更高效。

JavaScript数组删除pop方法shift方法splice方法filter方法 本作品最后修改时间：2026-05-23 22:57:04