详解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 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
python队列queue模块详解
2018/04/27 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python调用百度API实现人脸识别
2020/11/17 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
职业女性的职业规划
2014/03/04 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python