天天看點

js中return;、return true、return false;差別

return其實就是return undefined;

1.文法及傳回方式

①傳回控制與函數結果

        文法為:return 表達式;

        語句結果函數的執行,傳回調用函數,而且把表達式的值作為函數結果傳回出去

②傳回控制無函數結果

        文法為:return;

        在大多數情況下,為事件處理函數如果讓其傳回false,可以防止預設的事件行為.例如,預設情況下,點選一個<a>标簽元素,頁面會跳轉到該元素href屬性指定的頁. 而return false就相當于終止符,return true就相當于執行符. 在js中return false的作用一般是用來取消預設動作的.比如你單擊一個連結除了觸發你的"onclick"事件以外還要觸發一個預設事件就是執行頁面的跳轉.是以這時候如果你想取消對象的預設動作就可以return false來阻止它的動作.也就是說如果你想用js代碼來局部改變一些資料而不引起頁面其他部位的變化,那麼你就應該在onclick事件代碼的後面加上return false;

在js中,我們通常用return false來阻止送出表單或者繼續執行下面的代碼,通俗來說就是阻止執行預設的行為.

function s1(){

  if(true){

    return false;

  }

}

function s2(){

  m();

  n();

  p();

}

上面兩個例子,函數s1那樣寫沒有問題的,if函數體裡傳回出去false,終止函數.而在函數s2裡,如果我們在m函數裡傳回一個return false阻止送出,但是這并不影響函數n和函數p的執行.在s2函數裡調用函數m,那裡面的return false對于函數s2來說,隻是相當于傳回值,并不能阻止函數s2的執行.return false隻在目前函數有效,并不會影響其他外部函數的執行.

總結:

return true;傳回正常的處理結果.

return false;傳回錯誤的處理結果;終止處理;阻止送出表單;阻止執行預設的行為.

return;把控制權傳回給頁面.

2.通常函數經過一系列的處理後需要給外部傳回一個值,這個值一般用return傳回出去,也可以是說return是向函數傳回傳回值,并終止函數的運作.

關于return,要注意的是在函數裡return後面的内容是不再執行的.

function a(){

  return 10;

  document.write(50);//不執行

}

a();//10

上面的例子中,"return 10;"這個時候函數a的值會等于10,并且函數下面的内容不再執行,因為下面運作函數a時輸入10.

究竟需不需要return來傳回值,要看函數是來做什麼,如果需要讓它傳回一個值就寫return,如果不需要它傳回值,就沒必要寫它.

function a(b,c){

  return b+c;

}

var abc=a(5,8);

console.log(abc);//13

function a(b,c){

  document.write(b+c);

}

var abc=a(5,8);//此時頁面上會輸出13,但其實abc是沒有值的

console.log(abc);//undefined

當然,js中的return不一定非得用在函數function中,有時候也可以用來阻止某些動作,比如表單的送出,讓表單的送出事件傳回false,那表單就不會送出:onsubmit="return false";

3校驗時比較常用

<html>

<head>

<title>return驗證測試</title>

<script language="javascript">

function Login_Click(){

if(document.form1.UsName.value==""){

   alert('使用者名為空');

   return;

}

if(document.form1.UsPwd.value==""){  

  alert('密碼為空');

  return;

}

alert('登陸成功');

}

</script>

</head>

<body>

<form name="form1">

<input type="text" name="UsName" >使用者名

<input type="password" name="UsPwd">密碼

<input type="button" name="Login" onClick="Login_Click();" >登陸

</form>

</body>

</html>

繼續閱讀