当前位置:首页 > JavaScript

js列表实现

2026-03-14 04:18:20JavaScript

数组的基本操作

JavaScript 中列表通常通过数组(Array)实现。数组可以存储任意类型的数据,并动态调整大小。

创建数组

const arr1 = []; // 空数组
const arr2 = [1, 2, 3]; // 数字数组
const arr3 = ['a', 'b', 'c']; // 字符串数组
const arr4 = new Array(5); // 长度为5的稀疏数组

访问元素
通过索引(从0开始)访问或修改元素:

const arr = [10, 20, 30];
console.log(arr[1]); // 输出: 20
arr[2] = 40; // 修改第三个元素为40

常用数组方法

添加/删除元素

  • push():在末尾添加元素。
  • pop():移除并返回最后一个元素。
  • unshift():在开头添加元素。
  • shift():移除并返回第一个元素。
const arr = [1, 2];
arr.push(3); // [1, 2, 3]
arr.pop();   // [1, 2]
arr.unshift(0); // [0, 1, 2]
arr.shift();    // [1, 2]

合并与切片

  • concat():合并数组,返回新数组。
  • slice(start, end):提取子数组(不修改原数组)。
  • splice(index, deleteCount, ...items):在指定位置删除或插入元素。
const arr1 = [1, 2];
const arr2 = arr1.concat([3, 4]); // [1, 2, 3, 4]
const subArr = arr2.slice(1, 3);  // [2, 3]
arr2.splice(1, 1, 'a'); // [1, 'a', 3, 4]

遍历与转换

迭代方法

  • forEach():遍历数组。
  • map():对每个元素执行函数,返回新数组。
  • filter():返回满足条件的元素组成的新数组。
const nums = [1, 2, 3];
nums.forEach(num => console.log(num)); // 依次输出1, 2, 3
const doubled = nums.map(n => n * 2); // [2, 4, 6]
const evens = nums.filter(n => n % 2 === 0); // [2]

查找与判断

  • find():返回第一个满足条件的元素。
  • includes():检查是否包含某元素。
  • some()/every():检查部分或全部元素是否满足条件。
const users = [{id: 1}, {id: 2}];
const user = users.find(u => u.id === 2); // {id: 2}
console.log(nums.includes(2)); // true
console.log(nums.some(n => n > 2)); // true

高级操作

排序与反转

  • sort():按默认或自定义规则排序(修改原数组)。
  • reverse():反转数组顺序。
const letters = ['c', 'a', 'b'];
letters.sort(); // ['a', 'b', 'c']
letters.reverse(); // ['c', 'b', 'a']

归并计算

js列表实现

  • reduce():从左到右累计计算。
  • reduceRight():从右到左累计计算。
const sum = [1, 2, 3].reduce((acc, val) => acc + val, 0); // 6

性能提示

  • 频繁在数组开头操作(如unshift/shift)时,考虑使用链表或双端队列(如Deque库)。
  • 大规模数据遍历优先选择for循环而非高阶函数(如forEach),以减少函数调用开销。

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

相关文章

js实现倒计时

js实现倒计时

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

js实现论坛

js实现论坛

实现论坛的基本功能 使用JavaScript实现一个论坛需要结合前端和后端技术。前端可以使用React、Vue或Angular等框架,后端可以选择Node.js配合Express或Koa框架。数据库可…

h5 实现列表

h5 实现列表

列表实现方法 在HTML5中,可以通过多种方式实现列表,包括无序列表、有序列表和自定义列表。以下是具体的实现方法。 无序列表 无序列表使用<ul>标签,列表项使用<li>标签…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

利用js实现

利用js实现

使用 JavaScript 实现 在 JavaScript 中,可以通过多种方式实现功能,具体取决于需求。以下是几种常见的方法: 方法一:使用原生 JavaScript // 示例代码…

uniapp 内容列表

uniapp 内容列表

uniapp 内容列表的实现方法 在uniapp中实现内容列表通常需要结合组件和数据绑定。以下是一个常见的方法: 模板部分 <template> <view class="c…