快捷導(dǎo)航

詳解JavaScript中return的用法

更新時(shí)間：2017年05月08日 09:13:43 作者：lms_碼農(nóng)

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

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

　　　　 1定義 　　

　　　　return，從字面意思來(lái)看就是返回，官方定義return語(yǔ)句將終止當(dāng)前函數(shù)并返回當(dāng)前函數(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ù)里面寫了一個(gè)死循環(huán)，然后在下面調(diào)用，在沒有寫return語(yǔ)句時(shí)瀏覽器會(huì)一直執(zhí)行循環(huán)內(nèi)的語(yǔ)句，直接卡死；

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

　　　　 2寫法

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

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

示例圖片：

　　　　當(dāng)然是函數(shù)就可以調(diào)用，我們可以寫成！func1()();這里很好理解，func1();我們打印出來(lái)看了就是return后面跟的匿名函數(shù)，那么我們就可以通過(guò)自執(zhí)行函數(shù)的形式來(lái)調(diào)用，這里通過(guò)！函數(shù)體();的形式來(lái)調(diào)用。可以將注釋里的代碼拿出來(lái)試驗(yàn)一下：

　　　　 3練習(xí) 　　

　　　　 (1)練習(xí)1

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

　　　　原代碼：

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

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

　　　　 (2)練習(xí)2

　　　　通過(guò)return語(yǔ)句來(lái)實(shí)現(xiàn)一個(gè)循環(huán)。

　　　　思路：既然return語(yǔ)句可以返回一個(gè)函數(shù)，那么就是說(shuō)可以返回它自己本身，在后面調(diào)用時(shí)就能實(shí)現(xiàn)一個(gè)循環(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){　　　　　　　　//小括號(hào)為循環(huán)條件
    document.write(i+'<br>');  //這里是循環(huán)體
    return func1();
   }     
  }
  !func1()();    //調(diào)用函數(shù)
 </script>
</head>
<body>
</body>
</html>

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

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

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

　　　　我們都知道sort();中可以寫一個(gè)回調(diào)函數(shù)來(lái)給數(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í)行效果圖：

　　　　那么為什么會(huì)這樣呢，跟return又有什么關(guān)系呢，相信有很多博友都很困擾，下面我們來(lái)做個(gè)實(shí)驗(yàn)，將return后面的a-b換成-1；改動(dòng)較小，就不再上傳代碼，朋友們可自己手動(dòng)修改；

　　　　執(zhí)行效果圖：

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

　　　　執(zhí)行效果圖：

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

　　　　執(zhí)行效果圖：

　　　　可以看到，當(dāng)返回1時(shí)，數(shù)組順序被反轉(zhuǎn)了；

　　　　那么，我們可以得出以下結(jié)論：

　　　　　　當(dāng)a-b<=0時(shí)，a在前，b在后；

　　　　　　當(dāng)a-b>0是，a在后，b在前；

　　　　到這里，肯定有博友對(duì)a和b到底是啥有了疑問(wèn)，我們可以通過(guò)下面的代碼打印出來(lái)：

<!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í)行效果圖：