当前位置:首页 > JavaScript

js列表实现增删查改

2026-04-04 21:37:19JavaScript

使用数组实现增删查改

JavaScript中数组(Array)是最常用的列表结构,以下是基于数组的增删查改操作示例:

初始化数组

let list = [1, 2, 3, 4];

增加元素

// 末尾添加
list.push(5); // [1, 2, 3, 4, 5]

// 开头添加
list.unshift(0); // [0, 1, 2, 3, 4, 5]

// 指定位置插入
list.splice(2, 0, 'new'); // [0, 1, 'new', 2, 3, 4, 5]

删除元素

// 末尾删除
list.pop(); // [0, 1, 'new', 2, 3, 4]

// 开头删除
list.shift(); // [1, 'new', 2, 3, 4]

// 指定位置删除
list.splice(1, 1); // [1, 2, 3, 4]

查询元素

// 按索引查询
let item = list[1]; // 2

// 按值查询索引
let index = list.indexOf(3); // 2

// 条件查询
let found = list.find(x => x > 2); // 3

修改元素

// 直接赋值修改
list[1] = 'updated'; // [1, 'updated', 3, 4]

// 批量修改
list = list.map(x => x * 2); // [2, 'updatedupdated', 6, 8]

使用链表实现增删查改

如需实现链表结构,需先定义节点类:

class ListNode {
  constructor(val, next = null) {
    this.val = val;
    this.next = next;
  }
}

初始化链表

let head = new ListNode(1, new ListNode(2, new ListNode(3)));

增加节点

// 头部插入
head = new ListNode(0, head);

// 尾部插入
let current = head;
while (current.next) current = current.next;
current.next = new ListNode(4);

// 指定位置插入
let pos = 1;
current = head;
for (let i = 0; i < pos - 1; i++) current = current.next;
current.next = new ListNode('new', current.next);

删除节点

// 头部删除
head = head.next;

// 尾部删除
current = head;
while (current.next.next) current = current.next;
current.next = null;

// 指定位置删除
pos = 2;
current = head;
for (let i = 0; i < pos - 1; i++) current = current.next;
current.next = current.next.next;

查询节点

// 按索引查询
pos = 1;
current = head;
for (let i = 0; i < pos; i++) current = current.next;
let nodeVal = current.val;

// 按值查询
current = head;
while (current && current.val !== 3) current = current.next;
let targetNode = current;

修改节点

// 直接修改值
pos = 1;
current = head;
for (let i = 0; i < pos; i++) current = current.next;
current.val = 'updated';

性能对比

  • 数组:随机访问O(1),插入/删除头部O(n),插入/删除尾部O(1)/O(1)
  • 链表:随机访问O(n),插入/删除头部O(1),插入/删除尾部O(n)

根据需求选择数据结构:

js列表实现增删查改

  • 频繁随机访问 → 数组
  • 频繁插入删除 → 链表

标签: 列表js
分享给朋友:

相关文章

js 实现vue模板

js 实现vue模板

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

js实现报表

js实现报表

使用JavaScript实现报表 在JavaScript中实现报表功能可以通过多种方式完成,常见的方法包括使用原生JavaScript、第三方库(如Chart.js、D3.js)或结合后端数据渲染。以…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…

js节流实现

js节流实现

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

js 实现滚动

js 实现滚动

实现滚动的方法 使用 window.scrollTo() window.scrollTo() 方法可以滚动到文档中的特定位置。可以指定 x 和 y 坐标,或者使用平滑滚动的选项。 // 滚动到指定位…