在日常的前端开发工作中，我们经常需要处理各种各样的数据列表。无论是展示给用户看的商品列表，还是需要进行分析的后台数据，排序都是不可或缺的一环。你可能遇到过这样的情况：从后端 API 获取了一堆杂乱无章的对象数组，现在需要根据“价格”、“日期”或者“用户名”来重新排列它们。虽然原生的 JavaScript 提供了 sort() 方法，但在处理复杂逻辑或对象属性时，代码往往会变得冗长且难以维护。
在这篇文章中，我们将深入探讨 Underscore.js 库中一个非常强大且常用的工具函数——_.sortBy()。我们将通过丰富的实战案例，带你了解它是如何简化我们的排序逻辑，提升代码的可读性，以及如何在实际项目中优雅地运用它。无论你是刚接触 Underscore.js 的新手，还是希望巩固基础的老手，我相信你都能从这篇文章中获得实用的见解。
什么是 _.sortBy()？
简单来说，INLINECODE13f3fccb 是 Underscore.js 提供的一个用于生成有序数组的函数。与我们原生使用的 INLINECODEc854a5a9 不同，原生方法通常会直接修改原始数组（这种操作被称为“ mutating”或“副作用”），而 _.sortBy 则更加温和和安全——它总是返回一个新的排序后的数组副本，而不会改变原始的数据源。这在函数式编程和现代状态管理（如 React 或 Vue 的状态更新）中是一个非常重要的特性。
此外，INLINECODEefbbb13d 默认按照升序（Ascending）排列。这意味着数值会从小到大排列，字符串会按照字母顺序（A-Z）排列。如果我们要实现降序排列，通常需要在排序后配合使用 INLINECODE5b6de844 方法，或者编写特殊的转换函数。
语法与参数详解
让我们首先通过它的函数签名来理解它的基本用法：
_.sortBy(list, iteratee, [context]);
为了让每一位开发者都能清晰地理解各个参数的作用，我们来逐一拆解：
-
list(列表)：这是我们要排序的目标数据集合。它可以是一个数组，也可以是一个对象。虽然大多数情况下我们处理的是数组，但传递对象时，Underscore 会对其属性值进行排序并返回一个数组。 -
iteratee(迭代函数/属性名)：这是决定排序规则的核心参数。它有多种形式：
* 字符串：如果列表包含对象，我们可以直接传入对象的属性名（如 INLINECODE7301f8ef 或 INLINECODE17b2530c），_.sortBy 会自动根据该属性的值进行排序。
* 函数：我们可以传入一个回调函数，该函数接收当前元素作为参数，并返回一个用于排序的值（称为“键”）。这允许我们执行复杂的计算或转换逻辑。
- INLINECODE55980cf1 (上下文)：这是一个可选参数。它用于绑定 INLINECODE8314abd7 函数内部的
this指向。虽然在 ES6 箭头函数普及的今天使用频率有所下降，但在处理某些特定的面向对象场景时依然非常有用。
返回值：该函数返回一个新的、经过排序的数组。
基础实战：对简单数值和字符串排序
让我们从最基础的情况开始。假设我们有一组杂乱的数字，我们希望将它们从小到大排列。
#### 示例 1：基本的数值排序
在这个例子中，我们定义了一个包含数字的数组，并使用 _.sortBy 将其整理有序。
// 原始数据：乱序的数字数组
let rawNumbers = [2, 3, 1, 5, 4];
// 使用 _.sortBy 进行排序
// 这里我们传入了一个简单的函数，直接返回数字本身
let sortedNumbers = _.sortBy(rawNumbers, function (num) {
return num;
});
// 输出结果查看
console.log(‘原始数据:‘, rawNumbers);
console.log(‘排序后:‘, sortedNumbers);
代码解析：
在这个例子中，INLINECODE4a0a841f 函数非常简单，它仅仅接收每个数字 INLINECODEa44fc406 并将其返回。实际上，对于单纯的数字数组，我们甚至可以省略这个函数参数，Underscore 会智能地处理。但显式地写出来有助于我们理解其工作机制——它会根据函数返回的值来比较大小。
#### 示例 2：结合数学函数（Math.cos）的高级排序
你可能会问：如果我要排序的规则不是直接的数值大小，而是经过某种数学变换后的值呢？这正是 iteratee 函数大显身手的地方。
假设我们有一组角度值（弧度制），我们希望根据它们余弦值的大小来进行排序。这意味着即使 INLINECODEcc98a08b 比 INLINECODE9cf7db36 小，但 INLINECODEe79444b6 可能比 INLINECODEb24df205 大，排序的结果会因此改变。
let angles = [1, 2, 3, 4, 5, 6];
// 我们根据 Math.cos(num) 的结果来决定 num 的顺序
let sortedByCosine = _.sortBy(angles, function (num) {
return Math.cos(num);
});
console.log(‘按余弦值排序后的角度数组:‘, sortedByCosine);
实际应用场景：这种技术在图形编程、游戏开发或物理模拟中非常有用。例如，你可能需要根据向量投影的长度或者某种加权计算结果来排列对象，而不是它们的原始坐标。
进阶实战：处理对象数组
在实际的业务开发中，我们更常处理的是对象数组。例如，用户列表、商品订单等。_.sortBy 在处理这类数据时表现得异常优雅。
#### 示例 3：根据对象属性（字符串属性）排序
让我们来看看如何对一个包含员工信息的数组进行排序。这里我们希望按照员工姓名的字母顺序进行排列。
// 定义一个包含员工对象的数组
let employees = [
{ name: ‘kim‘, salary: 40000 },
{ name: ‘shelly‘, salary: 50000 },
{ name: ‘zen‘, salary: 60000 },
{ name: ‘alice‘, salary: 45000 }
];
// 只需传入属性名的字符串 ‘name‘，Underscore 即可自动处理
let sortedByName = _.sortBy(employees, ‘name‘);
console.log(‘按姓名排序:‘, sortedByName);
代码解析：
注意这里我们没有写 INLINECODE4714fb0f，而是直接简写为 INLINECODE6aa2e199。这是 Underscore 提供的一种便捷写法（Shorthand），它会让代码看起来极其简洁。
#### 示例 4：实现降序排序（组合使用 Reverse）
如前所述，INLINECODE6c09ec16 默认是升序的。如果我们想要薪资最高的员工排在前面，我们需要怎么做呢？一种常见的做法是先进行升序排序，然后使用数组的 INLINECODE4268db93 方法将结果反转。
let patients = [
{ name: ‘Amit‘, age: 1, priority: 10 },
{ name: ‘Lisa‘, age: 4, priority: 5 },
{ name: ‘Charles‘, age: 2, priority: 8 },
{ name: ‘Bella‘, age: 3, priority: 1 }
];
// 链式调用：先按 priority 升序，再反转得到降序
// 注意：我们先使用 _.sortBy，然后对返回的结果调用 reverse
let descendingOrder = _.sortBy(patients, ‘priority‘).reverse();
console.log(‘按优先级（从高到低）排序:‘, descendingOrder);
注意：这种方法虽然简单，但确实会增加一步操作。如果你对性能极其敏感，或者数据量巨大，直接使用原生的 INLINECODE43193443 可能会稍微快一点，因为只需遍历一次。但在大多数可读性优先的场景下，INLINECODEf955351d + reverse 是完全可接受且更易读的。
深入探索：多条件排序与最佳实践
虽然 INLINECODEbfb38a37 用起来很方便，但在处理复杂的“多条件排序”时（例如：先按“部门”排，如果部门相同，再按“薪资”排），单纯的一次 INLINECODE9807449c 调用往往不够用。
#### 实用技巧：多级排序策略
INLINECODEfccfae09 的一个隐秘特性是，它可以接受一个函数数组作为 INLINECODE53c2b1ea 参数。Underscore 会按照数组中函数的顺序依次进行排序。这非常类似于 SQL 语句中的 ORDER BY column1, column2。
let users = [
{ name: ‘Amy‘, dept: ‘HR‘, score: 90 },
{ name: ‘Bob‘, dept: ‘IT‘, score: 85 },
{ name: ‘Charlie‘, dept: ‘HR‘, score: 95 },
{ name: ‘David‘, dept: ‘IT‘, score: 85 }
];
// 我们希望先按部门名称排序，然后按分数排序
let sortedUsers = _.sortBy(users, [
function(user) { return user.dept; }, // 第一排序键：部门
function(user) { return user.score; } // 第二排序键：分数
]);
// 结果将是：Bob(85) 和 David(85) 都在 IT 部门，但 Bob 排在前面（因为默认升序，若分数相同则保持相对原位或根据后续逻辑）
// 实际上，对于相同分数，若需严格控制，可结合更多逻辑，但此处展示了 sortBy 处理多键的能力。
console.log(sortedUsers);
#### 性能考量
我们需要了解的是，INLINECODE4b30fb2a 的底层实现通常不是一次完整的快速排序。它通过遍历列表，计算每个元素的“排序键”，然后对这些键进行排序，最后映射回原元素。这意味着对于大型数组，计算 INLINECODE24984e48 函数的开销会被放大。
优化建议：
如果你的 iteratee 函数包含复杂的计算（例如大量的正则匹配或递归），建议先对数据进行预处理，或者考虑是否可以使用简单的索引映射来减少计算量。
常见错误与解决方案
- 误以为会修改原数组：很多新手会写出 INLINECODEd12e355f 然后直接使用 INLINECODE5f693951 的代码。请记住，必须接收返回值：
let sorted = _.sortBy(myArray, ‘id‘);。 - 大小写敏感问题：在排序字符串时，INLINECODE0517f22e 是区分大小写的。通常大写字母的 ASCII 码小于小写字母，这可能导致 ‘Zebra‘ 排在 ‘apple‘ 前面。如果希望不区分大小写，可以使用 INLINECODEa633f2df 函数转换为小写再排序：
_.sortBy(words, function(word) { return word.toLowerCase(); });
总结与下一步
在本文中，我们全面了解了 Underscore.js 中 INLINECODE25ae39c2 函数的用法。从最简单的数值列表到复杂的对象数组，再到多条件排序的技巧，INLINECODE50939cc8 提供了一种比原生 sort() 更直观、更安全的处理方式。它的“非破坏性”特性使得我们在处理数据流时更加自信，不用担心意外修改了原始数据源。
掌握这个函数不仅能让你写出更整洁的代码，还能帮助你更好地理解函数式编程中“不可变性”的重要性。
作为开发者，工具库的选择是多样的。虽然 Underscore.js 及其继任者 Lodash 提供了强大的工具集，但现代 JavaScript (ES6+) 也在不断进化。你可以通过学习 jQuery 等其他基础库来进一步拓展你的前端技能树。jQuery 以其 “Write less, do more”（少写代码，多做事情） 的理念简化了 HTML/CSS 文档的交互，这与我们使用 Underscore 简化数据操作的初衷不谋而合。
你可以通过学习 jQuery 教程和 jQuery 示例从头开始学习 jQuery，这将为你构建交互式 Web 页面打下坚实的基础。