【Java Web学习 | 第十篇】JavaScript(4) 对象

【Java Web学习 | 第十篇】JavaScript(4) - 对象Object深度详解2026最新版恭喜你完成数组与函数进阶对象Object是 JavaScript 中最重要、最核心的数据结构。在 Java Web 开发中后端 Spring Boot 返回的 JSON 数据本质上就是对象或对象数组几乎所有前后端数据交互都围绕对象展开。本篇将从基础到进阶系统讲解对象的使用帮助你轻松处理后端返回的 User、Order、Product 等实体数据。1. 对象基础创建与访问// 1. 对象字面量最常用方式constuser{id:1001,username:chongyang,email:chongyangexample.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:userAge18,// 默认值isActive:activefalse}user;console.log(loginName);// chongyang// 嵌套对象解构const{profile:{bio,avatar},roles}user;console.log(bio);实战技巧从后端接口返回的大对象中精准提取需要的数据。3. 对象展开运算符…—— 不可变数据更新神器// 1. 复制对象浅拷贝constuserCopy{...user};// 2. 添加/修改属性推荐写法不修改原对象constupdatedUser{...user,age:27,// 修改年龄lastLogin:newDate().toISOString(),// 新增字段profile:{...user.profile,bio:已更新个人简介// 修改嵌套对象}};// 3. 合并多个对象constdefaultSettings{theme:light,language:zh};constuserSettings{...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(letkeyinuser){if(user.hasOwnProperty(key)){// 过滤原型链属性console.log(key,user[key]);}}// 3. Object.assign()合并对象较老写法constmergedObject.assign({},defaultSettings,userSettings);5. 对象与 JSON前后端交互核心// 前端 → 后端对象转 JSON 字符串constjsonStrJSON.stringify(updatedUser);console.log(jsonStr);// 后端 → 前端JSON 字符串转对象constreceivedUserJSON.parse(jsonStr);console.log(receivedUser);// 注意JSON 不支持函数、undefined、Date 等类型会自动转换6. 实战示例处理后端返回的用户信息并渲染!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title对象实战 - 用户信息展示/titlestyle.card{max-width:500px;margin:30px auto;padding:24px;border:1px solid #ddd;border-radius:12px;background:white;box-shadow:0 4px 15pxrgba(0,0,0,0.1);}/style/headbodydivclasscardiduserCard/divscript// 模拟后端返回的数据constapiResponse{code:200,message:success,data:{id:1001,username:chongyang,email:chongyangexample.com,age:26,roles:[USER,ADMIN],profile:{bio:Java Web 全栈学习者,avatar:https://picsum.photos/id/64/200}}};// 处理并渲染企业常用模式functionrenderUserInfo(response){const{code,data}response;// 解构if(code!200){document.getElementById(userCard).innerHTMLp stylecolor:red请求失败${response.message}/p;return;}const{username,email,age,roles,profile}data;consthtmlimg src${profile.avatar} alt头像 stylewidth:80px;height:80px;border-radius:50%;float:right; h2${username}/h2 pstrong邮箱/strong${email}/p pstrong年龄/strong${age}/p pstrong角色/strong${roles.join(、)}/p pstrong简介/strong${profile.bio}/p;document.getElementById(userCard).innerHTMLhtml;}// 执行渲染renderUserInfo(apiResponse);/script/body/html7. 小练习建议立即完成给定后端返回的对象解构出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 全栈之路已经进入关键交互阶段