詳解JavaScript中return的用法

更新時間：2017年05月08日 09:13:43 作者：lms_碼農

這篇文章主要介紹了JavaScript中return的用法,包括return定義，寫法等方面的知識，需要的朋友可以參考下

最近，跟身邊學前端的朋友了解，有很多人對函數(shù)中的return的用法和意思理解的比較模糊，這里寫一篇文章跟大家一起探討一下return的用法。

　　　　 1定義 　　

　　　　return，從字面意思來看就是返回，官方定義return語句將終止當前函數(shù)并返回當前函數(shù)的值；可以看下下面的示例代碼：

<!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>

可以看到我在函數(shù)里面寫了一個死循環(huán)，然后在下面調用，在沒有寫return語句時瀏覽器會一直執(zhí)行循環(huán)內的語句，直接卡死；

　　　　而寫了return語句后，直接中斷了函數(shù)，并且給函數(shù)返回了一個數(shù)值1，意思就是當函數(shù)執(zhí)行后，函數(shù)體將被賦值為函數(shù)的返回值，這里會被返回1；

　　　　 2寫法

　　　　官方定義return后面可以跟一個value，也就是說可以跟javascript中的任何數(shù)據(jù)類型，數(shù)字，字符串，對象等，當然也可是再返回一個函數(shù),舉個栗子: 　　　　

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  function func1(){
   return function (){
    alert(1);
   }
  };
  alert(func1()); //!func1()(); 這個注釋是通過自執(zhí)行函數(shù)調用返回的函數(shù)
</script> 14 </head> 15 <body> 16 17 </body> 18 </html>

示例圖片：

　　　　當然是函數(shù)就可以調用，我們可以寫成！func1()();這里很好理解，func1();我們打印出來看了就是return后面跟的匿名函數(shù)，那么我們就可以通過自執(zhí)行函數(shù)的形式來調用，這里通過！函數(shù)體();的形式來調用?？梢詫⒆⑨尷锏拇a拿出來試驗一下：

　　　　 3練習 　　

　　　　 (1)練習1

　　　　那么既然可以返回一個函數(shù)，我們就將下面的代碼改寫為一個回調函數(shù)的形式：

　　　　原代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
 if(prompt('輸入數(shù)字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('輸入數(shù)字1')==1){
    return function (){
     alert('輸對了');
    }
   }else{
     return function (){
     alert('輸錯了');
    }
   }
  }
  !func1()();
 </script>
</head>
<body>
</body>
</html>

改寫前是通過if語句來判斷執(zhí)行哪個函數(shù)；改寫后是通過if語句判斷返回哪個函數(shù)，然后在下面調用；并沒有什么意義只是幫助我們理解一下return；

　　　　 (2)練習2

　　　　通過return語句來實現(xiàn)一個循環(huán)。

　　　　思路：既然return語句可以返回一個函數(shù)，那么就是說可以返回它自己本身，在后面調用時就能實現(xiàn)一個循環(huán)的功能；

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  var i=1;  //定義循環(huán)變量
  function func1(){
   i++;  //改變循環(huán)變量
   if(i<5){　　　　　　　　//小括號為循環(huán)條件
    document.write(i+'<br>');  //這里是循環(huán)體
    return func1();
   }     
  }
  !func1()();    //調用函數(shù)
 </script>
</head>
<body>
</body>
</html>

各部分在循環(huán)里所起的作用已經(jīng)在代碼內的注釋寫出，博友們可以自己去試驗一下，下面為執(zhí)行效果圖：

　　　 4定義javascript自帶方法中的回調函數(shù)　　

　　　　前面我們已經(jīng)對return的用法做了很詳細的研究，下面我們對javascript自帶方法中的回調函數(shù)做一下研究，這里以數(shù)組中的sort();排序方法為例：

　　　　我們都知道sort();中可以寫一個回調函數(shù)來給數(shù)組指定排序的規(guī)則；示例代碼：

<!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>

執(zhí)行效果圖：

　　　　那么為什么會這樣呢，跟return又有什么關系呢，相信有很多博友都很困擾，下面我們來做個實驗，將return后面的a-b換成-1；改動較小，就不再上傳代碼，朋友們可自己手動修改；

　　　　執(zhí)行效果圖：

　　　　可以看到，當返回一個負數(shù)-1時，沒有發(fā)生變化；下面我們將return后面的a-b換成0；

　　　　執(zhí)行效果圖：

　　　　可以看到，當返回0時，沒有發(fā)生變化；下面我們將return后面的a-b換成一個正數(shù)1；

　　　　執(zhí)行效果圖：

　　　　可以看到，當返回1時，數(shù)組順序被反轉了；

　　　　那么，我們可以得出以下結論：

　　　　　　當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>

執(zhí)行效果圖：