HTML5学堂-码匠 HTML5学堂

您当前位于:ECMAScript 基础语法 ——> JavaScript | 返回语句 return的基本知识

JavaScript | 返回语句 return的基本知识

2015/07/09 08:25:28 | 作者:HTML5学堂(码匠) | 分类:ECMAScript 基础语法 | 关键词:return,返回语句

return语句的用法

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

return在函数中的作用

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

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

  1. <script>
  2.     function test(){
  3.         var str = "HTML5学堂";
  4.         return str;
  5.     }
  6.     var result = test();
  7.     console.log(result);
  8. </script>

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

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

代码示例:

  1. <script>
  2.     function test(){
  3.         var str = "HTML5学堂";
  4.         return 0;
  5.         console.log(str);
  6.     }
  7.     var result = test();
  8.     console.log(result);
  9. </script>

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

return的默认值

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

  1. <script>
  2.     function test(){
  3.         var str = "HTML5学堂";
  4.     }
  5.     var result = test();
  6.     console.log(result);
  7. </script>

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

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

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

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>H5course - HTML5学堂 - 刘国利</title>
  6. </head>
  7. <body>
  8. </body>
  9. <script>
  10.     var str = "刘国利";
  11.     function test(str){
  12.         var str = "HTML5学堂";
  13.         return
  14.         {
  15.             str;
  16.         }
  17.     }
  18.     var result = test("H5course");
  19.     console.log(result);
  20. </script>
  21. </html>

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

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

  1. return ;
  2. {
  3.     str;
  4. }

那么,如果我们将{}的位置进行调整呢,将return与{放置在一行呢?如:

  1. return { str; }

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

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS