当前位置：首页 > JavaScript

js 实现列表

2026-04-07 02:20:31JavaScript

实现列表的基本方法

在JavaScript中，可以通过多种方式实现列表功能，包括数组操作、DOM操作等。以下是几种常见的方法：

使用数组创建列表

const list = ['item1', 'item2', 'item3'];
console.log(list); // 输出: ['item1', 'item2', 'item3']

动态生成HTML列表

const items = ['Apple', 'Banana', 'Orange'];
const ul = document.createElement('ul');

items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li);
});

document.body.appendChild(ul);

列表的常见操作

添加元素

list.push('item4'); // 添加到末尾
list.unshift('item0'); // 添加到开头

删除元素

list.pop(); // 删除最后一个元素
list.shift(); // 删除第一个元素

查找元素

const index = list.indexOf('item2'); // 返回索引
const includes = list.includes('item1'); // 返回布尔值

高级列表操作

使用map转换列表

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6]

使用filter过滤列表

const filtered = numbers.filter(num => num > 1);
console.log(filtered); // 输出: [2, 3]

使用reduce汇总列表

const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出: 6

实现可排序列表

简单排序

const sorted = [...numbers].sort((a, b) => a - b);
console.log(sorted); // 升序排列

复杂对象排序

const users = [
  {name: 'John', age: 25},
  {name: 'Jane', age: 22}
];
const sortedUsers = [...users].sort((a, b) => a.age - b.age);

实现分页列表

基本分页逻辑

function paginate(array, pageSize, pageNumber) {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
}

const pagedData = paginate(list, 2, 1); // 每页2条，第1页

实现虚拟滚动列表

对于大型列表，可以使用虚拟滚动提高性能：

js 实现列表

// 简单虚拟滚动实现思路
function renderVisibleItems(container, allItems, itemHeight, scrollTop) {
  const visibleCount = Math.ceil(container.clientHeight / itemHeight);
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = startIndex + visibleCount;

  const visibleItems = allItems.slice(startIndex, endIndex);
  // 渲染这些可见项并设置正确的偏移量
}