详解JavaScript中return的用法


Posted in Javascript onMay 08, 2017

最近,跟身边学前端的朋友了解,有很多人对函数中的return的用法和意思理解的比较模糊,这里写一篇文章跟大家一起探讨一下return的用法。

 

  1定义   

return,从字面意思来看就是返回,官方定义return语句将终止当前函数并返回当前函数的值;可以看下下面的示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  function func1(){
   while (true){
    return 1;
   }
  };
  alert(func1());
 </script>
</head>
<body>
</body>
</html>

可以看到我在函数里面写了一个死循环,然后在下面调用,在没有写return语句时浏览器会一直执行循环内的语句,直接卡死;

而写了return语句后,直接中断了函数,并且给函数返回了一个数值1,意思就是当函数执行后,函数体将被赋值为函数的返回值,这里会被返回1;

详解JavaScript中return的用法

详解JavaScript中return的用法

2写法

官方定义return后面可以跟一个value,也就是说可以跟javascript中的任何数据类型,数字,字符串,对象等,当然也可是再返回一个函数,举个栗子:  

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  function func1(){
   return function (){
    alert(1);
   }
  };
  alert(func1()); //!func1()(); 这个注释是通过自执行函数调用返回的函数
</script> 14 </head> 15 <body> 16 17 </body> 18 </html>

示例图片:

详解JavaScript中return的用法

当然是函数就可以调用,我们可以写成!func1()();这里很好理解,func1();我们打印出来看了就是return后面跟的匿名函数,那么我们就可以通过自执行函数的形式来调用,这里通过!函数体();的形式来调用。可以将注释里的代码拿出来试验一下:

详解JavaScript中return的用法

   3练习

   

(1)练习1

那么既然可以返回一个函数,我们就将下面的代码改写为一个回调函数的形式:

原代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
 if(prompt('输入数字1')==1){
  !function (){
  alert('输对了');
  }()
 }else{
  !function (){
   alert('输错了');
  }()
 }
 </script>
</head>
<body>
</body>
</html>

改写后:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  function func1(){
   if(prompt('输入数字1')==1){
    return function (){
     alert('输对了');
    }
   }else{
     return function (){
     alert('输错了');
    }
   }
  }
  !func1()();
 </script>
</head>
<body>
</body>
</html>

改写前是通过if语句来判断执行哪个函数;改写后是通过if语句判断返回哪个函数,然后在下面调用;并没有什么意义只是帮助我们理解一下return;

(2)练习2

通过return语句来实现一个循环。

思路:既然return语句可以返回一个函数,那么就是说可以返回它自己本身,在后面调用时就能实现一个循环的功能;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  var i=1;  //定义循环变量
  function func1(){
   i++;  //改变循环变量
   if(i<5){


//小括号为循环条件
    document.write(i+'<br>');  //这里是循环体
    return func1();
   }     
  }
  !func1()();    //调用函数
 </script>
</head>
<body>
</body>
</html>

各部分在循环里所起的作用已经在代码内的注释写出,博友们可以自己去试验一下,下面为执行效果图:

详解JavaScript中return的用法

  4定义javascript自带方法中的回调函数  

前面我们已经对return的用法做了很详细的研究,下面我们对javascript自带方法中的回调函数做一下研究,这里以数组中的sort();排序方法为例:

我们都知道sort();中可以写一个回调函数来给数组指定排序的规则;示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  var arr = [1,3,2,6,5];
  arr.sort(function(a,b){
   return a-b;
  });
  console.log(arr); 
 </script>
</head>
<body>
</body>
</html>

执行效果图:

详解JavaScript中return的用法

那么为什么会这样呢,跟return又有什么关系呢,相信有很多博友都很困扰,下面我们来做个实验,将return后面的a-b换成-1;改动较小,就不再上传代码,朋友们可自己手动修改;

执行效果图:

详解JavaScript中return的用法

可以看到,当返回一个负数-1时,没有发生变化;下面我们将return后面的a-b换成0;

执行效果图:

详解JavaScript中return的用法

可以看到,当返回0时,没有发生变化;下面我们将return后面的a-b换成一个正数1;

执行效果图:

详解JavaScript中return的用法

可以看到,当返回1时,数组顺序被反转了;

那么,我们可以得出以下结论:

当a-b<=0时,a在前,b在后;

当a-b>0是,a在后,b在前;

到这里,肯定有博友对a和b到底是啥有了疑问,我们可以通过下面的代码打印出来:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  var a = [1,3,2,6,5];
  a.sort(function(a,b){
   console.log('a是:'+a+'\t b是:'+b+'<br>');
   return a-b;
  });
  console.log(a);
 </script>
</head>
<body>
</body>
</html>

执行效果图:

详解JavaScript中return的用法

return a-b;升序排列我们已经详细的去分析了,那么降序return b-a;就很简单了,说白了就是return -(a-b);也就是在a-b的基础上作了反转变成降序。

到这里我们可以得出一个总体的结论,return回去的值为一个数值,sort();方法会根据数值的正负对数组的各个部分进行排序。

以上所述是小编给大家介绍的JavaScript中return的用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
vue做网页开场视频的实例代码
Oct 20 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 Javascript
如何使用angularJs
May 08 #Javascript
关于foreach循环中遇到的问题小结
May 08 #Javascript
js下载文件并修改文件名
May 08 #Javascript
JS将unicode码转中文方法
May 08 #Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 #Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 #Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 #jQuery
You might like
二招解决php乱码问题
2012/03/25 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Angular父组件调用子组件的方法
2018/04/02 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python 追踪except信息方式
2020/04/25 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
学校出纳员岗位职责
2014/03/18 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
环保宣传语大全
2015/07/13 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
高中生物教学反思
2016/02/20 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang