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

js实现删除

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 可以截取数组片段,结合展开运算符实现删除特定元素。

js实现删除

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 方法删除数组或对象的元素。

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实现日历

实现日历的基本思路 使用JavaScript实现日历的核心是动态生成日期表格,并处理月份切换逻辑。需要计算当前月的天数、起始星期几,并动态渲染到页面上。 获取当前日期信息 通过Date对象获取当前年…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js节流实现

js节流实现

节流的概念 节流(Throttle)是一种限制函数执行频率的技术,确保函数在一定时间间隔内只执行一次。常用于滚动事件、窗口调整等高频触发的场景。 基础实现方法 使用时间戳判断是否执行函数:…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…