首頁 > web前端 > js教程 > 主體

對js中return用法的詳細介紹

零下一度
發布: 2017-05-09 10:07:53
原創
2609 人瀏覽過

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

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

 1定義 

return,從字面意思來看就是返回,官方定義return語句將終止當前函數並返回當前函數的值;可以看下下面的範例程式碼:

<!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>
登入後複製

可以看到我在函數裡面寫了一個死循環,然後在下面調用,在沒有寫return語句時瀏覽器會一直執行循環內的語句,直接卡死;

    而寫了return語句後,直接中斷了函數,並且給函數返回了一個數值1,意思就是當函數執行後,函數體將被賦值為函數的回傳值,這裡會被回傳1;

    

2寫法

2寫法

官方定義return後面可以跟一個value,也就是說可以跟javascript中的任何

資料型別

,數字,

字串
物件

等,當然也可是再回傳一個函數,舉個栗子:       

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  function func1(){
   return function (){
    alert(1);
   }
  };
  alert(func1()); //!func1()(); 这个注释是通过自执行函数调用返回的函数
</script> 14 </head> 15 <body> 16 17 </body> 18 </html>
登入後複製
範例圖片:

# 當然是函數就可以調用,我們可以寫成! func1()();這裡很好理解,func1();我們打印出來看了就是return後面跟的匿名函數,那麼我們就可以通過自執行函數的形式來調用,這裡通過!函數體();的形式來呼叫。可以將註解裡的程式碼拿出來試驗一下:


 3練習   

(1)練習1

那麼既然可以傳回一個函數,我們就將下面的程式碼改寫為一個

回呼函數

的形式:

 原程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
 if(prompt(&#39;输入数字1&#39;)==1){
  !function (){
  alert(&#39;输对了&#39;);
  }()
 }else{
  !function (){
   alert(&#39;输错了&#39;);
  }()
 }
 </script>
</head>
<body>
</body>
</html>
登入後複製

改寫後:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  function func1(){
   if(prompt(&#39;输入数字1&#39;)==1){
    return function (){
     alert(&#39;输对了&#39;);
    }
   }else{
     return function (){
     alert(&#39;输错了&#39;);
    }
   }
  }
  !func1()();
 </script>
</head>
<body>
</body>
</html>
登入後複製

改寫前是透過if語句來判斷執行哪個函數;改寫後是透過if語句判斷傳回哪個函數,然後在下面呼叫;並沒有什麼意義只是幫助我們理解一下return;

 (2)

練習2

  透過return語句來實作一個迴圈。

  思路:既然return語句可以返回一個函數,那麼就是說可以返回它自己本身,在後面調用時就能實現一個循環的功能;

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
  var i=1;  //定义循环变量
  function func1(){
   i++;  //改变循环变量
   if(i<5){        //小括号为循环条件
    document.write(i+&#39;<br>&#39;);  //这里是循环体
    return func1();
   }     
  }
  !func1()();    //调用函数
 </script>
</head>
<body>
</body>
</html>
登入後複製
各部分在循環裡所扮演的角色已經在程式碼內的註解寫出,博友們可以自己去試驗一下,下面為執行效果圖:

 4定義javascript自帶方法中的回呼函數 

    前面我們已經對return的用法做了很詳細的研究,下面我們對javascript自帶方法中的回調函數做一下研究,這裡以

陣列

中的

sort();排序方法為例:

    我們都知道sort();中可以寫一個回呼函數來給陣列指定排序的規則;範例程式碼:

執行效果圖:

    那麼為什麼會這樣呢,跟return又有什麼關係呢,相信有很多博友都很困擾,下面我們來做個實驗,將return後面的a-b換成-1;改動較小,就不再

上傳###程式碼,朋友們可自行手動修改;######    執行效果圖:############

    可以看到,当返回一个负数-1时,没有发生变化;下面我们将return后面的a-b换成0;

    执行效果图:

    可以看到,当返回0时,没有发生变化;下面我们将return后面的a-b换成一个正数1;

    执行效果图:

    可以看到,当返回1时,数组顺序被反转了;

    那么,我们可以得出以下结论:

      当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(&#39;a是:&#39;+a+&#39;\t b是:&#39;+b+&#39;<br>&#39;);
   return a-b;
  });
  console.log(a);
 </script>
</head>
<body>
</body>
</html>
登入後複製

执行效果图:

return a-b;升序排列我们已经详细的去分析了,那么降序return b-a;就很简单了,说白了就是return -(a-b);也就是在a-b的基础上作了反转变成降序。

到这里我们可以得出一个总体的结论,return回去的值为一个数值,sort();方法会根据数值的正负对数组的各个部分进行排序。

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱(3)-JavaScript视频教程

以上是對js中return用法的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板