当前位置：首页 > JavaScript

js实现删除

2026-01-16 12:10:54JavaScript

使用 `splice` 方法删除数组元素

splice 方法可以删除数组中的元素，并返回被删除的元素。它接受两个参数：起始索引和要删除的元素数量。

const array = [1, 2, 3, 4, 5];
array.splice(2, 1); // 从索引 2 开始删除 1 个元素
console.log(array); // 输出: [1, 2, 4, 5]

使用 `filter` 方法删除符合条件的元素

filter 方法会创建一个新数组，包含所有通过测试函数的元素。可以通过条件筛选删除特定元素。

const array = [1, 2, 3, 4, 5];
const newArray = array.filter(item => item !== 3); // 删除值为 3 的元素
console.log(newArray); // 输出: [1, 2, 4, 5]

使用 `delete` 操作符删除对象属性

delete 操作符可以删除对象的某个属性，但不会改变数组长度，仅将对应位置设为 empty。

const array = [1, 2, 3, 4, 5];
delete array[2]; // 删除索引 2 的元素
console.log(array); // 输出: [1, 2, empty, 4, 5]

使用 `pop` 或 `shift` 删除首尾元素

pop 删除最后一个元素，shift 删除第一个元素，均会修改原数组。

const array = [1, 2, 3, 4, 5];
array.pop(); // 删除最后一个元素
console.log(array); // 输出: [1, 2, 3, 4]  

array.shift(); // 删除第一个元素
console.log(array); // 输出: [2, 3, 4]

使用 `slice` 结合展开运算符删除元素

slice 可以截取数组片段，结合展开运算符实现删除特定元素。

const array = [1, 2, 3, 4, 5];
const indexToRemove = 2;
const newArray = [...array.slice(0, indexToRemove), ...array.slice(indexToRemove + 1)];
console.log(newArray); // 输出: [1, 2, 4, 5]

删除对象中的属性

使用 delete 操作符或解构赋值删除对象的属性。

const obj = { a: 1, b: 2, c: 3 };
delete obj.b; // 删除属性 b
console.log(obj); // 输出: { a: 1, c: 3 }  

// 使用解构赋值删除属性
const { b, ...rest } = obj;
console.log(rest); // 输出: { a: 1, c: 3 }

删除 DOM 元素

使用 removeChild 或 remove 方法删除 DOM 节点。

const element = document.getElementById("target");
element.parentNode.removeChild(element); // 传统方法  

// 现代方法
element.remove();

使用 Lodash 库删除元素

Lodash 提供 _.without 或 _.omit 方法删除数组或对象的元素。

const _ = require('lodash');
const array = [1, 2, 3, 4, 5];
const newArray = _.without(array, 3); // 删除值为 3 的元素
console.log(newArray); // 输出: [1, 2, 4, 5]  

const obj = { a: 1, b: 2, c: 3 };
const newObj = _.omit(obj, 'b'); // 删除属性 b
console.log(newObj); // 输出: { a: 1, c: 3 }