【Java Web学习 | 第九篇】JavaScript(3) – 数组与函数进阶（2026最新版）
本篇对数组和函数进行更深入、实用的讲解，这是 Java Web 开发中处理后端返回数据（JSON 数组/对象列表）和封装业务逻辑的核心技能。
由于你特别指定“数组+函数”，本篇将重点强化这两个部分，结合实际 Java Web 场景（用户列表、表格渲染、数据过滤、分页等），并补充高频使用的现代方法。
1. 数组进阶（Array Advanced）
1.1 常用高阶函数速查表（企业开发必会）
| 方法 | 作用 | 是否返回新数组 | 推荐使用场景 |
|---|---|---|---|
forEach() | 遍历执行操作 | 否 | 简单遍历、无需返回值 |
map() | 映射转换 | 是 | 数据格式转换、渲染列表 |
filter() | 过滤 | 是 | 搜索、状态筛选 |
find() | 查找第一个匹配项 | 否 | 根据 id 找单条记录 |
findIndex() | 查找索引 | 否 | 需要知道位置时 |
reduce() | 累加/统计/聚合 | 否 | 求和、计数、对象转换 |
some() | 是否存在至少一个满足条件 | 否 | 权限检查、是否存在 |
every() | 是否所有都满足条件 | 否 | 全量校验 |
sort() | 排序（会修改原数组） | 否（慎用） | 列表排序 |
flat() | 扁平化嵌套数组 | 是 | 处理多层数据 |
1.2 实战示例（结合 Java Web 用户管理）
// 模拟后端返回的用户列表（JSON 格式）
const users = [
{ 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. 过滤 + 映射（最常用组合）
const activeUsers = users
.filter(user => user.status === "active") // 只显示激活用户
.map(user => ({ // 只返回需要的字段
id: user.id,
name: user.username,
age: user.age,
score: user.score
}));
console.log(activeUsers);
// 2. 使用 reduce 统计数据
const stats = users.reduce((acc, user) => {
acc.totalUsers++;
acc.totalScore += user.score;
if (user.role === "admin") acc.adminCount++;
return acc;
}, { totalUsers: 0, totalScore: 0, adminCount: 0 });
console.log(stats); // { totalUsers: 4, totalScore: 351, adminCount: 1 }
// 3. 查找与排序
const highestScoreUser = users.find(user => user.score === Math.max(...users.map(u => u.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); // 剩余数组
// 合并数组
const newUsers = [...users, { id: 5, username: "newuser", age: 26 }];
2. 函数进阶（Functions Advanced）
2.1 高阶函数（函数作为参数或返回函数）
// 高阶函数示例：创建一个过滤器工厂
function createFilterByKey(key, value) {
return function(item) {
return item[key] === value;
};
}
// 使用
const activeFilter = createFilterByKey("status", "active");
const activeList = users.filter(activeFilter);
2.2 箭头函数 + this 问题（重要！）
// 箭头函数没有自己的 this，适合回调
const handler = {
name: "系统管理员",
greet: function() {
// 普通函数 this 指向调用者
setTimeout(() => {
console.log(`你好，我是 ${this.name}`); // 箭头函数继承外层 this
}, 1000);
}
};
handler.greet();
2.3 纯函数与副作用（企业开发最佳实践）
纯函数（推荐）：输入相同，输出一定相同，无副作用。
// 纯函数示例
const addScore = (user, points) => ({ ...user, score: user.score + points });
// 使用（不修改原对象）
const updated = addScore(users[0], 10);
3. 综合实战：动态表格渲染（Java Web 常用）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>数组 + 函数实战 - 用户表格</title>
<style>
table { 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>
</head>
<body>
<h1>用户管理列表</h1>
<input type="text" id="search" placeholder="搜索用户名..." onkeyup="filterTable()">
<table id="userTable">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>年龄</th>
<th>状态</th>
<th>分数</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
let currentUsers = [...users]; // 副本，避免修改原始数据
function renderTable(data) {
const tbody = document.querySelector('#userTable tbody');
tbody.innerHTML = data.map(user => `
<tr>
<td>${user.id}</td>
<td>${user.username}</td>
<td>${user.age}</td>
<td class="${user.status === 'active' ? 'active' : ''}">
${user.status === 'active' ? '激活' : '禁用'}
</td>
<td>${user.score}</td>
<td>
<button onclick="editUser(${user.id})">编辑</button>
<button onclick="deleteUser(${user.id})">删除</button>
</td>
</tr>
`).join('');
}
// 搜索过滤函数
window.filterTable = function() {
const keyword = document.getElementById('search').value.toLowerCase();
const filtered = users.filter(user =>
user.username.toLowerCase().includes(keyword)
);
renderTable(filtered);
};
// 模拟编辑和删除（实际项目中会调用后端 API）
window.editUser = (id) => alert(`编辑用户 ID: ${id}`);
window.deleteUser = (id) => {
if (confirm('确认删除？')) {
currentUsers = currentUsers.filter(u => u.id !== id);
renderTable(currentUsers);
}
};
// 页面加载完成后渲染
window.onload = () => renderTable(users);
</script>
</body>
</html>
4. 小练习（建议立即完成）
- 使用
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 处理数据的两大基石，掌握后你已经具备了开发大部分前端交互的能力。继续加油！🚀
