当前位置:首页 > JavaScript

js 实现list

2026-04-05 13:24:26JavaScript

在 JavaScript 中实现列表(List)功能可以通过数组(Array)或自定义数据结构完成。以下是几种常见方法:

使用内置数组

JavaScript 数组原生支持列表操作,包括增删改查和遍历:

const list = [1, 2, 3]; // 初始化
list.push(4); // 添加元素到末尾
list.unshift(0); // 添加元素到开头
list.pop(); // 移除末尾元素
list.shift(); // 移除开头元素
list.splice(1, 1); // 删除索引1的元素

自定义链表实现

对于需要频繁插入/删除的场景,可手动实现链表:

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

class LinkedList {
  constructor() {
    this.head = null;
    this.size = 0;
  }

  add(val) {
    const node = new ListNode(val);
    if (!this.head) this.head = node;
    else {
      let current = this.head;
      while (current.next) current = current.next;
      current.next = node;
    }
    this.size++;
  }
}

使用 ES6 类封装

通过类封装增强数组功能:

class CustomList {
  constructor() {
    this.items = [];
  }

  add(item) {
    this.items.push(item);
  }

  remove(item) {
    const index = this.items.indexOf(item);
    if (index > -1) this.items.splice(index, 1);
  }

  get(index) {
    return this.items[index];
  }
}

不可变列表实现

使用扩展运算符实现不可变操作:

js 实现list

const original = [1, 2, 3];
const newList = [...original, 4]; // 添加元素
const filtered = original.filter(x => x !== 2); // 删除元素

性能注意事项

  • 数组的 push/pop 操作是 O(1),但 shift/unshift 是 O(n)
  • 链表插入/删除为 O(1),但随机访问需要 O(n)
  • 大数据量时考虑使用 TypedArray 或链表结构

标签: jslist
分享给朋友:

相关文章

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现授权

js实现授权

授权流程设计 授权流程通常涉及前端与后端的交互,常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程: 用户提交凭证(如用户名密码)到认证服务 服务端验证通过后生成包含用户信息的J…

js实现目录

js实现目录

实现目录的基本思路 在JavaScript中实现目录功能通常涉及以下几个核心步骤:解析文档中的标题元素(如h1-h6),动态生成目录结构,并添加交互逻辑(如点击跳转)。以下是具体实现方法: 解析标题…

js实现密码

js实现密码

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

js实现文字滚动

js实现文字滚动

实现文字滚动的几种方法 使用CSS动画实现滚动 通过CSS的@keyframes和transform属性可以实现平滑的文字滚动效果。 <style> .scroll-text { w…