JavaScript教程之函数返回值的使用

3 个月前 · 来自专栏前端入门学习路线

黑马线上前端

已认证帐号

什么是函数的返回值

在前面的两关当中，我们已经了解了函数的使用方法，以及函数参数的具体应用，那么接下来在第三关当中，我将继续带你探索函数的另一个秘密——返回值。

那么什么是“返回值”？我们为什么要使用返回值呢？

首先， 返回值 这个词你可以理解为字面意思，就是将值返回。具体点说，就是将函数内的值返回到函数的外部。

那么我们为什么非要通过返回值将值拿到函数外部呢？难道不能直接在函数外部使用函数内部的值吗？

咱们可以先来做一个测试，看看在函数内部创建的变量是否可以在函数外部使用：

function myTestFunc() {
    // 在函数内部创建变量
    var a = 10;
    var b = "hello,world";
// 直接打印函数内部的变量
console.log(a, b);

在上面的这段代码中，我们行舟老师创建了一个函数 myTestFunc ，并且在函数内部创建了两个变量 a 和 b 。然后直接在函数的外部打印了这两个变量。

现在就将代码放在 html 文件中，打开浏览器运行，查看结果：

我们看到的是红色错误提示：a is not defined。意思是变量a没有被定义。

为什么会提示 a 没有定义呢，难道是函数没有调用的缘故，我们再来把函数调用一下。

function myTestFunc() {
     // 在函数内部创建一个变量
     var a = 10;
     var b = "hello,world";
// 直接打印函数内部的变量
// console.log(a, b);
// 调用函数后再来打印两个变量
myTestFunc();
console.log(a, b);

再刷新浏览器看看结果。

等待我们的，依然是醒目的红色。

相信此时的你应该能通过上面的例子看清楚，不管我们是否调用函数，函数内部的变量都不能直接在函数外部使用。

那么难道在函数内部的值就真的没有什么办法在函数外部使用吗？

行舟老师负责任的告诉你，办法总是有滴，而且目前来讲有两个办法，一个是创建 全局变量 ，另外一个是利用 返回值 。

关于 全局变量 ，我们先留一个悬念，咱们在下一关当中再来进行讲解，现在我们重点看另外一种方法，也就是 返回值 。

返回值的使用方法

说到返回值，其实想要使用它也很简单，直接通过关键字 return 就可以将一个值返回到函数的外部。

例如下面的代码：

function myTestFunc() {
    var str = "hello,world";
    return str;

在函数内部我们创建了一个变量 str ，并且将 hello,world 这个字符串赋值给了 str 这个变量。

在第三行代码中，直接通过 return 关键字将 str 这个变量返回到了函数的外部。这样也就等于是在函数中设置了一个返回值。

那么我们既然设置了返回值，将变量str返回到了函数的外部，那么我们又该如何在函数外部拿到这个值呢？

其实也不难，咱们可以直接在函数调用代码的前面使用变量来接收它的返回值：

function myTestFunc() {
    var str = "hello,world";
    return str;
// 调用函数，并且接收返回值
var returnVal = myTestFunc();

注意函数调用这行代码的变化，我们在前面加了一个变量和一个赋值符号，相当于用变量 returnVal 接收了函数内部设置的返回值。然后可以用console.log打印一下结果，查看返回值。 console.log 函数来打印一下结果，查看返回值。

console.log(returnVal);

在浏览器中运行代码，得到的结果如下：

很好，函数内部返回的值在函数外部被正确接收并打印出来了。

ok，到这，你已经了解了函数返回值的基本使用，同样的，行舟老师给你来一波总结，梳理一下在返回值这个知识点上需要你明确和掌握的内容：

函数内部的变量没有办法在函数外部直接使用
设置返回值可以通过 return 关键字来实现
在函数外部可以在调用函数的前面通过变量来接收函数设置的返回值另外，关于返回值的应用，还有一个点是你需要注意的，继续看。

函数返回值的应用技巧

前面的课程中我们学习了函数返回值的基本使用通过return关键字可以定义一个返回值。调用函数的时候直接在前面加上一个变量就可以接收到函数的返回值。

首先，还是来看段代码：

// 创建一个函数
function myTestFunc() {
    console.log("hello,world!");
var returnVal = myTestFunc();
console.log(returnVal);

代码中我们创建了一个 myTestFunc 函数，并在函数中打印了 hello,world 这个字符串。仔细看函数调用部分你会发现，函数调用的前面加上了一个变量 returnVal ，用以接收函数的返回值，但实际上该函数并没有设置返回值，那么这个变量接收到底能不能接收到值呢，如果没有，打印出来的结果又是什么呢？

让我们打开浏览器，看看真实的结果：

此时，打开浏览器后，可以看到程序有两个输出，第一个输出很明显是调用函数后函数内部代码打印的 hello,world 。

而浏览器中输出的第二个结果，就是我们打印 returnVal 的结果，显示的是 undefined ，为什么？

道理其实很简单，你再回过头看下面这行代码：

var returnVal = myTestFunc();

这句代码本质就是声明了一个变量 returnVal ，然后给它赋了一个值，这个值就是 myTestFunc 的返回值，如果函数当中有返回值，这个返回值就会直接的被赋值到变量 returnVal 的身上，但是如果函数没有返回值呢，也就没有值对 returnVal 进行初始化。而在js的语法中，没有初始化的变量结果就为 undefined 。

所以此时变量 returnVal 的打印的结果就为 undefined 。

好啦，关于函数的返回值咱们就先讲到这里，在下一关当中，行舟老师将带着你来学习一下函数当中的作用域问题，不过在这之前呢，还是需要你闯过本关的闯关练习哦！

闯关练习

需求：网页当中存在一个输入框，用户可以在输入框中输入一个数值，点击按钮后，会通过弹窗的形式告知当前输入的数值是奇数还是偶数。

代码如下：

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三关闯关练习</title>
</head>
    请输入需要判断奇偶的数值：
    <input type="text" id="val">
    <button id="btn">点击查询</button>
</body>
<script>
    // 获取标签
    var oBtn = document.getElementById('btn');
    var oInput = document.getElementById('val');
    // 绑定单击事件
    oBtn.onclick = function() {
        // 获取用户输入的值
        var inputVal = oInput.value;
        // 调用奇偶判断的函数,并且接收返回值
        var info = checkNumber(inputVal);
        // 将结果弹出
        alert("您的数值是:" + info);
    // 创建判断奇数偶数的函数
    function checkNumber(num) {
       /*需要补全的代码*/
</script>
</html>

正确答案：

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三关闯关练习</title>
</head>
    请输入需要判断奇偶的数值：
    <input type="text" id="val">
    <button id="btn">点击查询</button>
</body>
<script>
    // 获取标签
    var oBtn = document.getElementById('btn');
    var oInput = document.getElementById('val');
    // 绑定单击事件
    oBtn.onclick = function() {
        // 获取用户输入的值
        var inputVal = oInput.value;
        // 调用奇偶判断的函数,并且接收返回值
        var info = checkNumber(inputVal);
        // 将结果弹出
        alert("您的数值是:" + info);
    // 创建判断奇数偶数的函数
    function checkNumber(num) {
        if (Number(num) % 2 === 0) {
            return "偶数";
        }else {