JavaScript return语句指南:从入门到精通
一、return语句到底是什么
return语句是JavaScript函数中最基础的组成部分之一。它的作用是把函数内部处理完的结果传递出去,让外面的代码能够拿到这个值继续使用。当函数执行到return时,会立即停止运行,后面就算还有代码也不会再执行。
看个简单的例子:
function 计算面积(宽度, 高度) {
return 宽度 * 高度;
// 这里的代码永远不会执行
console.log("这行不会输出");
}
let 房间面积 = 计算面积(5, 8);
console.log(房间面积); // 输出: 40
在开发中,我经常看到新手在这个地方犯错。他们以为函数会继续执行return后面的代码,结果调试半天找不到问题所在。
二、return语句的语法细节
return的语法格式很简单:
return 表达式;
这个"表达式"就是要返回的值。如果不写表达式,函数默认返回undefined:
javascript
function 空返回() {
return;
}
function 无返回() {
let x = 10;
// 没有return语句
}
console.log(空返回()); // undefined
console.log(无返回()); // undefined
一个容易踩的坑
return关键字和返回值之间不能换行。JavaScript有个自动插入分号的机制,会把换行理解成语句结束:
// 错误写法
function 问题函数() {
return
10 + 20;
}
// 实际被解释成:
function 问题函数() {
return;
10 + 20;
}
console.log(问题函数()); // 输出undefined
个人经验分享:我早期学JavaScript时就经常被这个坑到。后来养成习惯,要么把返回值直接跟在return后面,要么用括号包起来:
// 推荐写法
function 正确写法() {
return (
10 + 20
);
}
// 或者
function 另一种写法() {
return 10 + 20;
}
三、return能返回什么类型
JavaScript的return语句非常灵活,几乎所有类型都能返回。
返回基本类型
function 获取配置() {
let 开启调试 = true;
let 版本号 = "2.1.5";
let 连接数 = 100;
return 连接数; // 返回数字
}
返回对象类型
在工作中,返回对象是最常见的做法:
function 创建用户(用户名, 邮箱, 角色) {
return {
name: 用户名,
email: 邮箱,
role: 角色,
createdAt: "2026-03-12",
isActive: true
};
}
let 新用户 = 创建用户("code_user", "alan@ebingou.cn", "编辑");
console.log(新用户);
返回函数(闭包)
这是JavaScript比较有特色的地方,函数可以返回另一个函数:
function 创建计数器(起始值) {
let 计数 = 起始值 || 0;
return function() {
计数 += 1;
return 计数;
};
}
let 点击计数 = 创建计数器(100);
console.log(点击计数()); // 101
console.log(点击计数()); // 102
这种写法在封装私有变量时特别有用,很多源码里都能看到类似模式。
四、如何返回多个值
JavaScript函数只能返回一个值,但实际开发中经常需要返回多个数据。解决方法是把多个值打包成数组或对象。
用数组返回多个值
function 获取课程数据() {
let 课程名 = "JavaScript进阶";
let 学习人数 = 15800;
let 课程评分 = 4.8;
let 难度等级 = "中级";
return [课程名, 学习人数, 课程评分, 难度等级];
}
// 用数组解构接收
let [名称, 人数, 评分, 难度] = 获取课程数据();
console.log(`${名称} - 学习人数: ${人数}, 评分: ${评分}`);
用对象返回多个值(推荐)
我个人更倾向于用对象,因为每个返回值都有明确的字段名,代码更容易理解:
function 获取服务器状态() {
let cpu使用率 = "52%";
let 内存使用 = "4.2GB/16GB";
let 磁盘剩余 = "128GB";
let 在线时长 = "22天";
let 请求总数 = 158942;
return {
cpu: cpu使用率,
memory: 内存使用,
disk: 磁盘剩余,
uptime: 在线时长,
requests: 请求总数
};
}
// 可以只取需要的字段
let { cpu, memory, requests } = 获取服务器状态();
console.log(`CPU: ${cpu}, 内存: ${memory}, 总请求: ${requests}`);
为什么推荐用对象?
-
字段名自带说明作用,看代码就知道每个值的含义
-
解构时不需要关心顺序
-
后续增加返回值不会影响已有代码
-
代码自文档化,维护成本低
五、return在函数中的实际应用
用return提前退出函数
合理使用return可以让代码结构更清晰,避免多层嵌套:
// 不推荐的写法
function 处理订单(订单) {
if (订单) {
if (订单.金额 > 0) {
if (订单.已支付) {
// 处理已支付订单
return "订单处理完成";
} else {
return "订单未支付";
}
} else {
return "订单金额错误";
}
} else {
return "订单不存在";
}
}
// 推荐的写法 - 提前返回
function 处理订单优化(订单) {
if (!订单) return "订单不存在";
if (订单.金额 <= 0) return "订单金额错误";
if (!订单.已支付) return "订单未支付";
// 正常处理逻辑
return "订单处理完成";
}
这种写法在教学中我经常强调,代码可读性提升很明显。
在循环中使用return
return会直接跳出整个函数,包括循环:
function 查找用户(用户列表, 目标ID) {
for (let i = 0; i < 用户列表.length; i++) {
if (用户列表[i].id === 目标ID) {
return 用户列表[i]; // 找到就立即返回,不再继续循环
}
}
return null; // 没找到返回null
}
let 用户们 = [
{ id: 1, name: "张三" },
{ id: 2, name: "李四" },
{ id: 3, name: "王五" }
];
let 找到的用户 = 查找用户(用户们, 2);
console.log(找到的用户); // { id: 2, name: "李四" }
在异步函数中使用return
现代JavaScript开发离不开异步操作:
async function 获取用户资料(用户ID) {
try {
let 响应 = await fetch(`https://api.ebingou.cn/users/${用户ID}`);
let 数据 = await 响应.json();
return {
id: 数据.id,
name: 数据.name,
lastActive: "2026-03-12"
};
} catch (错误) {
console.error("获取失败:", 错误);
return null; // 出错时返回null
}
}
六、return的常见误区
误区1:以为return可以结束整个程序
function 测试函数() {
return "函数结束";
console.log("这行不会执行");
}
测试函数();
console.log("程序还在运行"); // 这行会执行
return只结束当前函数,不影响外部代码执行。
误区2:在forEach中用return想跳出循环
let 数字列表 = [1, 2, 3, 4, 5];
// 错误用法
数字列表.forEach(数字 => {
if (数字 === 3) {
return; // 这只结束当前这一次循环,不会跳出forEach
}
console.log(数字); // 会输出1, 2, 4, 5
});
// 正确做法
for (let 数字 of 数字列表) {
if (数字 === 3) {
break; // 跳出整个循环
}
console.log(数字); // 只输出1, 2
}
误区3:忘记写return
这个错误在大型项目中特别难发现:
function 计算折扣(原价, 折扣) {
let 最终价 = 原价 * (1 - 折扣);
// 忘记写return
}
let 价格 = 计算折扣(200, 0.2);
console.log(价格); // undefined,不是预期的160
代码看起来逻辑都对,但结果就是不对,往往要调试很久才能发现是漏了return。
七、return的实践
保持return语句清晰
// 不清晰
function 判断权限(角色) {
return 角色 === 'admin' || 角色 === 'super' || 角色 === 'manager' true : false;
}
// 清晰
function 判断权限优化(角色) {
let 管理员角色 = ['admin', 'super', 'manager'];
return 管理员角色.includes(角色);
}
统一返回类型
尽量让函数返回相同类型的数据,避免有时返回对象有时返回数组:
// 不推荐
function 获取数据(类型) {
if (类型 === 'user') {
return { name: '张三', age: 25 };
} else {
return ['数据1', '数据2'];
}
}
// 推荐
function 获取用户数据() {
return { name: '张三', age: 25 };
}
function 获取列表数据() {
return ['数据1', '数据2'];
}
本节课程知识要点:
-
每个函数只做一件事,返回一种类型的数据
-
使用有意义的变量名和字段名
-
考虑用提前返回简化逻辑
-
异步函数中处理好错误情况
八、总结
return语句虽然基础,但深入理解后会发现很多细节。掌握好return能让代码更清晰、更可靠。回顾一下核心要点:
-
return立即终止函数,后面代码不再执行
-
可以返回任何类型:基本类型、对象、数组、函数等
-
返回多个值:用数组或对象包装,推荐用对象
-
注意换行问题,避免自动插入分号导致bug
-
构造函数中慎用return,返回对象会覆盖this
-
异步函数中return返回Promise,配合async/await使用
个人建议:写函数时先考虑所有的返回情况,把异常情况用提前返回处理掉,再写核心逻辑。这样写出来的代码不仅bug少,别人接手时也容易理解。
如果在实际开发中遇到return相关的奇怪问题,可以先检查是不是漏了return,或者是不是在return后面换行了。这两个是最常见的坑,占了return相关问题的八成以上。