return语句的用法 - 码农教程

HTML5学堂：在函数当中，存在着return语句，今天我们就主要讲解一下return在函数中的作用，也来提一提return的默认值是多少，还有就是return语句的返回内容，在书写时需要注意什么。

return在函数中的作用

我们如果将函数看做一个加工厂，参数就是我们向加工厂投入的原料，具体的函数功能实际上就是加工的过程，而return语句代表返回值，就是加工厂在实现加工之后给“投资人”的成品。

换句话说，return语句的一个功能是——将函数处理/运行的结果返回给调用方。例如如下代码：

<script>
    function test(){
        var str = "HTML5学堂";
        return str;
    }
    var result = test();
    console.log(result);
</script>

打印出来的结果是——HTML5学堂。

return语句的另一个特点，则在于在函数当中，遇到return语句之后就意味着函数运行的结束，在此之后的代码是不运行的。

代码示例：

<script>
    function test(){
        var str = "HTML5学堂";
        return 0;
        console.log(str);
    }
    var result = test();
    console.log(result);
</script>

在上面这个示例当中，0被打印出来，但是‘HTML5学堂’并没有打印出来，原因在于console.log(str)这行代码位于return 0;之后，在遇到返回之后，函数就停止运行了。因此我们可以通过return语句控制函数是否结束。

return的默认值

在一些函数当中，我们有书写return语句，但是在有些函数中并没有出现return语句，那么此时，这些函数的返回值是多少呢？一起来看下面的代码示例：

<script>
    function test(){
        var str = "HTML5学堂";
    }
    var result = test();
    console.log(result);
</script>

通过代码示例的结果，我们能够看到，函数默认的返回值为undefined。（关于undefined的应用，在我们前面的一篇文章中有较为详细的介绍，感兴趣的各位可以点击查看——undefined与null的区别）

在书写return语句时需要注意什么

之前自己的一个学生遇到了一个较经典的案例，涉及到我们对return语句的理解以及作用域的基本知识。很多人都会掉进这个题目的坑里。先来看题目：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>H5course - HTML5学堂 - 刘国利</title>
</head>
<body>
</body>
<script>
    var str = "刘国利";
    function test(str){
        var str = "HTML5学堂";
        return
        {
            str;
        }
    }
    var result = test("H5course");
    console.log(result);
</script>
</html>

返回结果是什么呢？“HTML5学堂”，还是“刘国利”或者“H5course”？打印出来的结果，发现都不是上面我们假设的结果，而是“undefined”。

此处主要涉及的是JS语法的问题，在JS中，默认用分号结束一条语句，在return之后存在一个换行符，虽然没有分号，但是系统会默认为一句话的结束，增加一个分号，于是，上面JS代码中的return语句部分就等价于如下代码

return ;
{
    str;
}

那么，如果我们将{}的位置进行调整呢，将return与{放置在一行呢？如：

return { str; }

此时，会直接报错，原因在于，此处{str;}表示的是一个对象，但是很明显这种书写方式并不符合对象的书写格式。我们调整一下{}，将{}替换成()就可以解决这个问题。另外，需要注意的是，str后面的;（分号）应当出现在()（小括号）之外