【Java Web学习 | 第十篇】JavaScript(4) – 对象（Object）深度详解（2026最新版）
恭喜你完成数组与函数进阶！
对象（Object） 是 JavaScript 中最重要、最核心的数据结构。在 Java Web 开发中，后端 Spring Boot 返回的 JSON 数据本质上就是对象或对象数组，几乎所有前后端数据交互都围绕对象展开。
本篇将从基础到进阶，系统讲解对象的使用，帮助你轻松处理后端返回的 User、Order、Product 等实体数据。
1. 对象基础创建与访问
// 1. 对象字面量（最常用方式）
const user = {
id: 1001,
username: "chongyang",
email: "chongyang@example.com",
age: 26,
isActive: true,
roles: ["USER", "ADMIN"], // 数组作为属性
profile: { // 嵌套对象
avatar: "https://example.com/avatar.jpg",
bio: "热爱 Java Web 全栈开发",
joinDate: "2025-03-01"
}
};
// 2. 访问属性（两种方式）
console.log(user.username); // 点语法（推荐，属性名合法时使用）
console.log(user["email"]); // 方括号语法（属性名是变量或含特殊字符时使用）
// 3. 可选链（Optional Chaining）—— 2026 强烈推荐，避免报错
console.log(user.profile?.bio); // "热爱 Java Web 全栈开发"
console.log(user.address?.city); // undefined（安全，不会报错）
2. 对象解构赋值（ES6 最实用特性之一）
对象解构是处理后端返回 JSON 时最高频的操作，能极大提升代码可读性。
// 基本解构
const { username, email, age } = user;
console.log(username, email, age);
// 重命名 + 默认值
const {
username: loginName, // 重命名
age: userAge = 18, // 默认值
isActive: active = false
} = user;
console.log(loginName); // chongyang
// 嵌套对象解构
const {
profile: { bio, avatar },
roles
} = user;
console.log(bio);
实战技巧：从后端接口返回的大对象中精准提取需要的数据。
3. 对象展开运算符（…）—— 不可变数据更新神器
// 1. 复制对象（浅拷贝）
const userCopy = { ...user };
// 2. 添加/修改属性（推荐写法，不修改原对象）
const updatedUser = {
...user,
age: 27, // 修改年龄
lastLogin: new Date().toISOString(), // 新增字段
profile: {
...user.profile,
bio: "已更新个人简介" // 修改嵌套对象
}
};
// 3. 合并多个对象
const defaultSettings = { theme: "light", language: "zh" };
const userSettings = { ...defaultSettings, theme: "dark" };
重要：展开运算符是浅拷贝，嵌套对象仍为引用。如果需要深拷贝，可使用 structuredClone()（现代浏览器支持）或 lodash 的 cloneDeep。
4. 对象常用方法（ES6+）
// 1. Object.keys() / values() / entries()
console.log(Object.keys(user)); // ["id", "username", "email", ...]
console.log(Object.values(user)); // [1001, "chongyang", ...]
console.log(Object.entries(user)); // [["id", 1001], ["username", "chongyang"], ...]
// 2. for...in 循环（遍历对象自身属性）
for (let key in user) {
if (user.hasOwnProperty(key)) { // 过滤原型链属性
console.log(key, user[key]);
}
}
// 3. Object.assign()（合并对象，较老写法）
const merged = Object.assign({}, defaultSettings, userSettings);
5. 对象与 JSON（前后端交互核心）
// 前端 → 后端：对象转 JSON 字符串
const jsonStr = JSON.stringify(updatedUser);
console.log(jsonStr);
// 后端 → 前端：JSON 字符串转对象
const receivedUser = JSON.parse(jsonStr);
console.log(receivedUser);
// 注意：JSON 不支持函数、undefined、Date 等类型，会自动转换
6. 实战示例：处理后端返回的用户信息并渲染
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>对象实战 - 用户信息展示</title>
<style>
.card { max-width: 500px; margin: 30px auto; padding: 24px; border: 1px solid #ddd; border-radius: 12px; background: white; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<div class="card" id="userCard"></div>
<script>
// 模拟后端返回的数据
const apiResponse = {
code: 200,
message: "success",
data: {
id: 1001,
username: "chongyang",
email: "chongyang@example.com",
age: 26,
roles: ["USER", "ADMIN"],
profile: {
bio: "Java Web 全栈学习者",
avatar: "https://picsum.photos/id/64/200"
}
}
};
// 处理并渲染（企业常用模式）
function renderUserInfo(response) {
const { code, data } = response; // 解构
if (code !== 200) {
document.getElementById('userCard').innerHTML = `<p style="color:red">请求失败：${response.message}</p>`;
return;
}
const { username, email, age, roles, profile } = data;
const html = `
<img src="${profile.avatar}" alt="头像" style="width:80px;height:80px;border-radius:50%;float:right;">
<h2>${username}</h2>
<p><strong>邮箱：</strong>${email}</p>
<p><strong>年龄：</strong>${age}</p>
<p><strong>角色：</strong>${roles.join("、")}</p>
<p><strong>简介：</strong>${profile.bio}</p>
`;
document.getElementById('userCard').innerHTML = html;
}
// 执行渲染
renderUserInfo(apiResponse);
</script>
</body>
</html>
7. 小练习（建议立即完成）
- 给定后端返回的对象，解构出
username、email、profile.bio，并打印。 - 使用展开运算符创建一个新对象：在原
user基础上增加lastLoginTime和loginCount: 15，不修改原对象。 - 写一个函数
formatUser(user)，接收用户对象，返回格式化后的字符串：用户名: xxx，年龄: xx，角色: xxx。 - 使用
Object.entries()遍历对象，并把每个键值对以"key: value"形式输出。
下一篇文章预告：《【Java Web学习 | 第十一篇】JavaScript(5) – 异步编程（Promise + async/await）与 Fetch API》
我们将进入真正的前后端交互部分：学习如何使用 fetch 调用 Spring Boot 的 RESTful API，实现登录、查询用户列表、提交表单等功能。
本篇核心总结（快记口诀）：
- 创建：
{}对象字面量 - 访问：点语法 + 可选链
?. - 解构：
const {a, b} = obj - 更新：
{ ...oldObj, newProp: value } - 转换：
JSON.stringify()/JSON.parse()
有问题随时问：
- 想要更多嵌套对象解构示例？
- 需要对象深拷贝完整方案？
- 或直接进入 异步 + Fetch 篇？
回复“给我练习答案”或“下一篇 Fetch”，我立刻继续！
对象是 JavaScript 的灵魂，掌握后你处理后端 JSON 数据会变得非常轻松。继续加油，你的 Java Web 全栈之路已经进入关键交互阶段！🚀
