当前位置:首页 > 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]

使用 popshift 删除首尾元素

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 元素

使用 removeChildremove 方法删除 DOM 节点。

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

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

使用 Lodash 库删除元素

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

js实现删除

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 }

注意事项

  • splice 会修改原数组,而 filterslice 返回新数组。
  • delete 操作符不会影响数组长度,仅将对应位置设为 empty
  • 删除 DOM 元素时需确保元素已加载完成。

标签: js
分享给朋友:

相关文章

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScrip…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…