詳解JavaScript中return的用法

2019-11-19 16:38:36

字體：大中小

供稿：網(wǎng)友

最近，跟身邊學(xué)前端的朋友了解，有很多人對(duì)函數(shù)中的return的用法和意思理解的比較模糊，這里寫(xiě)一篇文章跟大家一起探討一下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ù)里面寫(xiě)了一個(gè)死循環(huán)，然后在下面調(diào)用，在沒(méi)有寫(xiě)return語(yǔ)句時(shí)瀏覽器會(huì)一直執(zhí)行循環(huán)內(nèi)的語(yǔ)句，直接卡死；

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

　　　　 2寫(xiě)法

　　　　官方定義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)用，我們可以寫(xiě)成！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ù)，我們就將下面的代碼改寫(xiě)為一個(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>

改寫(xiě)后：

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

改寫(xiě)前是通過(guò)if語(yǔ)句來(lái)判斷執(zhí)行哪個(gè)函數(shù)；改寫(xiě)后是通過(guò)if語(yǔ)句判斷返回哪個(gè)函數(shù)，然后在下面調(diào)用；并沒(méi)有什么意義只是幫助我們理解一下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)的注釋寫(xiě)出，博友們可以自己去試驗(yàn)一下，下面為執(zhí)行效果圖：

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

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

　　　　我們都知道sort();中可以寫(xiě)一個(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í)，沒(méi)有發(fā)生變化；下面我們將return后面的a-b換成0；

　　　　執(zhí)行效果圖：

　　　　可以看到，當(dāng)返回0時(shí)，沒(méi)有發(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í)行效果圖：