js中Return的用法

一、函数返回值,并终止函数
语法: Return表达式;
在函数语句结束时执行,并返回表达式的值作为函数的结果.
比如:

function foo(obj){
  let resultObj = obj;
//可对传入参数进行处理
  return  resultObj;
}

在这个例子中: obj代表的是一个对象。所谓对象就是他可以包纳万物无论是Number bool还是String或这是其他实例都包含在里面。然而return就是需要将处理过后的结果返回出去。就相当于一个工厂,我提供原材料然而工厂输出的将会是产品。这样讲还不明白我们可以简单的这样理解。
比如:用函数来做一个加法运算,需要他返回值。

  function Add(a,b){
    let result = a+b;
    return result;
}

这个例子中,如果你在外部直接调用这个函数如:
let text= Add(1,2);
就会得到(a+b)的和,也就是说结果是3;

再看一个例子:
`

function compare(a,b){
  //函数体,判断两个整数比较的三种情况
   if(a>b){
      return a;
  }else if(a == b){
    return "一样大";
  } else {
    return b;
  }
}

`
//简单理解就是:JS的函数返回的对象,a,b是对象,“一样大”是对象(字符串)

函数在一系列的代码执行后会得到一个期望的返回值,而此值就是通过return语句返回,并且将控制权返回给主调函数。
语法格式:
return表达式
代码示例如下:

function add(){
   let a = 1;
   let b = 2;
   return a + b;
}
  function func(){
   console.log(add());
 }
 func();

以上代码中,当调用func()函数的时候,控制权由func()函数掌握,当再调用add函数的时候,控制权交付给add函数,然后返回一个值并将控制权再交付给func()函数。
function a(){
return 10;
//这个时候,函数a 的值会等于10,并且函数中下面的内容不会再执行。
document.write(50);
//由于上面已经return了,这条代码不会执行
}
至于什么时候会用到,那看你要函数来做什么,你要他返回值就返回,不要他返回就不返回。
比如,用函数来做一个加法运算,需要他返回值,那就这样:

function a(b,c){
   return  b+c;
}

那么调用:
let abc = a(5,80);
这个时候,abc 这个变量的值会是85.
如果想直接输出结果,不要返回值那就

  function a(b,c){
    document.write(b+c);
  }
  let abc = a(5,80);

那么页面会输出85,但abc是没有值的。

默认函数是没有返回值的。
通常函数经过一系列处理后需要给外部返回一个值或者对象。
比如function sum(a,b){return a+b};
alert (sum(1,2)) //3 如果没有return将会弹出undefind。

二、返回控制
语法:return;

一般来讲,为事件处理函数返回return:false。作用在于阻止默认事件行为和取消默认动作,比如,在默认情况下点击一个元素,那么页面就会跳转到语速href属性指定的页面,那当你用return false时,就相当于一个终止符,而return true;就相当于一个执行符。
比如:
`

<a href="eoh.html" onclick= "return add_onclick()">open</a>
 //return false/true
 <script>
    function add_onclick(){
       return false; //false组织跳转
   }
 </script>

在js中,会常用return false;来阻止表单提交或者执行下面代码,也就阻止执行的默认行为。 比如:

  function sum(){
      if(true){
         return false;
   }
 }
    function test(){
       sum();
       num();
   }

`
虽然sum函数返回false阻止提交,但不会影响num函数的执行,a函数中返回false对test()函数而言只是相当于一个返回值,并不会影响test()函数的执行,简而言之,return:false;只对当前函数有效,并不会影响其他函数执行。
return是JavaScript里函数返回值的关键字,一个函数内处理的结果可以使用return返回,这样再调用函数的地方就可以用变量接收返回的结果。return关键字内任何类型的变量数据或表达式都可以进行返回,甚至什么都不返回也可以。 比如:

`function NullReturn(IsNull){
    if(IsNull==true){
    return;
    }
}`

这样写也是可以的,这里的意思是返回空(null),所以有的时候return 的作用就是用来终止函数执行。比如:
不加return

`<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script language="javascript">
            function Login_Click()
            {
            if(document.form1.UsName.value=="")
            {
            alert('用户名为空');
            }
            if(document.form1.UsPwd.value=="")
            {
            alert('密码为空');
            }
            alert('登陆成功');
            }
        </script>
    </head>
    <body>
        <form name="form1">
            <input type="text" name="UsName" >用户名
            <input type="password" name="UsPwd">密码
            <input type="button" name="Login" onClick="Login_Click();" >登陆
        </form>
    </body>
</html>`

加return:

`<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script language="javascript">
            function Login_Click()
            {
            if(document.form1.UsName.value=="")
            {
            alert('用户名为空');
            return;
            }
            if(document.form1.UsPwd.value=="")
            {
            alert('密码为空');
            return;
            }
            alert('登陆成功');
            }
        </script>
    </head>
    <body>
        <form name="form1">
            <input type="text" name="UsName" >用户名
            <input type="password" name="UsPwd">密码
            <input type="button" name="Login" onClick="Login_Click();" >登陆
        </form>
    </body>
</html>`

不加return的现象是先提示用户名没输入,然后提示密码没输入;加了return之后遇到一个没输入之后就不再继续检测

总的来说在js中对于return用法的三种情况的总结如下:
retrun true; 返回正确的处理结果。
return false;返回错误的处理结果;终止处理;阻止提交表单;阻止执行默认的行为。

表单中

`document.getElementById("submit").onclick=function(){
    var result = validate();
    if(result){
        alert("輸入有誤!");
        return false;//终止处理;阻止提交表单
    }else{
        return true;//返回正确的处理结果,提交表单
        document.getElementById("login_form").submit();
    }
}`
posted @ 2021-09-05 02:10  Caesar_Y  阅读(8965)  评论(0编辑  收藏  举报