【Java Web学习 | 第九篇】JavaScript(3) 数组+函数

【Java Web学习 | 第九篇】JavaScript(3) - 数组与函数进阶2026最新版本篇对数组和函数进行更深入、实用的讲解这是 Java Web 开发中处理后端返回数据JSON 数组/对象列表和封装业务逻辑的核心技能。由于你特别指定“数组函数”本篇将重点强化这两个部分结合实际 Java Web 场景用户列表、表格渲染、数据过滤、分页等并补充高频使用的现代方法。1. 数组进阶Array Advanced1.1 常用高阶函数速查表企业开发必会方法作用是否返回新数组推荐使用场景forEach()遍历执行操作否简单遍历、无需返回值map()映射转换是数据格式转换、渲染列表filter()过滤是搜索、状态筛选find()查找第一个匹配项否根据 id 找单条记录findIndex()查找索引否需要知道位置时reduce()累加/统计/聚合否求和、计数、对象转换some()是否存在至少一个满足条件否权限检查、是否存在every()是否所有都满足条件否全量校验sort()排序会修改原数组否慎用列表排序flat()扁平化嵌套数组是处理多层数据1.2 实战示例结合 Java Web 用户管理// 模拟后端返回的用户列表JSON 格式constusers[{id:1,username:zhangsan,age:25,status:active,role:user,score:88},{id:2,username:lisi,age:30,status:inactive,role:admin,score:95},{id:3,username:wangwu,age:22,status:active,role:user,score:76},{id:4,username:zhaoliu,age:28,status:active,role:user,score:92}];// 1. 过滤 映射最常用组合constactiveUsersusers.filter(useruser.statusactive)// 只显示激活用户.map(user({// 只返回需要的字段id:user.id,name:user.username,age:user.age,score:user.score}));console.log(activeUsers);// 2. 使用 reduce 统计数据conststatsusers.reduce((acc,user){acc.totalUsers;acc.totalScoreuser.score;if(user.roleadmin)acc.adminCount;returnacc;},{totalUsers:0,totalScore:0,adminCount:0});console.log(stats);// { totalUsers: 4, totalScore: 351, adminCount: 1 }// 3. 查找与排序consthighestScoreUserusers.find(useruser.scoreMath.max(...users.map(uu.score)));console.log(最高分用户:,highestScoreUser);users.sort((a,b)b.score-a.score);// 按分数降序console.log(排序后:,users);1.3 数组解构 展开运算符// 解构const[first,second,...restUsers]users;console.log(first);// 第一条console.log(restUsers);// 剩余数组// 合并数组constnewUsers[...users,{id:5,username:newuser,age:26}];2.函数进阶Functions Advanced2.1 高阶函数函数作为参数或返回函数// 高阶函数示例创建一个过滤器工厂functioncreateFilterByKey(key,value){returnfunction(item){returnitem[key]value;};}// 使用constactiveFiltercreateFilterByKey(status,active);constactiveListusers.filter(activeFilter);2.2 箭头函数 this 问题重要// 箭头函数没有自己的 this适合回调consthandler{name:系统管理员,greet:function(){// 普通函数 this 指向调用者setTimeout((){console.log(你好我是${this.name});// 箭头函数继承外层 this},1000);}};handler.greet();2.3 纯函数与副作用企业开发最佳实践纯函数推荐输入相同输出一定相同无副作用。// 纯函数示例constaddScore(user,points)({...user,score:user.scorepoints});// 使用不修改原对象constupdatedaddScore(users[0],10);3. 综合实战动态表格渲染Java Web 常用!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title数组 函数实战 - 用户表格/titlestyletable{width:100%;border-collapse:collapse;margin-top:20px;}th, td{border:1px solid #ddd;padding:12px;text-align:left;}th{background:#007bff;color:white;}.active{color:green;}/style/headbodyh1用户管理列表/h1inputtypetextidsearchplaceholder搜索用户名...onkeyupfilterTable()tableiduserTabletheadtrthID/thth用户名/thth年龄/thth状态/thth分数/thth操作/th/tr/theadtbody/tbody/tablescriptletcurrentUsers[...users];// 副本避免修改原始数据functionrenderTable(data){consttbodydocument.querySelector(#userTable tbody);tbody.innerHTMLdata.map(usertr td${user.id}/td td${user.username}/td td${user.age}/td td class${user.statusactive?active:}${user.statusactive?激活:禁用}/td td${user.score}/td td button onclickeditUser(${user.id})编辑/button button onclickdeleteUser(${user.id})删除/button /td /tr).join();}// 搜索过滤函数window.filterTablefunction(){constkeyworddocument.getElementById(search).value.toLowerCase();constfilteredusers.filter(useruser.username.toLowerCase().includes(keyword));renderTable(filtered);};// 模拟编辑和删除实际项目中会调用后端 APIwindow.editUser(id)alert(编辑用户 ID:${id});window.deleteUser(id){if(confirm(确认删除)){currentUserscurrentUsers.filter(uu.id!id);renderTable(currentUsers);}};// 页面加载完成后渲染window.onload()renderTable(users);/script/body/html4. 小练习建议立即完成使用filter map处理users数组筛选出年龄大于等于 25 岁的用户并返回只包含id、username、score的新数组。使用reduce计算所有用户的平均分数保留两位小数。封装一个函数searchUsers(keyword)返回匹配用户名的结果。修改上面表格示例添加“按分数排序”按钮点击后降序排列。下一篇文章预告《【Java Web学习 | 第十篇】JavaScript(4) - 异步编程Promise async/await与 Fetch API》我们将学习如何使用fetch调用 Spring Boot 后端 REST 接口实现真正的前后端数据交互GET/POST/PUT/DELETE。本篇核心总结数组熟练掌握map、filter、reduce三剑客函数优先使用箭头函数 高阶函数实战动态表格渲染是 Java Web 中最常见的操作之一有问题随时问想要完整可运行的表格示例代码包含排序功能需要更多 reduce 高级用法或直接进入异步 Fetch篇回复“给我完整表格代码”或“下一篇 Fetch”我立刻继续数组和函数是 JavaScript 处理数据的两大基石掌握后你已经具备了开发大部分前端交互的能力。继续加油