欢迎访问广西陌上网络科技有限责任公司官网 · 专注企业数字化管理软件定制开发 客服热线:黄生 15678982250

JS删除数组指定元素

更新时间:2025-02-17 浏览:4433 标签:JS 数组 

1. 已知元素值,使用 filter() 方法

filter() 方法会创建一个新数组,其包含通过所提供函数实现的测试的所有元素。这种方法不会改变原数组,而是返回一个新数组。

示例代码:

javascript

const arr = [1, 2, 3, 4, 5];

const elementToRemove = 3;

const newArr = arr.filter(item => item!== elementToRemove);

console.log(newArr); // 输出: [1, 2, 4, 5]

console.log(arr);    // 输出: [1, 2, 3, 4, 5](原数组未改变)

代码解释:

arr.filter(item => item!== elementToRemove) 会遍历数组 arr 中的每个元素 item,如果 item 不等于要删除的元素 elementToRemove,则将该元素添加到新数组中。

2. 已知元素索引,使用 splice() 方法

splice() 方法可以改变原数组,它可以删除、替换或添加元素。若要删除指定索引的元素,可传入两个参数:起始索引和要删除的元素个数。

示例代码:

javascript

const arr = ['apple', 'banana', 'cherry', 'date'];

const indexToRemove = 1;

arr.splice(indexToRemove, 1);

console.log(arr); // 输出: ['apple', 'cherry', 'date']

代码解释:

arr.splice(indexToRemove, 1) 表示从索引 indexToRemove 开始,删除 1 个元素。原数组 arr 会被修改。

3. 对于对象数组,根据对象属性删除元素

当数组元素为对象时,可结合 findIndex() 和 splice() 方法根据对象的某个属性值删除元素。

示例代码:

javascript

const arr = [

  { id: 1, name: 'John' },

  { id: 2, name: 'Jane' },

  { id: 3, name: 'Bob' }

];

const idToRemove = 2;

const index = arr.findIndex(item => item.id === idToRemove);

if (index!== -1) {

  arr.splice(index, 1);

}

console.log(arr); 

// 输出: [ { id: 1, name: 'John' }, { id: 3, name: 'Bob' } ]

代码解释:

arr.findIndex(item => item.id === idToRemove) 会查找数组中 id 等于 idToRemove 的元素的索引。

如果找到该元素(索引不为 -1),则使用 splice() 方法删除该元素。

4. 使用 pop() 和 shift() 方法删除特定位置元素(适用于首尾元素)

pop() 方法用于删除数组的最后一个元素,并返回该元素。

shift() 方法用于删除数组的第一个元素,并返回该元素。

示例代码:

javascript

const arr = [10, 20, 30];

// 删除最后一个元素

const lastElement = arr.pop();

console.log(lastElement); // 输出: 30

console.log(arr);         // 输出: [10, 20]


// 删除第一个元素

const firstElement = arr.shift();

console.log(firstElement); // 输出: 10

console.log(arr);          // 输出: [20]

代码解释:

arr.pop() 会删除并返回数组 arr 的最后一个元素。

arr.shift() 会删除并返回数组 arr 的第一个元素。这两个方法都会改变原数组。