详解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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
vue 中swiper的使用教程
May 22 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
vue 自定义右键样式的实例代码
Nov 06 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
帅气的琦玉老师
2020/03/02 日漫
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Python 防止死锁的方法
2020/07/29 Python
详解Python 中的容器 collections
2020/08/17 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
财务与信息服务专业推荐信
2013/11/28 职场文书
2014年度个人总结范文
2015/03/09 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
污染环境建议书
2015/09/14 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技