当前位置:首页 > 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

常用数组方法

添加/删除元素

js列表实现

  • 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]

遍历与转换

迭代方法

js列表实现

  • 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']

归并计算

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

性能提示

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

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

相关文章

js实现

js实现

实现 JavaScript 功能的方法 在 JavaScript 中实现特定功能通常涉及多个步骤。以下是常见的实现方法: 基础语法和变量声明 使用 let 或 const 声明变量: let co…

js实现图片放大缩小

js实现图片放大缩小

实现图片放大缩小的基础方法 使用CSS的transform: scale()属性可以快速实现图片的放大缩小效果。通过JavaScript动态修改该属性值: const img = document.…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现自举

js实现自举

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