js实现列表
使用 JavaScript 创建列表
在 JavaScript 中，可以通过多种方式实现列表功能，包括数组操作、DOM 元素动态生成等。以下是几种常见方法：
使用数组存储列表数据
JavaScript 数组是最基础的列表实现方式，支持增删改查操作：
// 创建空数组
const list = [];
// 添加元素
list.push('Item 1');
list.unshift('Item 0'); // 头部添加
// 删除元素
list.pop(); // 移除末尾
list.shift(); // 移除头部
// 访问元素
console.log(list[0]);
// 遍历数组
list.forEach(item => console.log(item));动态生成 HTML 列表
通过 DOM 操作将数组渲染为可视化的 <ul> 列表：
const data = ['Apple', 'Banana', 'Orange'];
const ul = document.createElement('ul');
data.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);
});
document.body.appendChild(ul);使用模板字符串生成列表
结合模板字符串快速生成 HTML 结构：
const items = ['Red', 'Green', 'Blue'];
const html = `
<ul>
${items.map(item => `<li>${item}</li>`).join('')}
</ul>
`;
document.body.innerHTML = html;实现可排序列表
通过 sort() 方法实现列表排序功能：
const numbers = [3, 1, 4, 2];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // [1, 2, 3, 4]使用现代框架实现动态列表
以 React 为例的组件化列表实现：
function ItemList() {
const [items, setItems] = useState(['A', 'B', 'C']);
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}性能优化建议
对于大型列表，建议使用虚拟滚动技术：
// 使用第三方库如 react-window
import { FixedSizeList } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
const List = () => (
<FixedSizeList height={400} itemSize={35} itemCount={1000}>
{Row}
</FixedSizeList>
);以上方法可根据具体需求选择，从简单数据存储到复杂交互场景均可覆盖。
