当前位置:首页 > JavaScript

js列表实现

2026-04-05 22:23:50JavaScript

列表数据结构的基本概念

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

使用数组实现列表

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

// 创建列表
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));

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

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

js列表实现

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实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callback) {…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('image…

js实现复制到剪贴板

js实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClipb…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js节流实现

js节流实现

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