当前位置:首页 > 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实现轮播

实现基础轮播效果 使用HTML结构创建轮播容器和图片元素: <div class="carousel"> <div class="carousel-inner">…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 使用JavaScript实现拖拽功能需要监听鼠标事件,包括mousedown、mousemove和mouseup。以下是实现的基本逻辑: const draggableEleme…

js实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

js实现

js实现

实现 JavaScript 功能的方法 在 JavaScript 中实现特定功能通常涉及多个步骤。以下是常见的实现方法: 基础语法和变量声明 使用 let 或 const 声明变量: let…