JavaScript return 語句

admin發表於2018-10-05
JavaScript

首先強調一點，return語句只能在函式中應用。

函式作為一個獨立的功能單位，可以返回一個值或者改變程式碼的一些狀態。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let num;
let a=1,b=2;
function calculate(a,b){
  if(a>b){
    num=a-b;
  }else{
    num=b-a;
  }
}
calculate(a,b);
console.log(num);

上面程式碼函式中沒有return語句，那麼函式中的程式碼會一直執行到結尾。

return正如其名，可以返回一個值，並立即結束函式的執行。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(){
  return "青島市南區";
  console.log("螞蟻部落");
}
console.log(func())

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/05/234943tliwygarawrzrrgz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

函式呼叫後，執行return語句，返回字串"青島市南區"。

這時候注意了，執行完return語句之後，馬上結束整個函式的執行，所以"螞蟻部落"不會被列印。

return false的作用：

如果返回值為false，那麼可能在一些場景中具有特殊的作用。首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(){
  return false;
}
console.log(func())

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/05/235013mhd9ey3eto883eef.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面函式的作用就是僅僅返回一個false，再去其他意義。

如果返回false，在某一些特殊場景下會具有特殊意義，看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
a{
    text-decoration:none;
    color:blue;
} 
</style> 
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  odiv.onclick=function(){ 
    return false;
  } 
} 
</script> 
</head> 
<body> 
<a href="http://www.softwhy.com" id="ant">螞蟻部落</a>
</body> 
</html>

如果沒有前面的JavaScript程式碼，點選上面的超連結，很自然的會跳轉到螞蟻部落首頁。

然而現在點選連結後並沒有任何跳轉動作，這是因為return false能夠取消動作的預設行為。什麼是預設動作呢，在實際生活中，手裡哪一個鐵球，鬆開手之後，鐵球會下落，下落就是手鬆開後的預設動作。在前端中，點選（click）超連結會跳轉到指定頁面，那麼這個跳轉就是預設動作，再比如，點選submit提交按鈕，會有表單提交動作。再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload=function(){
  let obt=document.getElementById("bt");
  let webName=document.getElementById("webName");
  obt.onclick=function(){
    if(webName.value=="") { 
       alert("不能為空!"); 
       webName.focus();
       return false; 
     } 
  }
}
</script>
</head>
<body>
<form action="http://www.softwhy.com" name="myform">
  <input type="text" value="" id="webName"/>
  <input type="submit" value="提交表單" id="bt"/>
</form>
</body>
</html>

點選提交按鈕之後，會判斷文字框是否為空，如果為空，則彈出提示。

並將使文字框獲取焦點，最後執行到return false，它不僅能跳出整個事件處理函式，而且還能阻止表單提交動作，大家可以將return false去掉測試一下效果，即便彈出報警提示，但是依然會有表單提交動作。

相關文章