前端js处理list(数组)

在前端开发中,JavaScript (JS) 是用来处理页面逻辑的主要语言。当涉及到处理列表(List)时,通常指的是对数组(Array)的操作。以下是一些常见的操作及其实现方法:

1. 创建列表

javascript 复制代码
let list = [1, 2, 3, 4, 5];

2. 遍历列表

  • 使用 for 循环
javascript 复制代码
for (let i = 0; i < list.length; i++) {
    console.log(list[i]);
}
  • 使用 forEach 方法
javascript 复制代码
list.forEach(function(item) {
    console.log(item);
});

3. 添加元素

  • 在末尾添加
javascript 复制代码
list.push(6); // list becomes [1, 2, 3, 4, 5, 6]
  • 在开头添加
javascript 复制代码
list.unshift(0); // list becomes [0, 1, 2, 3, 4, 5, 6]

4. 删除元素

  • 删除最后一个元素
javascript 复制代码
list.pop(); // removes the last element, list is now [0, 1, 2, 3, 4, 5]
  • 删除第一个元素
javascript 复制代码
list.shift(); // removes the first element, list is now [1, 2, 3, 4, 5]

5. 查找元素

  • 查找特定值的索引
javascript 复制代码
let index = list.indexOf(3); // returns 2
  • 检查是否存在特定值
javascript 复制代码
if (list.includes(3)) {
    console.log('3 is in the list');
}

6. 过滤列表

javascript 复制代码
let filteredList = list.filter(item => item > 2); // returns [3, 4, 5]

7. 映射列表

javascript 复制代码
let mappedList = list.map(item => item * 2); // returns [2, 4, 6, 8, 10]

8. 排序列表

  • 升序排序
javascript 复制代码
list.sort((a, b) => a - b); // sorts in ascending order
  • 降序排序
javascript 复制代码
list.sort((a, b) => b - a); // sorts in descending order

9. 列表转字符串

javascript 复制代码
let stringList = list.join(', '); // "1, 2, 3, 4, 5"

10. 列表切片

javascript 复制代码
let subList = list.slice(1, 3); // returns [2, 3], does not modify original list
相关推荐
平头哥~3 小时前
Day 07 _ 那条 1px 的线,为什么在手机上忽粗忽细
前端·css·样式·学习资料
论迹复利3 小时前
FreeRTOS 在 RISC-V 上是如何“点火“的 —— 从 main() 到第一个任务的完整链路
java·开发语言·risc-v
小江的记录本3 小时前
【CSS】CSS 动画:transition、animation、transform、CSS3 新特性(附《思维导图》)
前端·css·安全·spring·前端框架·css3·动画
circuitsosk3 小时前
任务规划器的三种范式对比:ReAct、Plan-and-Execute 与 Tree-of-Thought 在真实业务中的取舍
前端·javascript·python·react.js·llm·ai agent
张宇Joaquin3 小时前
鲲鹏统一并行加速库KUPL--众核并行能力介绍
java·开发语言·网络
736c3 小时前
C语言-数组 07
c语言·开发语言
宸津-代码粉碎机4 小时前
AI攻防战升级!基于Spring AI构建Java应用自动免疫安全体系
java·大数据·开发语言·人工智能·python·安全·spring
hzxpaipai5 小时前
企业官网技术架构拆解:前端、后台、数据库、服务器如何协同
前端·数据库·架构
小磊哥er5 小时前
深入解构Claude Code - 第 12 篇 · 整体串起来
javascript·ai编程
小磊哥er5 小时前
深入解构Claude Code - 第 11 篇 · 工程上的讲究
javascript·ai编程