当前位置:首页 > JavaScript

js实现list

2026-03-01 04:09:12JavaScript

在JavaScript中实现列表(List)可以通过多种方式完成,以下是常见的实现方法:

使用数组(Array)

数组是JavaScript中最常用的列表实现方式,支持动态增删元素和多种内置方法。

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

// 添加元素
list.push(4); // 末尾添加
list.unshift(0); // 开头添加

// 删除元素
list.pop(); // 删除末尾
list.shift(); // 删除开头

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

使用链表(Linked List)

如果需要更灵活的插入和删除操作,可以手动实现链表结构。

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

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

  // 添加节点
  append(value) {
    const newNode = new ListNode(value);
    if (!this.head) {
      this.head = newNode;
      return;
    }
    let current = this.head;
    while (current.next) {
      current = current.next;
    }
    current.next = newNode;
  }

  // 遍历链表
  traverse() {
    let current = this.head;
    while (current) {
      console.log(current.value);
      current = current.next;
    }
  }
}

const list = new LinkedList();
list.append(1);
list.append(2);
list.traverse();

使用Set

如果列表需要保证元素唯一性,可以使用Set数据结构。

const uniqueList = new Set();
uniqueList.add(1);
uniqueList.add(2);
uniqueList.add(1); // 重复元素不会添加

console.log([...uniqueList]); // 转换为数组

使用Map

如果需要键值对形式的列表,可以使用Map。

const mapList = new Map();
mapList.set('key1', 'value1');
mapList.set('key2', 'value2');

console.log(mapList.get('key1')); // 获取值

使用生成器实现惰性列表

对于大数据量的列表,可以使用生成器实现惰性求值。

js实现list

function* lazyList() {
  yield 1;
  yield 2;
  yield 3;
}

const list = lazyList();
console.log(list.next().value); // 1
console.log(list.next().value); // 2

选择建议

  • 需要快速随机访问和内置方法时,使用数组。
  • 需要频繁插入和删除操作时,考虑链表。
  • 需要唯一性时,使用Set。
  • 需要键值对时,使用Map。
  • 处理大数据量时,考虑生成器实现惰性列表。

标签: jslist
分享给朋友:

相关文章

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js实现授权

js实现授权

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

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…

js实现搜索

js实现搜索

实现搜索功能的方法 在JavaScript中实现搜索功能可以通过多种方式完成,以下是几种常见的实现方法。 使用数组的filter方法 通过数组的filter方法可以筛选出符合条件的数据项。假设有一个…

js实现刷新

js实现刷新

刷新当前页面 使用 location.reload() 方法可以强制刷新当前页面。该方法接受一个布尔参数,默认为 false,表示从缓存中加载页面;设为 true 时强制从服务器重新加载。 // 从…

js实现保存图片

js实现保存图片

使用Canvas绘制并保存图片 在HTML中创建一个Canvas元素,通过JavaScript绘制内容后转换为图片并保存。Canvas的toDataURL方法可将画布内容转为Base64编码的图片数据…