在 JavaScript 的开发旅程中，我们经常会遇到这样一个挑战：函数的 return 语句似乎总是被设计为只能返回单一值。但在实际的项目开发中，这种限制往往会带来不便。想象一下，当你调用一个处理用户数据的函数时，你可能不仅需要知道操作是否成功，还需要获取错误代码、处理后的数据对象以及相关的日志信息。如果只能返回一个值，我们不得不求助于全局变量或者将数据嵌套在复杂的对象结构中，这会让代码变得难以维护。
别担心，作为一门极其灵活的语言，JavaScript 为我们提供了多种解决方案来打破这个“单值返回”的束缚。在这篇文章中，我们将深入探讨如何通过数组和对象来打包多个返回值，并分析它们各自的优劣、使用场景以及最佳实践。我们将不仅学习“怎么做”，还会理解“为什么这么做”，帮助你写出更专业、更高效的代码。
为什么我们需要返回多个值？
在开始探讨具体技术之前，让我们先达成一个共识：为什么这是一个值得深入讨论的话题？
在早期的编程实践中，开发者可能会通过引用传递参数来修改外部变量，或者将所有需要的数据塞进一个庞大的对象中。然而，这些方法都有其弊端。修改外部变量会增加代码的副作用，使得函数变得“不纯”；而过度封装的对象则会让调用者不清楚哪些属性是真正有效的。
因此，掌握一套标准的、清晰的“多值返回”模式，对于提升代码的可读性和健壮性至关重要。通常，我们有以下两种主流策略：
- 使用数组：适用于返回值的顺序固定，且值与值之间逻辑联系紧密的场景。
- 使用对象：适用于返回值具有特定含义，需要通过名称（键）来访问，且不依赖于顺序的场景。
接下来，让我们逐一深入剖析这两种方法。
方法 1：使用数组解构实现多值返回
数组是最直观的容器。当我们决定使用数组从函数中返回多个值时，本质上是在利用数组的有序列表特性。这种方式的核心优势在于配合 ES6 引入的解构赋值（Destructuring Assignment）语法，能够让代码变得异常简洁和优雅。
#### 1.1 基础示例：有序数据的返回
让我们从一个最简单的例子开始。假设我们需要一个函数，它能够同时返回一个网站的名称和它的 ID。因为这两个值在逻辑上是一体的，且顺序固定，数组是绝佳的选择。
// 定义一个函数，返回包含两个值的数组
function getSiteDetails() {
// 这里的逻辑可以是任意复杂的运算
// 最终我们将结果打包进数组返回
return ["OpenAI", 2024];
}
// 调用函数并使用数组解构赋值
// 我们定义了 ‘name‘ 和 ‘year‘ 两个变量来接收返回值
let [name, year] = getSiteDetails();
// 输出结果
console.log("站点名称:" + name);
console.log("成立年份:" + year);
输出结果：
站点名称: OpenAI
成立年份: 2024
在这个例子中，我们可以看到，INLINECODEc7675b05 函数返回了一个数组 INLINECODE8ce98d41。在调用时，我们不需要创建一个临时数组变量，而是直接使用 INLINECODE8669c566 的语法将数组中的元素“拆解”并赋值给对应的变量。这种写法比传统的 INLINECODE483102db、arr[1] 要直观得多，也极大地提高了代码的可读性。
#### 1.2 进阶场景：处理计算逻辑与交换变量
使用数组返回多个值在数学计算或算法处理中也非常有用。例如，我们可能需要一个函数同时返回除法的商和余数。此外，利用数组解构，我们还可以轻松实现不使用临时变量的变量交换。
// 示例：同时返回商和余数
function divideAndRemainder(dividend, divisor) {
let quotient = Math.floor(dividend / divisor);
let remainder = dividend % divisor;
// 将两个计算结果作为一个数组返回
return [quotient, remainder];
}
let [q, r] = divideAndRemainder(10, 3);
console.log(`商: ${q}, 余数: ${r}`); // 输出: 商: 3, 余数: 1
// --- 实用技巧：变量交换 ---
let a = 1;
let b = 2;
// 利用数组的解构特性，一行代码完成交换
console.log(`交换前: a=${a}, b=${b}`);
[a, b] = [b, a];
console.log(`交换后: a=${a}, b=${b}`);
输出结果：
商: 3, 余数: 1
交换前: a=1, b=2
交换后: a=2, b=1
💡 实用见解：
虽然数组方法很简洁，但它有一个潜在的隐患：顺序依赖性。作为开发者，你必须清楚地记住返回值的顺序。如果你在维护代码时不小心调整了 return 语句中的顺序，或者调换了接收变量的位置，程序可能会在不报错的情况下产生逻辑漏洞。因此，当返回的是一组没有明显语义区别的数值（如坐标点 x, y）时，数组是非常好的选择；但当返回的是具有特定业务含义的数据时，可能需要考虑我们接下来要讲的方法。
方法 2：使用对象解构实现语义化返回
当我们需要从函数返回的数据具有明确的属性名，或者返回值的数量较多且未来可能增加时，对象是比数组更优的选择。对象允许我们使用键值对（Key-Value pairs）来命名每一个返回值，这样调用者就不需要依赖顺序来获取数据，从而大大降低了出错的风险。
#### 2.1 基础示例：具名属性的返回
让我们将之前的数组示例重构为对象版本。你会发现，这种方式在语义清晰度上有了质的飞跃。
function getUserConfig() {
// 返回一个对象，每个值都有明确的名字
return {
userName: "AdminUser",
theme: "DarkMode",
notificationsEnabled: true
};
}
// 使用对象解构赋值
// 我们可以直接使用对象中的属性名来提取变量
let { userName, theme, notificationsEnabled } = getUserConfig();
console.log(`用户: ${userName}`);
console.log(`主题: ${theme}`);
console.log(`消息通知: ${notificationsEnabled}`);
输出结果：
用户: AdminUser
主题: DarkMode
消息通知: true
在这个例子中，即使我们打乱 return 对象中属性的顺序，只要解构时的属性名不变，代码依然能完美运行。这种“不依赖顺序”的特性，使得对象成为大型项目中处理多返回值的首选方案。
#### 2.2 进阶场景：处理复杂业务逻辑
在实际开发中，我们经常需要处理复杂的业务逻辑，比如 API 请求。一个典型的场景是：函数需要返回请求状态、数据内容以及错误信息。使用对象可以让我们将这些不同维度的信息打包在一起。
function fetchUserData(userId) {
// 模拟 API 调用逻辑
if (userId < 0) {
// 错误情况：返回包含错误信息的对象
return {
success: false,
data: null,
error: "无效的用户 ID"
};
}
// 成功情况：返回包含数据的对象
return {
success: true,
data: { id: userId, name: "张三" },
error: null
};
}
// 调用函数
const result = fetchUserData(101);
// 我们可以清晰地根据属性名来判断逻辑
if (result.success) {
console.log("获取数据成功:", result.data);
} else {
console.log("发生错误:", result.error);
}
输出结果：
获取数据成功: { id: 101, name: ‘张三‘ }
💡 实用见解：
这种方法常被称为“参数对象”模式或“选项对象”模式的反向应用。它不仅让返回值更易于理解，还为未来的扩展留出了空间。如果你在下个月需要在这个函数中增加一个新的返回值（比如 timestamp），你只需要在对象中添加一个新键，而不必担心破坏现有的代码逻辑，这极大地提升了代码的可维护性。
深度对比与最佳实践
现在我们已经掌握了两种主要方法。那么，在实际开发中，你应该如何做出选择呢？让我们总结一下对比情况。
#### 1. 可读性与维护性
- 对象：胜出。属性名即文档，阅读代码时无需查阅函数定义即可知道每个值的含义。
- 数组：稍弱。开发者必须记住索引位置，例如
x = arr[0]是横坐标还是纵坐标？这需要额外的注释或上下文。
#### 2. 简洁性
- 数组：胜出。对于简单的、关系紧密的数据（如 RGB 颜色值
[r, g, b]），数组显得更轻量，不需要写额外的属性名。 - 对象：相对繁琐。需要定义键名，代码量略多。
#### 3. 灵活性
- 对象：更灵活。支持属性的添加、删除和无序访问。
- 数组：相对固定。通常不建议随意改变数组长度，以免导致解构赋值错位。
#### ⚠️ 常见错误与解决方案
在使用这些技术时，初学者（甚至是有经验的开发者）常会陷入一些误区。这里列出两个最常见的坑供你参考：
- 错误 1：忘记使用解构，导致变量引用错误
如果你使用数组解构，请确保左边的变量名数量与返回的数组长度匹配，或者善用默认值。
// 如果函数返回两个值，你只接收了一个
let [x] = getCoords(); // y 被丢弃了
// 或者使用逗号占位来跳过中间的值
let [first, , third] = [1, 2, 3]; // first=1, third=3
- 错误 2：解构时属性名拼写错误
在使用对象解构时，变量名必须与对象中的键名完全一致。
function getConfig() { return { timeout: 1000 }; }
// 拼写错误会导致变量被赋值为 undefined
let { timeOut } = getConfig(); // undefined! 正确应该是 { timeout }
解决方案：如果你想要使用不同的变量名，可以使用对象解构的别名功能：
let { timeout: myTimeout } = getConfig(); // 变量名为 myTimeout，值为 1000
性能优化建议
虽然现代 JavaScript 引擎（如 V8）对对象和数组的优化已经非常高效，但在极端性能敏感的场景（如高频循环或图形渲染）下，微小的开销也会被放大。
- 避免过度的解构：每次解构都会创建新的变量引用。在性能极其敏感的热路径代码中，直接访问对象属性或数组索引可能比解构略快，但这通常是以牺牲可读性为代价的。在 99% 的业务代码中，你应该优先选择可读性。
- 减少临时对象的创建：如果你在函数内部创建了一个对象用于返回，引擎会为其分配内存。虽然 GC（垃圾回收）机制很强大，但如果该函数每秒执行数百万次，考虑直接修改传入的对象参数（原地修改）可能是更好的选择，尽管这不符合纯函数的理念。
总结与后续步骤
在这篇文章中，我们深入探讨了 JavaScript 函数多值返回的两种核心模式：数组解构和对象解构。我们看到了数组如何通过简洁的语法处理有序数据，也看到了对象如何通过清晰的语义极大地增强了代码的健壮性。
关键要点回顾：
- 使用数组处理位置相关、结构简单的多值返回（如坐标、RGBA 值）。
- 使用对象处理具有明确业务含义、结构复杂或可能扩展的多值返回。
- 善用 ES6 的解构赋值语法，可以让你的代码像自然语言一样流畅。
接下来的学习建议：
既然你已经掌握了如何优雅地返回数据，下一步建议你深入研究 JavaScript 的参数传递机制。思考一下：如果我们能通过对象返回多个值，是否也可以通过对象传递多个参数？这就是“选项对象”模式的魅力所在。此外，不妨尝试将现有的老旧代码重构为这些现代写法，你会惊喜地发现代码质量的提升。
希望这篇文章能帮助你更自信地编写 JavaScript 代码！如果你有任何疑问或想要分享自己的见解，欢迎继续交流。