当前位置：首页 > JavaScript

js实现列表

2026-01-13 13:51:56JavaScript

使用 JavaScript 实现列表

JavaScript 提供了多种方式来实现列表功能，包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法：

使用数组存储列表数据

数组是 JavaScript 中最基础的数据结构之一，适合存储列表数据。

const list = ['Item 1', 'Item 2', 'Item 3'];
console.log(list); // 输出: ['Item 1', 'Item 2', 'Item 3']

动态生成 HTML 列表

通过 JavaScript 动态生成无序列表（<ul>）或有序列表（<ol>）并插入到 DOM 中。

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);

使用模板字符串生成列表

利用模板字符串简化列表的生成过程。

const items = ['Red', 'Green', 'Blue'];
const html = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;

document.body.innerHTML = html;

列表的增删改查操作

通过数组方法实现列表的增删改查功能。

const list = ['A', 'B', 'C'];

// 添加元素
list.push('D'); // 末尾添加
list.unshift('Z'); // 开头添加

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

// 修改元素
list[1] = 'X'; // 修改索引为1的元素

// 查找元素
const index = list.indexOf('X'); // 返回索引

使用事件委托实现动态列表交互

通过事件委托为动态生成的列表项添加交互功能。

document.addEventListener('click', event => {
  if (event.target.tagName === 'LI') {
    console.log('Clicked:', event.target.textContent);
  }
});

使用现代框架（如 React）实现列表

在 React 中可以通过 map 方法渲染列表。

function ListComponent() {
  const items = ['Cat', 'Dog', 'Bird'];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}