js中return、return false、return true的用法及区别

return 语句会终止函数的执行并返回函数的值。

语法：return 表达式
如果忽略，即 return; 则返回 undefined

下面的 return 语句都会终止函数的执行：

return;
return true;
return false;
return x;
return x + y / 3;

在这里插入图片描述
官方定义return后可跟value，也就是说可跟js中的任何数据类型，比如数字，字符串，对象等，当然也可再返回一个函数。

先看下面的例子：

<!DOCTYPE html>
<html>
<head>
    <title>return测试</title>
</head>
<body>
<a href="#"></a>
<a onclick="fun1()">111</a>
<a onclick="fun2()">222</a>
<a onclick="fun3()">333</a>
<a onclick="fun4()">444</a>

<script type="text/javascript">
    function fun1() {
    
    
        return ;
        console.log('111 这个不会执行')
    }
    function fun2() {
    
    
        return false
        console.log('222 这个不会执行')
    }
    function fun3() {
    
    
        return true
        console.log('333 这个不会执行')
    }
    function fun4() {
    
    
        console.log('444 这个会执行')
    }
</script>
</body>
</html>

通过上面的例子可以看出 return ; return false return true 在函数内部都中断了函数的执行

接着看看他们返回的结果，打印看看代码如下：

<script type="text/javascript">
    function fun1() {
    
    
        return;
    }
    function fun2() {
    
    
        return false
    }
    function fun3() {
    
    
        return true
    }
    console.log(fun1())
    // undefined
    console.log(fun2())
    // false
    console.log(fun3())
    // true
</script>

返回的结果分别是 undefined false true 注：（undefined != false）
在这里插入图片描述

return

关于return,要注意的是在函数里return后面的内容是不再执行的。

function a(){
    
    
  return 10;
  document.write(50);//不执行
}
a();//10

上面的例子中,"return 10;"这个时候函数a的值会等于10,并且函数下面的内容不再执行,因为下面运行函数a时输入10.

另外校验时比较常用

扫描二维码关注公众号，回复： 12382620 查看本文章

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>return校验时比较常用</title>
</head>
<body>
  <form name="form1">
    <input type="text" name="UsName" >用户名
    <input type="password" name="UsPwd">密码
    <input type="button" name="Login" onClick="Login_Click();" >登陆
  </form>
  <script language="javascript">
    function Login_Click(){
     
     
      if(document.form1.UsName.value==""){
     
     
        alert('用户名为空');
        return;
      }
      if(document.form1.UsPwd.value==""){
     
       
        alert('密码为空');
        return;
      }
     alert('登陆成功');
    }
  </script>
</body>
</html>

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

return false

一般来讲，为事件处理函数返回return false; 作用在于阻止默认事件行为和取消默认动作。

阻止表单提交的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>return测试</title>
</head>
<body>
    <form method="post" onsubmit="return submitFunction()">
        <input type="text" name="nameId">
        <button type="submit" id="submit">提交</button> 
    </form>
<script type="text/javascript">
    function submitFunction () {
    
    
        return false;
    }
</script>
</body>
</html>

效果如下：右边没有出现请求，请求被阻止了
在这里插入图片描述
return false; 就相当于一个终止符，而return true; 相当于一个执行符。

在js中，会常用return false; 来阻止表单提交或者继续执行下面代码，也就是阻止执行的默认行为。

再比如：

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

虽然sum函数返回false阻止提交，但不会影响num函数的执行，a函数中返回false对test（）函数而言只是相当于一个返回值，并不会影响test（）函数的执行，可见，
return false; 只对当前函数有效，并不会影响其他函数执行。

总结：
1. retrun true；返回正确的处理结果。
2. return false；返回错误的处理结果以及阻止代码继续向下执行。
3. return；把控制权返回给页面。
4. return ; return false; return true 都会在函数内部阻止程序的执行。
5. 只有 return false 会阻止表单的提交。