当前位置:首页 > JavaScript

js 实现列表

2026-03-15 08:51:21JavaScript

使用数组创建列表

在JavaScript中,数组是最常见的列表实现方式。数组提供了一系列方法用于操作列表元素。

const list = [1, 2, 3, 4, 5];

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

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

// 访问元素
console.log(list[0]); // 访问第一个元素

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

使用链表实现列表

对于需要频繁插入/删除的场景,链表可能是更好的选择。以下是单向链表的简单实现:

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

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

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

  remove(value) {
    let current = this.head;
    let previous = null;

    while (current) {
      if (current.value === value) {
        if (!previous) {
          this.head = current.next;
        } else {
          previous.next = current.next;
        }
        this.size--;
        return true;
      }
      previous = current;
      current = current.next;
    }
    return false;
  }
}

使用Set实现唯一值列表

当需要确保列表元素唯一时,可以使用Set数据结构:

const uniqueList = new Set();

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

// 检查存在
console.log(uniqueList.has(1)); // true

// 删除元素
uniqueList.delete(1);

// 转换为数组
const arrayFromSet = [...uniqueList];

使用Map实现键值列表

对于需要键值对的列表结构,可以使用Map:

const keyValueList = new Map();

// 添加元素
keyValueList.set('name', 'John');
keyValueList.set('age', 30);

// 获取元素
console.log(keyValueList.get('name')); // John

// 检查存在
console.log(keyValueList.has('age')); // true

// 删除元素
keyValueList.delete('age');

// 遍历
keyValueList.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

使用生成器实现惰性列表

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

js 实现列表

function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

const lazyList = generateSequence(1, 100);

// 按需获取值
console.log(lazyList.next().value); // 1
console.log(lazyList.next().value); // 2

// 转换为数组(会立即求值)
const arrayFromGenerator = [...generateSequence(1, 5)];

每种实现方式各有优缺点,应根据具体需求选择合适的列表实现方式。数组适合随机访问,链表适合频繁插入删除,Set适合需要唯一性的场景,Map适合键值对存储,生成器适合处理大型数据集。

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

相关文章

vue实现列表水印

vue实现列表水印

实现列表水印的方法 在Vue中为列表添加水印可以通过多种方式实现,以下是几种常见的方法: 使用CSS背景图 通过CSS的background-image属性为列表元素添加水印背景。水印可以是文字或图…

vue 实现长列表

vue 实现长列表

vue 实现长列表的优化方法 使用虚拟滚动技术,只渲染可视区域内的元素,大幅减少DOM节点数量。通过计算滚动位置动态更新显示内容,降低内存占用和渲染压力。 <template> &l…

vue公共列表的实现

vue公共列表的实现

Vue 公共列表的实现方法 在 Vue 中实现公共列表组件,可以通过封装可复用的逻辑和模板来完成。以下是几种常见的实现方式: 使用 props 和 slots 通过 props 接收列表数据,使用…

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js类实现

js类实现

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

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…