文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载topSalary是《现代 JavaScript 教程zh.javascript.info》「解构赋值」章节中的一道经典练习题给定一个以员工姓名为键、薪资为值的对象编写函数返回薪资最高者的姓名。这道题虽然只有短短十几行却把对象解构、Object.entries键值对遍历、边界条件处理三个知识点串成了一条完整的实战链路是理解“用解构语法优雅地遍历对象”的最佳入门案例。读完本文你将掌握for (let [key, value] of Object.entries(obj))的标准写法学会用一次遍历完成“求最大值 记录键名”的组合任务并能独立处理空对象、并列最高等边界场景。任务背景一道来自「解构赋值」章节的综合练习题本练习位于 1-js/05-data-types/10-destructuring-assignment/6-max-salary/task.md属于「解构赋值」章节的收尾练习。该章节article.md系统讲解了数组解构、对象解构、嵌套解构与智能函数参数而本题要求将这些能力组合起来解决一个真实的小问题。任务给出如下salaries对象let salaries { John: 100, Pete: 300, Mary: 250 };要求新建函数topSalary(salaries)返回收入最高的人的姓名并附带三条明确约束如果salaries是空的函数应该返回null如果有多个收入最高的人返回其中任意一个即可提示使用Object.entries和解构语法来遍历键/值对。需求拆解一个函数三个考核点从任务描述中可以提炼出三个核心考核点遍历对象的所有键值对题目明确要求使用Object.entries(salaries)而非传统的for..in循环目的是练习将对象转换为[key, value]数组序列后再处理在遍历中同时维护“最大值”与“最大值对应的键”这要求我们不止记录数字还要记住这个数字对应的姓名边界条件空对象必须返回null而不是报错或返回undefined以外的意外值。其中第二点是本题的真正难点常规求最大值只需要一个变量而本题需要两个变量协同更新——maxSalary记录当前最高薪资maxName记录该薪资对应的姓名二者必须同时更新才能保证一致性。官方参考解解构语法让遍历对象像遍历数组一样自然仓库中给出的官方参考解位于 1-js/05-data-types/10-destructuring-assignment/6-max-salary/_js.view/solution.js完整代码如下function topSalary(salaries) { let maxSalary 0; let maxName null; for(let [name, salary] of Object.entries(salaries)) { if (maxSalary salary) { maxSalary salary; maxName name; } } return maxName; }逐行解读第 2~3 行初始化“最大值”与“持有者”两个变量let maxSalary 0; let maxName null;maxSalary初始化为0在薪资均为非负数的前提下0是一个安全的“最小值底线”任何真实薪资都会大于它maxName初始化为null这一初始化与任务的边界要求精准呼应——当salaries为空对象时for..of循环体一次也不会执行函数直接返回null恰好满足“空对象返回 null”的约定。第 6 行用解构语法遍历键值对本题核心for(let [name, salary] of Object.entries(salaries)) {这一步是解构语法与Object.entries的经典组合其工作原理分两层Object.entries(salaries)把对象转换为一个由[key, value]对组成的数组例如对示例数据会得到[[John, 100], [Pete, 300], [Mary, 250]]let [name, salary]在for..of的每次迭代中对当前[key, value]数组执行数组解构直接把第一个元素赋给name、第二个元素赋给salary。父章节 article.md 中给出了这一写法的标准示范for (let [key, value] of Object.entries(user)) { alert(${key}:${value}); // name:John, then age:30 }该章节同时指出解构赋值的右侧不限于数组任何可迭代对象都可以——这正是Object.entries返回的数组能被直接解构的原因而Map本身就是以[key, value]对的形式迭代的写法甚至更简洁for (let [key, value] of user) { // user 是一个 Map alert(${key}:${value}); }第 7~10 行比较并同步更新两个变量if (maxSalary salary) { maxSalary salary; maxName name; }这里使用的是严格小于判断。它的一个直接推论是当出现薪资并列最高时只保留第一次遇到的那个名字后出现的并列者不会覆盖前者——这恰好满足任务“有多个收入最高的人返回任意一个即可”的要求。该行为可以从参考实现的比较逻辑中直接确认。第 13 行返回结果return maxName;非空对象返回最高薪资者的姓名字符串空对象循环不执行返回初始化的null。无解构的对照写法为什么推荐解构如果不使用解构同样的遍历需要这样写function topSalary(salaries) { let maxSalary 0; let maxName null; for (let entry of Object.entries(salaries)) { let name entry[0]; let salary entry[1]; if (maxSalary salary) { maxSalary salary; maxName name; } } return maxName; }对比可见解构写法省去了entry[0]、entry[1]两次下标访问和两个临时变量语义上直接表达“这一对是名字和薪资”可读性明显更好。这正是解构赋值“拆包至一系列变量”的设计初衷——父章节将其概括为“将数组或对象拆包至一系列变量中有时这样做更方便”。测试用例佐证官方对行为边界的硬性约定仓库为本题配套了完整的 Mocha 测试位于 1-js/05-data-types/10-destructuring-assignment/6-max-salary/_js.view/test.jsdescribe(topSalary, function() { it(returns top-paid person, function() { let salaries { John: 100, Pete: 300, Mary: 250 }; assert.equal( topSalary(salaries), Pete ); }); it(returns null for the empty object, function() { assert.isNull( topSalary({}) ); }); });两个用例恰好锁定了任务描述中的两条核心约定assert.equal(topSalary(salaries), Pete)对示例数据函数必须返回最高薪资 300 对应的姓名Peteassert.isNull(topSalary({}))对空对象{}函数必须返回null。这两条断言从测试层面把“返回值类型与边界行为”固化为规范任何实现都必须同时通过它们才算正确。测试采用的describe/it/assert结构是 Mocha Chai 的典型风格与教程「测试」章节1-js/03-code-quality/05-testing-mocha讲解的测试框架一致。边界与细节讨论从参考实现可以确认的四个事实结合参考解 solution.js 与测试 test.js可以确认以下行为细节空对象返回null是“初始化即返回”的自然结果由于maxName初始为null且循环体不执行空对象无需任何特殊分支即可满足约定这正是把初始值选为null的精妙之处并列最高时返回最先遇到的姓名因为比较采用严格小于if (maxSalary salary)后到的相同薪资不会触发更新。对{John: 100, Pete: 300, Mary: 300}函数返回Pete从源码结构看若所有薪资均为负数函数会返回nullmaxSalary初始为0负数薪资永远无法触发0 salary分支。任务场景中薪资默认非负此行为符合题意但若你的业务数据可能出现负薪资则需要相应调整初始值例如使用-Infinity或首项赋值策略Object.entries返回的是数组序列可放心用于for..of与解构entries将对象键值对展开为可迭代的二元数组与解构语法是天然搭档。同章姊妹练习巩固对象解构的基础语法如果对对象解构本身还不够熟练本章节还有一个基础练习可供配套巩固1-destruct-user 要求对一个user对象完成一次综合解构let user { name: John, years: 30 }; let {name, years: age, isAdmin false} user;这个练习覆盖了对象解构的三个基本形态同名属性直接赋值name、属性到新变量名的映射years: age、缺失属性的默认值isAdmin false。其官方解答位于 1-destruct-user/solution.md。先完成这道题再实现topSalary就能把“对象解构的取值语法”与“结合Object.entries的迭代用法”两个层次都打通。总结topSalary练习的价值不在于算法本身而在于它示范了一种高频实战模式将Object.entries与解构语法组合用for..of一次遍历对象的所有键值对并在遍历过程中协同维护“最大值”与“最大值对应的键”。官方参考解 solution.js 与配套测试 test.js 给出了可直接运行、可直接验证的完整实现function topSalary(salaries) { let maxSalary 0; let maxName null; for(let [name, salary] of Object.entries(salaries)) { if (maxSalary salary) { maxSalary salary; maxName name; } } return maxName; }记住三个要点即可迁移到任何类似的“对象中求最值并取键”场景用Object.entries把对象变成可解构的键值对数组用[key, value]解构让循环体语义清晰用“变量初始化即兜底”的方式天然覆盖空对象边界。赞分享文档教程前端【免费下载链接】zh.javascript.info现代 JavaScript 教程The Modern JavaScript Tutorial以最新的 ECMAScript 规范为基准通过简单但足够详细的内容为你讲解从基础到高阶的 JavaScript 相关知识。项目地址https://gitcode.com/gh_mirrors/zh/zh.javascript.info点击查看免费下载相关推荐用 Object.entries 与解构赋值实现 topSalary现代 JavaScript 教程中的最高工资求解实战用 Object.entries 与解构赋值实现 topSalary现代 JavaScript 教程中的最高工资求解实战 在 Modern JavaScrip文档/教程前端赋值结果JavaScript 中 a * 2 复合赋值如何参与表达式求值——《现代 JavaScript 教程》实战解析赋值结果JavaScript 中 a 2 复合赋值如何参与表达式求值——《现代 JavaScript 教程》实战解析 导读 本篇文章围绕《现代 Java文档教程前端现代 JavaScript 教程实践对象解构赋值、属性重命名与默认值zh.javascript.info 解构赋值章节实战现代 JavaScript 教程实践对象解构赋值、属性重命名与默认值zh.javascript.info 解构赋值章节实战 本篇技术指南围绕《现代 Jav文档教程前端上一篇抖音批量下载终极指南3步搞定无水印视频高效收藏下一篇IPXWrapper终极指南在Windows 10/11上完美运行经典游戏联机的免费解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考