当前位置:首页 > JavaScript

js实现增删

2026-03-14 18:06:59JavaScript

实现数组的增删操作

增加元素

使用 push() 方法在数组末尾添加新元素:

let fruits = ['apple', 'banana'];
fruits.push('orange'); 
// ['apple', 'banana', 'orange']

使用 unshift() 方法在数组开头添加新元素:

fruits.unshift('grape');
// ['grape', 'apple', 'banana', 'orange']

删除元素

使用 pop() 方法删除数组最后一个元素:

fruits.pop();
// ['grape', 'apple', 'banana']

使用 shift() 方法删除数组第一个元素:

fruits.shift();
// ['apple', 'banana']

使用 splice() 方法删除指定位置的元素:

fruits.splice(1, 1); // 从索引1开始删除1个元素
// ['apple']

实现对象的增删操作

增加属性

直接赋值添加新属性:

let person = { name: 'John' };
person.age = 30;
// { name: 'John', age: 30 }

使用 Object.assign() 方法:

Object.assign(person, { gender: 'male' });
// { name: 'John', age: 30, gender: 'male' }

删除属性

使用 delete 操作符删除属性:

delete person.age;
// { name: 'John', gender: 'male' }

DOM元素的增删操作

创建和添加元素

创建新元素并添加到DOM:

const newDiv = document.createElement('div');
newDiv.textContent = 'Hello World';
document.body.appendChild(newDiv);

删除元素

使用 remove() 方法:

const element = document.querySelector('div');
element.remove();

使用 removeChild() 方法:

js实现增删

const parent = document.querySelector('body');
const child = document.querySelector('div');
parent.removeChild(child);

标签: js
分享给朋友:

相关文章

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与响应式…

js实现图

js实现图

JavaScript 实现图的常用方法 在 JavaScript 中,图(Graph)可以通过多种方式实现,常见的包括邻接表(Adjacency List)和邻接矩阵(Adjacency Matrix…

js实现上传图片

js实现上传图片

使用HTML5的File API实现图片上传 HTML5的File API允许通过JavaScript访问用户选择的文件。需要创建一个文件输入元素,并监听其change事件。 <input t…

js实现删除

js实现删除

使用 splice 方法删除数组元素 splice 方法可以删除数组中的元素,并返回被删除的元素。它接受两个参数:起始索引和要删除的元素数量。 const array = [1, 2, 3, 4…

js实现同步

js实现同步

同步与异步的概念 在JavaScript中,同步代码会按照顺序执行,每一行代码必须等待上一行代码执行完成后才能运行。异步代码则允许在等待某些操作(如网络请求)完成的同时继续执行其他代码。 实现同步的…

js实现筛选

js实现筛选

JavaScript 实现数据筛选的方法 使用 Array.filter() 方法 Array.filter() 是 JavaScript 中最常用的筛选方法,它会创建一个新数组,包含通过回调函数测试…