文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载导读在处理前端列表、排行榜、数据表格等场景时对一组对象按某个或多个字段进行排序是最常见的需求之一。Lodash 提供了两个专门用于集合排序的函数——sortBy与orderBy前者默认按升序排序后者则可以精确控制每个排序字段的升序/降序方向。读完本文你将掌握如何使用sortBy对对象数组按单个键升序排序、如何用orderBy指定降序、如何配置主键与次键的多级排序以及各参数的含义与调用约定。文中所有示例均可在支持 ES Modules 的 Node.js 或打包工具如 webpack环境中直接运行并与仓库中其他 Lodash 技巧互为补充。准备示例数据本文沿用原文档中的宝可梦pokemon集合作为演示数据每只宝可梦由name名字字符串与level等级数值两个字段构成。const pokemon [ { name: Pikachu, level: 12 }, { name: Charmander, level: 12 }, { name: Squirtle, level: 15 }, { name: Bulbasaur, level: 11 } ];后续所有排序示例都基于这个数组展开你可以把name/level替换成自己业务中的任意字段如createdAt、price、score调用方式完全一致。引入方式按需导入单个函数Lodash 提供了多种引入方式。原文档使用按模块路径导入module path import的写法这样可以配合打包工具的 tree-shaking只引入用到的函数避免把整个 Lodash 库打进来import _sortBy from lodash/sortBy;import _orderBy from lodash/orderBy;也可以使用整体导入后通过_.sortBy/_.orderBy调用。两种写法的函数签名与行为完全相同按模块路径导入更利于控制最终的 bundle 体积。这一点与仓库中另一篇 Lodash 技巧文档 Reach Into An Object For Nested Data With Get 中直接使用_.get的写法在语义上等价只是模块组织方式不同。使用 sortBy 按单个键升序排序sortBy(collection, [iteratees])的第一个参数是待排序的集合第二个参数可以是属性名、迭代函数或由它们组成的数组。传入属性名字符串时Lodash 会取出每个对象中该属性的值作为排序依据。import _sortBy from lodash/sortBy; _sortBy(pokemon, [level]);调用结果如下原数组不会被修改sortBy返回一个排序后的新数组[ { name: Bulbasaur, level: 11 }, { name: Pikachu, level: 12 }, { name: Charmander, level: 12 }, { name: Squirtle, level: 15 } ]注意Pikachu与Charmander的level同为 12。Lodash v4 的sortBy是稳定排序因此当排序键相同时两者会保持它们在原数组中的先后顺序Pikachu在前。这一点在涉及多级排序时尤其重要。sortBy默认总是升序。如果你的业务只需要按某个字段从小到大或按字母序排列sortBy就是最简短的写法。使用 orderBy 控制升降序当需要按降序排列时sortBy就无法直接满足了此时应改用orderBy(collection, [iteratees], [orders])。它比sortBy多出第三个参数orders用于为每个排序键指定排序方向asc表示升序desc表示降序。import _orderBy from lodash/orderBy; _orderBy(pokemon, [level], [desc]);结果按等级从高到低排列[ { name: Squirtle, level: 15 }, { name: Pikachu, level: 12 }, { name: Charmander, level: 12 }, { name: Bulbasaur, level: 11 } ]orders数组与第二个参数中的排序键一一对应第 N 个排序键使用orders[N]指定的方向。如果某个位置传入asc则该键仍按升序处理。多键排序主键与次键现实中更常见的需求是“先按 A 排A 相同再按 B 排”。sortBy与orderBy的第二个参数都支持传入多个属性名数组中的顺序即优先级顺序第一个是主排序键后续依次为次排序键。例如先按名字排序名字相同时再按等级排序import _sortBy from lodash/sortBy; _sortBy(pokemon, [name, level]);也可以反过来先按等级排序等级相同再按名字排序import _sortBy from lodash/sortBy; _sortBy(pokemon, [level, name]);由于示例数据中Pikachu与Charmander的level相同后一种写法会进一步用name决出它们之间的先后顺序Charmander在字母序上先于Pikachu。多键排序时分别控制升降序orderBy的第三个参数同样可以传入多个方向值从而对每一个排序键独立控制升序或降序。例如先按等级降序、等级相同时再按名字升序import _orderBy from lodash/orderBy; _orderBy(pokemon, [level, name], [desc, asc]);[ { name: Squirtle, level: 15 }, { name: Charmander, level: 12 }, { name: Pikachu, level: 12 }, { name: Bulbasaur, level: 11 } ]这里level使用descname使用asc两者互不影响。这种“不同字段不同方向”的组合在排行榜、混合类型的列表排序中非常常见。需要注意orders数组的长度应与排序键数量一致若长度不足Lodash 会对缺失的位置默认按asc处理。参数灵活性的延伸迭代函数与嵌套路径除了直接传属性名sortBy与orderBy的第二个参数还支持传迭代函数例如按某个计算后的值排序import _orderBy from lodash/orderBy; // 按等级对 2 取模的结果降序排列 _orderBy(pokemon, [(p) p.level % 2], [desc]);也支持以字符串形式书写的点路径如stats.hp可以直接对嵌套字段排序。这两个函数的底层都借助 Lodash 的取值机制解析迭代器与仓库中 Reach Into An Object For Nested Data With Get 里_.get(resp, error.errors[0].message, ...)使用的路径解析是同一套体系二者可以配合使用先用_.get安全取值再用sortBy/orderBy完成排序。结合项目的使用建议不修改原数组sortBy与orderBy都返回新数组不会原地修改pokemon。在 React/Vue 等以不可变数据为惯例的前端项目中这一点非常适合直接传入setState或渲染管线的派生数据。仓库中的 React 笔记 create-react-app Comes With Lodash 提到create-react-app 默认自带 Lodash 依赖因此在这些项目里无需额外安装即可直接import sortBy from lodash/sortBy。稳定排序v4 的排序是稳定的多级排序时同键元素的相对顺序得到保留可作为排序可预测性的保障。可读性[level, name], [desc, asc]这种声明式的调用比手写比较函数更易读也便于把排序配置提取成变量、动态拼接。小结需求推荐函数关键点按单个键升序_sortBy(pokemon, [level])默认升序返回新数组按单个键降序_orderBy(pokemon, [level], [desc])用orders指定方向多键排序_sortBy(pokemon, [name, level])数组顺序即优先级多键且方向不同_orderBy(pokemon, [level, name], [desc, asc])方向与排序键一一对应sortBy负责简洁的默认升序orderBy负责显式的方向控制与多级组合。二者共享相同的排序键语法属性名、路径字符串或迭代函数掌握了这两者几乎可以覆盖对象数组排序的全部常见场景。完整示例可参考原文档 Sorting Arrays Of Objects With Lodash 中附带的在线演示或在本仓库的 JavaScript 分类下查看更多 Lodash 实用技巧。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐使用Lodash对对象数组进行排序的技巧使用Lodash对对象数组进行排序的技巧 在JavaScript开发中我们经常需要对对象数组进行排序操作。本文将详细介绍如何使用Lodash库中的 sortB文档教程知识库告别排序烦恼Lodash双雄orderBy与sortBy的实战指南告别排序烦恼Lodash双雄orderBy与sortBy的实战指南 你是否还在为JavaScript数组排序写冗长的比较函数面对多条件排序时是否感到无从下手前端后端es-toolkit orderBy 详解多条件、多方向复合排序的对象数组排序工具es toolkit orderBy 详解多条件、多方向复合排序的对象数组排序工具 orderBy 是 es toolkit 数组模块中用于对 对象数组进行多前端后端上一篇pell编辑器区块链集成使用IPFS存储富文本内容的去中心化方案下一篇CesiumJS 体素渲染实战指南从一份体素数据到地球上的三维体积数据可视化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/6 7:31:09 · 阅读 1.2k 使用 Lodash 的 sortBy 与 orderBy 对对象数组进行排序
文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载导读在处理前端列表、排行榜、数据表格等场景时对一组对象按某个或多个字段进行排序是最常见的需求之一。Lodash 提供了两个专门用于集合排序的函数——sortBy与orderBy前者默认按升序排序后者则可以精确控制每个排序字段的升序/降序方向。读完本文你将掌握如何使用sortBy对对象数组按单个键升序排序、如何用orderBy指定降序、如何配置主键与次键的多级排序以及各参数的含义与调用约定。文中所有示例均可在支持 ES Modules 的 Node.js 或打包工具如 webpack环境中直接运行并与仓库中其他 Lodash 技巧互为补充。准备示例数据本文沿用原文档中的宝可梦pokemon集合作为演示数据每只宝可梦由name名字字符串与level等级数值两个字段构成。const pokemon [ { name: Pikachu, level: 12 }, { name: Charmander, level: 12 }, { name: Squirtle, level: 15 }, { name: Bulbasaur, level: 11 } ];后续所有排序示例都基于这个数组展开你可以把name/level替换成自己业务中的任意字段如createdAt、price、score调用方式完全一致。引入方式按需导入单个函数Lodash 提供了多种引入方式。原文档使用按模块路径导入module path import的写法这样可以配合打包工具的 tree-shaking只引入用到的函数避免把整个 Lodash 库打进来import _sortBy from lodash/sortBy;import _orderBy from lodash/orderBy;也可以使用整体导入后通过_.sortBy/_.orderBy调用。两种写法的函数签名与行为完全相同按模块路径导入更利于控制最终的 bundle 体积。这一点与仓库中另一篇 Lodash 技巧文档 Reach Into An Object For Nested Data With Get 中直接使用_.get的写法在语义上等价只是模块组织方式不同。使用 sortBy 按单个键升序排序sortBy(collection, [iteratees])的第一个参数是待排序的集合第二个参数可以是属性名、迭代函数或由它们组成的数组。传入属性名字符串时Lodash 会取出每个对象中该属性的值作为排序依据。import _sortBy from lodash/sortBy; _sortBy(pokemon, [level]);调用结果如下原数组不会被修改sortBy返回一个排序后的新数组[ { name: Bulbasaur, level: 11 }, { name: Pikachu, level: 12 }, { name: Charmander, level: 12 }, { name: Squirtle, level: 15 } ]注意Pikachu与Charmander的level同为 12。Lodash v4 的sortBy是稳定排序因此当排序键相同时两者会保持它们在原数组中的先后顺序Pikachu在前。这一点在涉及多级排序时尤其重要。sortBy默认总是升序。如果你的业务只需要按某个字段从小到大或按字母序排列sortBy就是最简短的写法。使用 orderBy 控制升降序当需要按降序排列时sortBy就无法直接满足了此时应改用orderBy(collection, [iteratees], [orders])。它比sortBy多出第三个参数orders用于为每个排序键指定排序方向asc表示升序desc表示降序。import _orderBy from lodash/orderBy; _orderBy(pokemon, [level], [desc]);结果按等级从高到低排列[ { name: Squirtle, level: 15 }, { name: Pikachu, level: 12 }, { name: Charmander, level: 12 }, { name: Bulbasaur, level: 11 } ]orders数组与第二个参数中的排序键一一对应第 N 个排序键使用orders[N]指定的方向。如果某个位置传入asc则该键仍按升序处理。多键排序主键与次键现实中更常见的需求是“先按 A 排A 相同再按 B 排”。sortBy与orderBy的第二个参数都支持传入多个属性名数组中的顺序即优先级顺序第一个是主排序键后续依次为次排序键。例如先按名字排序名字相同时再按等级排序import _sortBy from lodash/sortBy; _sortBy(pokemon, [name, level]);也可以反过来先按等级排序等级相同再按名字排序import _sortBy from lodash/sortBy; _sortBy(pokemon, [level, name]);由于示例数据中Pikachu与Charmander的level相同后一种写法会进一步用name决出它们之间的先后顺序Charmander在字母序上先于Pikachu。多键排序时分别控制升降序orderBy的第三个参数同样可以传入多个方向值从而对每一个排序键独立控制升序或降序。例如先按等级降序、等级相同时再按名字升序import _orderBy from lodash/orderBy; _orderBy(pokemon, [level, name], [desc, asc]);[ { name: Squirtle, level: 15 }, { name: Charmander, level: 12 }, { name: Pikachu, level: 12 }, { name: Bulbasaur, level: 11 } ]这里level使用descname使用asc两者互不影响。这种“不同字段不同方向”的组合在排行榜、混合类型的列表排序中非常常见。需要注意orders数组的长度应与排序键数量一致若长度不足Lodash 会对缺失的位置默认按asc处理。参数灵活性的延伸迭代函数与嵌套路径除了直接传属性名sortBy与orderBy的第二个参数还支持传迭代函数例如按某个计算后的值排序import _orderBy from lodash/orderBy; // 按等级对 2 取模的结果降序排列 _orderBy(pokemon, [(p) p.level % 2], [desc]);也支持以字符串形式书写的点路径如stats.hp可以直接对嵌套字段排序。这两个函数的底层都借助 Lodash 的取值机制解析迭代器与仓库中 Reach Into An Object For Nested Data With Get 里_.get(resp, error.errors[0].message, ...)使用的路径解析是同一套体系二者可以配合使用先用_.get安全取值再用sortBy/orderBy完成排序。结合项目的使用建议不修改原数组sortBy与orderBy都返回新数组不会原地修改pokemon。在 React/Vue 等以不可变数据为惯例的前端项目中这一点非常适合直接传入setState或渲染管线的派生数据。仓库中的 React 笔记 create-react-app Comes With Lodash 提到create-react-app 默认自带 Lodash 依赖因此在这些项目里无需额外安装即可直接import sortBy from lodash/sortBy。稳定排序v4 的排序是稳定的多级排序时同键元素的相对顺序得到保留可作为排序可预测性的保障。可读性[level, name], [desc, asc]这种声明式的调用比手写比较函数更易读也便于把排序配置提取成变量、动态拼接。小结需求推荐函数关键点按单个键升序_sortBy(pokemon, [level])默认升序返回新数组按单个键降序_orderBy(pokemon, [level], [desc])用orders指定方向多键排序_sortBy(pokemon, [name, level])数组顺序即优先级多键且方向不同_orderBy(pokemon, [level, name], [desc, asc])方向与排序键一一对应sortBy负责简洁的默认升序orderBy负责显式的方向控制与多级组合。二者共享相同的排序键语法属性名、路径字符串或迭代函数掌握了这两者几乎可以覆盖对象数组排序的全部常见场景。完整示例可参考原文档 Sorting Arrays Of Objects With Lodash 中附带的在线演示或在本仓库的 JavaScript 分类下查看更多 Lodash 实用技巧。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐使用Lodash对对象数组进行排序的技巧使用Lodash对对象数组进行排序的技巧 在JavaScript开发中我们经常需要对对象数组进行排序操作。本文将详细介绍如何使用Lodash库中的 sortB文档教程知识库告别排序烦恼Lodash双雄orderBy与sortBy的实战指南告别排序烦恼Lodash双雄orderBy与sortBy的实战指南 你是否还在为JavaScript数组排序写冗长的比较函数面对多条件排序时是否感到无从下手前端后端es-toolkit orderBy 详解多条件、多方向复合排序的对象数组排序工具es toolkit orderBy 详解多条件、多方向复合排序的对象数组排序工具 orderBy 是 es toolkit 数组模块中用于对 对象数组进行多前端后端上一篇pell编辑器区块链集成使用IPFS存储富文本内容的去中心化方案下一篇CesiumJS 体素渲染实战指南从一份体素数据到地球上的三维体积数据可视化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考