← JavaScript for...in循环 JavaScript函数 →

JavaScript return语句

原创 2026-03-12 JavaScript 已有人查阅

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能让代码更清晰、更可靠。回顾一下核心要点:

  1. return立即终止函数,后面代码不再执行

  2. 可以返回任何类型:基本类型、对象、数组、函数等

  3. 返回多个值:用数组或对象包装,推荐用对象

  4. 注意换行问题,避免自动插入分号导致bug

  5. 构造函数中慎用return,返回对象会覆盖this

  6. 异步函数中return返回Promise,配合async/await使用

个人建议:写函数时先考虑所有的返回情况,把异常情况用提前返回处理掉,再写核心逻辑。这样写出来的代码不仅bug少,别人接手时也容易理解。

如果在实际开发中遇到return相关的奇怪问题,可以先检查是不是漏了return,或者是不是在return后面换行了。这两个是最常见的坑,占了return相关问题的八成以上。

← JavaScript for...in循环 JavaScript函数 →
分享笔记 (共有 篇笔记)
验证码:
微信公众号