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();
    }
}`


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM