JavaScript函数返回值：理解与实践-js教程-PHP中文网

JavaScript函数返回值：理解与实践

聖光之護

发布： 2025-12-02 12:22:25

原创

330人浏览过

javascript函数返回值：理解与实践

本教程旨在阐明JavaScript函数中return语句的核心作用，它允许函数将内部计算结果输出为一个可供外部使用的值。文章将通过对比return与console.log()的区别，并结合实际代码示例，指导读者如何正确调用函数并捕获其返回值，从而有效利用函数的计算成果，提升代码的可维护性和功能性。

在JavaScript编程中，函数是组织代码和实现特定任务的基本单元。当一个函数执行完毕后，我们通常希望获取其处理结果以便在程序的其他部分使用。这时，return语句就扮演了至关重要的角色。

理解 return 语句

return语句用于指定函数执行完毕后要返回的值。一旦函数执行到return语句，它会立即停止执行，并将return后面的表达式的值作为函数调用的结果返回。如果没有指定返回值（即只写return;或不写return），函数将默认返回undefined。

示例：一个简单的加法函数

立即学习“Java免费学习笔记（深入）”；

function add(a, b) {
  return a + b; // 返回a和b的和
}

let sum = add(5, 3); // 调用add函数，并将返回值8赋给sum变量
console.log(sum);    // 输出: 8

登录后复制

在这个例子中，add函数计算a + b并将结果通过return语句返回。当我们调用add(5, 3)时，这个调用表达式的整个结果就是8，然后这个8被赋给了sum变量。

return 与 console.log() 的区别

初学者常会将return与console.log()混淆，认为它们都能“输出”值。然而，两者的功能和目的截然不同：

return 语句：
- 目的： 将函数内部计算产生的数据“送出”函数外部，作为函数调用的结果。
- 行为： 终止函数执行，并提供一个值给调用者。
- 影响： 程序的其他部分可以接收并使用这个返回的值。
console.log() 语句：

大师兄智慧家政
58到家打造的AI智能营销工具

99

查看详情
- 目的： 在开发工具的控制台（或终端）中显示信息，主要用于调试和查看程序运行状态。
- 行为： 打印指定的信息到控制台，但不会终止函数执行（除非它位于return之前），也不会将信息作为函数调用的结果返回。
- 影响： 仅在控制台可见，不会影响程序的逻辑流程或变量赋值。

通过实际案例对比：

考虑以下将两个数组合并并排序的函数示例。

原始代码（仅使用 console.log() 输出结果）：

var merge = function(nums1, m, nums2, n) {
  let hasil = [];
  // 将nums1的前m+1个元素添加到hasil
  for (let i = 0; i <= m; i++) {
    const element = nums1[i];
    hasil.push(element);
  }
  // 将nums2的前n+1个元素添加到hasil
  for (let j = 0; j <= n; j++) {
    const element2 = nums2[j];
    hasil.push(element2);
  }
  let jawaban = hasil.sort((a, b) => a - b); // 排序
  console.log(jawaban); // 仅在控制台打印
  // return jawaban; // 缺少return语句，或return后未被捕获
};

// 调用函数，虽然控制台会打印结果，但无法将结果赋给变量
merge([1, 2, 3], 1, [5, 9, 2], 2); // 控制台输出: [1, 2, 2, 3, 5, 9]
let myResult = merge([1, 2, 3], 1, [5, 9, 2], 2);
console.log(myResult); // 输出: undefined (因为函数没有被捕获的返回值)

登录后复制

在上述代码中，尽管console.log(jawaban)会在控制台显示排序后的数组，但由于函数没有将jawaban通过return语句返回，或者返回了但没有被外部变量接收，因此myResult变量最终会得到undefined。这意味着我们无法在merge函数外部进一步操作这个排序后的数组。

正确使用 return 语句捕获返回值：

为了获取函数计算后的结果并在其他地方使用，我们必须确保函数通过return语句返回该值，并在调用时将其赋给一个变量。

var merge = function(nums1, m, nums2, n) {
  let hasil = [];
  // 将nums1的前m+1个元素添加到hasil
  for (let i = 0; i <= m; i++) {
    const element = nums1[i];
    hasil.push(element);
  }
  // 将nums2的前n+1个元素添加到hasil
  for (let j = 0; j <= n; j++) {
    const element2 = nums2[j];
    hasil.push(element2);
  }
  let jawaban = hasil.sort((a, b) => a - b); // 排序
  return jawaban; // 将排序后的数组作为函数的返回值
};

// 调用merge函数，并将返回值赋给result变量
let result = merge([1, 2, 3], 1, [5, 9, 2], 2);
console.log(result); // 输出: [1, 2, 2, 3, 5, 9]

// 现在，我们可以对result变量进行进一步操作
console.log("合并后的数组长度:", result.length); // 输出: 合并后的数组长度: 6

登录后复制

通过将return jawaban添加到函数末尾，并使用let result = merge(...)来接收返回值，我们成功地将函数内部的计算结果jawaban传递到了函数外部的result变量中。现在，result变量包含了排序后的数组，我们可以在程序的任何地方使用它。

注意事项与最佳实践

一个函数可以有多个 return 语句，但只会执行一个： 当执行到任何一个return语句时，函数就会立即终止。这常用于根据条件返回不同的值。

function checkNumber(num) {
  if (num > 0) {
    return "正数";
  } else if (num < 0) {
    return "负数";
  } else {
    return "零";
  }
}
console.log(checkNumber(10)); // 输出: 正数
console.log(checkNumber(-5)); // 输出: 负数

登录后复制

没有 return 语句的函数： 如果函数没有明确的return语句，或者return语句后面没有表达式，它将隐式地返回undefined。
函数只返回一个值： 尽管你可以返回一个数组或对象来“包装”多个数据，但从技术上讲，函数总是只返回一个单一的值。
清晰的函数职责： 一个好的函数应该有明确的输入（参数）和输出（返回值）。避免函数既打印信息又返回数据，除非打印信息是其主要职责（如日志函数）。将数据处理和数据显示分离，有助于提高代码的可测试性和可维护性。

总结

掌握return语句是编写高效、可复用JavaScript函数的关键。它使得函数能够成为一个独立的计算单元，将处理结果清晰地传递给程序的其他部分。理解return与console.log()之间的本质区别，并正确地捕获函数返回值，将显著提升你的JavaScript编程能力。通过实践，你将能够构建出结构更清晰、功能更强大的应用程序。

以上就是JavaScript函数返回值：理解与实践的详细内容，更多请关注php中文网其它相关文章！