当前位置:首页 > JavaScript

js 列表实现

2026-04-06 19:58:44JavaScript

JavaScript 列表实现方法

JavaScript 中可以使用数组(Array)来实现列表功能,数组提供了丰富的内置方法用于操作列表数据。

创建列表

// 空列表
const list1 = [];

// 带初始值的列表
const list2 = [1, 2, 3, 4, 5];

// 使用Array构造函数
const list3 = new Array();
const list4 = new Array(1, 2, 3);

基本操作

// 添加元素到末尾
list1.push(6);

// 添加元素到开头
list1.unshift(0);

// 删除末尾元素
list1.pop();

// 删除开头元素
list1.shift();

// 获取列表长度
const length = list1.length;

// 访问元素
const first = list1[0];
const last = list1[list1.length - 1];

高级操作

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

// 映射新列表
const doubled = list1.map(x => x * 2);

// 过滤列表
const evens = list1.filter(x => x % 2 === 0);

// 查找元素
const found = list1.find(x => x > 3);

// 排序列表
const sorted = list1.sort((a, b) => a - b);

// 反转列表
const reversed = list1.reverse();

// 连接列表
const combined = list1.concat(list2);

列表切片

// 获取子列表
const sublist = list1.slice(1, 3);

// 删除/替换元素
list1.splice(2, 1, 'new'); // 从索引2开始删除1个元素,插入'new'

其他实用方法

// 检查是否包含元素
const hasElement = list1.includes(2);

// 查找元素索引
const index = list1.indexOf(3);

// 连接为字符串
const str = list1.join(', ');

// 计算累计值
const sum = list1.reduce((acc, val) => acc + val, 0);

性能考虑

  • 对于频繁在开头插入/删除的操作,链表可能是更好的选择
  • 数组在随机访问时性能更好(O(1)时间复杂度)
  • 大规模数据操作时考虑使用TypedArray等特殊数组类型

替代方案

如果需要更复杂的列表功能,可以考虑:

js 列表实现

// 使用链表实现
class ListNode {
  constructor(value, next = null) {
    this.value = value;
    this.next = next;
  }
}

// 使用第三方库如Immutable.js的List
import { List } from 'immutable';
const immutableList = List([1, 2, 3]);

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

相关文章

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js 实现vue

js 实现vue

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

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…

js实现图表

js实现图表

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

js实现防洪

js实现防洪

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

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…