详解JavaScript中return的用法

最近，跟身边学前端的朋友了解，有很多人对函数中的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；

　　　　

　　　　 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>

示例图片：

　　　　当然是函数就可以调用，我们可以写成！func1()();这里很好理解，func1();我们打印出来看了就是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>

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

　　　 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>

执行效果图：

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

　　　　执行效果图：

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

　　　　执行效果图：

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

　　　　执行效果图：

　　　　可以看到，当返回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>

执行效果图：

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

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

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

赞 (0)

相关推荐

  • JSP request（return String）用法详例

    1.JSP代码 : 复制代码 代码如下: <%-- Document : index Created on : 2009-10-4, 12:45:43 Author : lucifer --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&

  • Javascript中的return作用及javascript return关键字用法详解

    javascript 中的return一直用的都比较火,关于javascript中的return作用大家了解吗,下面通过本文给大家详细介绍,具体内容如下所示: return 语句从当前函数退出,并从那个函数返回一个值. 语法: return[()[expression][]]; 可选项 expression 参数是要从函数返回的值.如果省略,则该函数不返回值. 用 return 语句来终止一个函数的执行,并返回 expression 的值.如果 expression 被省略,或在函数内没有 re

  • js中return false(阻止)的用法

    return false 阻止表单提交不起今天这个问题困扰了我很久,在网上找了很多资料,基本上关于onsubmit=return false有以下几点要注意的地方: 1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方.如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数:只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处. 复制代码 代码如下

  • JavaScript中return用法示例

    本文实例讲述了JavaScript中return用法.分享给大家供大家参考,具体如下: return可以接受函数中的返回值,前提是函数中要有return语句. 下面是一个应用小示例: <html> <head> <script type='text/javascript'> function linkPage(){ alert('You Clicked??'); return false; } </script> </head> <body

  • JSP application（return String）用法详例

    1.JSP代码: 复制代码 代码如下: <%-- Document : Application Created on : 2009-10-4, 13:18:53 Author : lucifer --%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional

  • javascript中break，continue和return语句用法小结

    由于最近一直在看javascript,下面简要说一下它们三个在javascript的一些用法 break语句: break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句.由于它是用来退出循环或者switch语句,所以只有当它出现在这些语句时,这种形式的break语句才是合法的. 如果一个循环的终止条件非常复杂,那么使用break语句来实现某些条件比用一个循环表达式来表达所有的条件容易得多. for(var i=1;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能

  • JavaScript中的return布尔值的用法和原理解析

    首先return作为返回关键字,他有以下两种返回方式 1.返回控制与函数结果 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 2.返回控制无函数结果 语法为:return;在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<A>元素,页面会跳转到该元素href属性指定的页. 例如:<a href="http:www.baidu.com;alert(11);return false;ale

  • 详解JavaScript中return的用法

    详解JavaScript中return的用法

    最近,跟身边学前端的朋友了解,有很多人对函数中的return的用法和意思理解的比较模糊,这里写一篇文章跟大家一起探讨一下return的用法. 1定义 return,从字面意思来看就是返回,官方定义return语句将终止当前函数并返回当前函数的值:可以看下下面的示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • 详解Javascript 中的 class、构造函数、工厂函数

    到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

  • 详解JavaScript中new操作符的解析和实现

    前言 new 运算符是我们在用构造函数创建实例的时候使用的,本文来说一下 new 运算符的执行过程和如何自己实现一个类似 new 运算符的函数. new 运算符的运行过程 new 运算符的主要目的就是为我们创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例(比如箭头函数就没有构造函数,所以是不能 new 的).new 操作符的执行大概有以下几个步骤: 创建一个新的空对象 把新对象的 __proto__ 链接到构造函数的 prototype 对象(每一个用户定义函数都有一个 proto

  • 详解JavaScript中的4种类型识别方法

    具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console

  • 详解C++中mutable的用法

    代码编译运行环境:VS2017+Win32+Debug mutalbe的中文意思是"可变的,易变的",是constant(即C++中的const)的反义词.在C++中,mutable也是为了突破const的限制而设置的,被mutable修饰的变量将永远处于可变的状态. mutable的作用有两点: (1)保持常量对象中大部分数据成员仍然是"只读"的情况下,实现对个别数据成员的修改: (2)使类的const函数可以修改对象的mutable数据成员. 使用mutable

  • 详解JavaScript中的链式调用

    链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等,都是使用的链式调用,当我们在调用同一对象多次其属性或方法的时候,我们需要多次书写对象进行.或()操作,链式调用是一种简化此过程的一种编码方式,使代码简洁.易读. 链式调用通常有以下几种实现方式,但是本质上相似,都是通过返回对象供之后进行调用. this的作用域链,jQuery的实现方式,通常链式调用

  • 详解JavaScript中的执行上下文及调用堆栈

    详解JavaScript中的执行上下文及调用堆栈

    一.执行上下文是什么 代码运行是在一定的环境之中运行的,这个运行环境我们就成为执行环境,也就是执行上下文,按照执行环境不同,我们可以分为三类: 全局执行环境:代码首次执行时候的默认环境 函数执行环境:每当执行流程进入到一个函数体内部的时候 Eval执行环境:当eval函数内部的文本执行的时候 二.执行上下文栈是什么 既然是'栈',那就得符合'栈'的特性,即数据结构是先进后出.下面我们看一段代码: function cat(a){ if(a<0){ return false; } console.

  • 详解javascript中的Strict模式

    简介 在ES5中,引入了strict模式,我们可以称之为严格模式.相应的sloppy mode就可以被称为非严格模式. 严格模式并不是非严格模式的一个子集,相反的严格模式在语义上和非严格模式都发生了一定的变化,所以我们在使用过程中,一定要经过严格的测试.以保证在严格模式下程序的执行和非严格模式下的执行效果一致. 使用Strict mode strict mode会改变javascript的一些表现,我们将会在下一节中进行详细的讲解. 这里先来看一下,怎么使用strict mode. Strict

  • 详解JavaScript中Arguments对象用途

    详解JavaScript中Arguments对象用途

    目录 前言 Arguments 的基本概念 Arguments 的作用 获取实参和形参的个数 修改实参值 改变实参的个数 检测参数合法性 函数的参数个数不确定时,用于访问调用函数的实参值 遍历或访问实参的值 总结 在实际开发中,Arguments 对象非常有用.灵活使用 Arguments 对象,可以提升使用函数的灵活性,增强函数在抽象编程中的适应能力和纠错能力. JavaScript 中 Arguments 对象的用途总结. 前言 相信我们很多人在代码开发的过程中都使用到过一个特殊的对象 --

随机推荐