当前位置:首页 > JavaScript

js列表实现

2026-04-05 22:23:50JavaScript

列表数据结构的基本概念

列表是一种线性数据结构,元素按顺序排列,支持动态增删。在JavaScript中,列表可通过数组或对象模拟,核心操作包括添加、删除、访问和遍历。

js列表实现

使用数组实现列表

JavaScript数组原生支持列表操作:

js列表实现

// 创建列表
const list = [1, 2, 3];

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

// 删除元素(按索引)
list.splice(1, 1); // 删除索引1的元素,结果为[1, 3, 4]

// 访问元素
console.log(list[0]); // 输出1

// 遍历列表
list.forEach(item => console.log(item));

使用对象模拟列表(键值存储)

适用于需要非数字键的场景:

const list = {};
let index = 0;

// 添加元素
list[index++] = 'a';
list[index++] = 'b';

// 删除元素
delete list[0]; // 删除键为0的元素

// 遍历列表
Object.values(list).forEach(item => console.log(item));

自定义列表类(封装核心方法)

实现一个可扩展的列表类:

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

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

  remove(index) {
    if (index >= 0 && index < this.items.length) {
      this.items.splice(index, 1);
    }
  }

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

  size() {
    return this.items.length;
  }
}

// 使用示例
const myList = new CustomList();
myList.add('x');
myList.add('y');
console.log(myList.get(1)); // 输出'y'

性能优化与注意事项

  • 动态扩容:JavaScript数组自动处理内存,但频繁插入/删除可能触发多次内存分配。
  • 时间复杂度
    • push/pop 为 O(1),shift/unshift 为 O(n)。
    • splice 平均 O(n),需谨慎使用。
  • 不可变操作:考虑使用扩展运算符或concat避免原数组修改:
    const newList = [...list, 'newItem']; // 添加元素且不改变原列表

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

相关文章

js实现计算器

js实现计算器

实现基础计算器功能 使用JavaScript创建一个基础计算器需要处理数字输入、运算符逻辑和结果显示。以下是一个简单的实现示例: let currentInput = '0'; let previo…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(f…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…

js实现授权

js实现授权

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

js实现交换

js实现交换

交换变量的方法 在JavaScript中,交换两个变量的值有多种方法。以下是常见的几种实现方式: 使用临时变量 通过引入一个临时变量来存储其中一个变量的值,实现交换: let a = 1; le…