文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载导读本篇技术指南围绕《Modern JavaScript Tutorial》en.javascript.info中 数组方法章节 的经典习题「Sort users by age」展开完整拆解如何编写sortByAge(users)函数让包含age属性的对象数组按年龄升序排列。读完本文你将掌握Array.prototype.sort的比较函数机制就地排序、字符串默认比较陷阱、返回值语义并能举一反三实现降序、多字段、字符串字典序等真实场景的对象排序方案。一、题目回顾按年龄对用户对象排序任务位于 task.md要求编写一个函数sortByAge(users)接收一个带age属性的对象数组并将其按age排序。题目给出的期望行为let john { name: John, age: 25 }; let pete { name: Pete, age: 30 }; let mary { name: Mary, age: 28 }; let arr [ pete, john, mary ]; sortByAge(arr); // now: [john, mary, pete] alert(arr[0].name); // John alert(arr[1].name); // Mary alert(arr[2].name); // Pete注意两点关键设计入参数组初始顺序是[pete, john, mary]30、25、28本身就是乱序用于检验排序效果期望结果[john, mary, pete]25、28、30按年龄升序排列。二、官方解法一行比较函数搞定仓库中的官方解答位于 solution.mdfunction sortByAge(arr) { arr.sort((a, b) a.age - b.age); } let john { name: John, age: 25 }; let pete { name: Pete, age: 30 }; let mary { name: Mary, age: 28 }; let arr [ pete, john, mary ]; sortByAge(arr); // now sorted is: [john, mary, pete] alert(arr[0].name); // John alert(arr[1].name); // Mary alert(arr[2].name); // Pete核心只有一行arr.sort((a, b) a.age - b.age)。它把「比较对象」这件事完全交给比较函数每个元素是对象取各自age属性做数值相减。三、原理拆解sort(fn)的比较函数契约要理解这行代码为什么成立需要回到 数组方法章节 对arr.sort(fn)的讲解。三个要点缺一不可1.sort是就地排序调用arr.sort()会直接修改原数组的元素顺序同时返回排序后的数组返回值通常被忽略因为arr本身已被改写。因此sortByAge(arr)无需返回值——调用方持有的arr引用在函数返回后就已经是有序的了这正是题目中sortByAge(arr)之后立即alert(arr[0].name)能拿到正确结果的原因。2. 默认比较是字符串字典序大坑不带参数调用arr.sort()时所有元素会先被转成字符串再按字典序比较let arr [ 1, 2, 15 ]; arr.sort(); alert( arr ); // 1, 15, 2 —— 数字被当作字符串比较2 15对对象数组直接arr.sort()更糟每个对象转成字符串都是[object Object]比较结果完全无意义。这正是本习题必须显式传入比较函数的原因。3. 比较函数的返回值语义sort(fn)会反复调用fn(a, b)决定两个元素的相对顺序约定如下function compare(a, b) { if (a b) return 1; // a 排在 b 后面 if (a b) return 0; // 保持相对位置 if (a b) return -1; // a 排在 b 前面 }而 章节内 smart 提示 进一步放宽了要求比较函数只需返回正数表示「大于」、负数表示「小于」即可不必拘泥于 ±1。于是减法a - b成为最简洁的写法a.age b.age→ 结果为正 →a靠后a.age b.age→ 结果为负 →a靠前a.age b.age→ 结果为 0 → 两者相对顺序不变。a.age - b.age恰好完整编码了这三个分支这就是官方解法一行解决的全部原理。四、实战扩展从单字段升序到多场景排序掌握了比较函数契约后同一模式可以覆盖绝大多数对象排序需求。1. 按 age 降序arr.sort((a, b) b.age - a.age);对照仓库中同章节习题 4-sort-back 的arr.sort((a, b) b - a)对象场景只需把a、b换成a.age、b.age。2. 多字段排序age 相同再按 namearr.sort((a, b) { if (a.age ! b.age) return a.age - b.age; // 主排序年龄 return a.name.localeCompare(b.name); // 次排序姓名字典序 });3. 字符串字段排序用localeCompare当排序字段是字符串如name直接a.name - b.name会得到NaN无意义。章节的 localeCompare 提示 指出按字母码比较对Ö等带重音字母会出错应使用str.localeComparelet countries [Österreich, Andorra, Vietnam]; alert( countries.sort( (a, b) a.localeCompare(b) ) ); // Andorra, Österreich, Vietnam —— 正确4. 保持原数组不变先拷贝再排序sort就地修改数组若业务上需要保留原数据先拷贝再排function sortByAgeCopy(arr) { return arr.slice().sort((a, b) a.age - b.age); }同章节习题 5-copy-sort-array 正是这一思路的练习slice()无参调用即返回浅拷贝见 article.md 的 slice 小节。5. 比较函数必须是纯函数章节姊妹习题 9-shuffle 给出了反例警示若在比较函数里塞随机数Math.random() - 0.5排序算法多数引擎为 Timsort/快速排序的优化实现会把「黑箱」行为放大导致各排列概率严重不均。因此比较函数应保持确定性同样的输入永远给出同样的结论只依据元素自身的可比较属性返回结果。五、验证与进一步练习官方解答标注了run标记可直接在浏览器环境执行验证三段alert依次输出John、Mary、Pete。你也可以自行构造边界用例来加深理解年龄相同的对象验证相对顺序是否保持现代 JS 引擎的sort是稳定排序空数组 / 单元素数组sort可直接处理无需特判age为字符串数字如25减法会触发隐式数值转换仍能正确排序但建议数据源统一类型。本习题属于 数组方法章节 对象操作训练链的一环同组习题还包括按字段名排序的 7-map-objects、按属性取值的 6-array-get-names通读这些任务可系统掌握「数组方法 对象属性」的组合拳。小结sortByAge的官方解法把本习题的全部考点浓缩进一行arr.sort((a, b) a.age - b.age)就地排序、显式比较函数、正负零返回值语义、属性取值与减法速记。理解这条契约后任何「对象数组按某字段排序」的需求——升序、降序、多条件、字符串字典序——都能用同一套模式稳定落地。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐用 reduce 计算对象数组平均年龄——Modern JavaScript Tutorial 数组方法实战用 reduce 计算对象数组平均年龄——Modern JavaScript Tutorial 数组方法实战 导读 本文围绕 Modern JavaScript文档/教程前端使用Lodash对对象数组进行排序的技巧使用Lodash对对象数组进行排序的技巧 在JavaScript开发中我们经常需要对对象数组进行排序操作。本文将详细介绍如何使用Lodash库中的 sortB文档教程知识库JavaScript 数组完全指南从特殊对象到二维数组的实战解析JavaScript 数组完全指南从特殊对象到二维数组的实战解析 导读 本篇文章基于本仓库中的 Array.md https://link.gitcode.c示例工程上一篇如何使用TWBlocks基于shadcn和Tailwind的11种网站区块快速集成指南下一篇终极指南如何在5分钟内完成Logoly本地化部署搭建私有Logo生成服务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考