一、函數返回值,並終止函數
語法: Return表達式;
在函數語句結束時執行,並返回表達式的值作為函數的結果.
比如:
function foo(obj){
let resultObj = obj;
//可對傳入參數進行處理
return resultObj;
}
在這個例子中: obj代表的是一個對象。所謂對象就是他可以包納萬物無論是Number bool還是String或這是其他實例都包含在里面。然而return就是需要將處理過后的結果返回出去。就相當於一個工廠,我提供原材料然而工廠輸出的將會是產品。這樣講還不明白我們可以簡單的這樣理解。
比如:用函數來做一個加法運算,需要他返回值。
function Add(a,b){
let result = a+b;
return result;
}
這個例子中,如果你在外部直接調用這個函數如:
let text= Add(1,2);
就會得到(a+b)的和,也就是說結果是3;
再看一個例子:
`
function compare(a,b){
//函數體,判斷兩個整數比較的三種情況
if(a>b){
return a;
}else if(a == b){
return "一樣大";
} else {
return b;
}
}
`
//簡單理解就是:JS的函數返回的對象,a,b是對象,“一樣大”是對象(字符串)
函數在一系列的代碼執行后會得到一個期望的返回值,而此值就是通過return語句返回,並且將控制權返回給主調函數。
語法格式:
return表達式
代碼示例如下:
function add(){
let a = 1;
let b = 2;
return a + b;
}
function func(){
console.log(add());
}
func();
以上代碼中,當調用func()函數的時候,控制權由func()函數掌握,當再調用add函數的時候,控制權交付給add函數,然后返回一個值並將控制權再交付給func()函數。
function a(){
return 10;
//這個時候,函數a 的值會等於10,並且函數中下面的內容不會再執行。
document.write(50);
//由於上面已經return了,這條代碼不會執行
}
至於什么時候會用到,那看你要函數來做什么,你要他返回值就返回,不要他返回就不返回。
比如,用函數來做一個加法運算,需要他返回值,那就這樣:
function a(b,c){
return b+c;
}
那么調用:
let abc = a(5,80);
這個時候,abc 這個變量的值會是85.
如果想直接輸出結果,不要返回值那就
function a(b,c){
document.write(b+c);
}
let abc = a(5,80);
那么頁面會輸出85,但abc是沒有值的。
默認函數是沒有返回值的。
通常函數經過一系列處理后需要給外部返回一個值或者對象。
比如function sum(a,b){return a+b};
alert (sum(1,2)) //3 如果沒有return將會彈出undefind。
二、返回控制
語法:return;
一般來講,為事件處理函數返回return:false。作用在於阻止默認事件行為和取消默認動作,比如,在默認情況下點擊一個元素,那么頁面就會跳轉到語速href屬性指定的頁面,那當你用return false時,就相當於一個終止符,而return true;就相當於一個執行符。
比如:
`
<a href="eoh.html" onclick= "return add_onclick()">open</a>
//return false/true
<script>
function add_onclick(){
return false; //false組織跳轉
}
</script>
在js中,會常用return false;來阻止表單提交或者執行下面代碼,也就阻止執行的默認行為。 比如:
function sum(){
if(true){
return false;
}
}
function test(){
sum();
num();
}
`
雖然sum函數返回false阻止提交,但不會影響num函數的執行,a函數中返回false對test()函數而言只是相當於一個返回值,並不會影響test()函數的執行,簡而言之,return:false;只對當前函數有效,並不會影響其他函數執行。
return是JavaScript里函數返回值的關鍵字,一個函數內處理的結果可以使用return返回,這樣再調用函數的地方就可以用變量接收返回的結果。return關鍵字內任何類型的變量數據或表達式都可以進行返回,甚至什么都不返回也可以。 比如:
`function NullReturn(IsNull){
if(IsNull==true){
return;
}
}`
這樣寫也是可以的,這里的意思是返回空(null),所以有的時候return 的作用就是用來終止函數執行。比如:
不加return
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script language="javascript">
function Login_Click()
{
if(document.form1.UsName.value=="")
{
alert('用戶名為空');
}
if(document.form1.UsPwd.value=="")
{
alert('密碼為空');
}
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>`
加return:
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></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>`
不加return的現象是先提示用戶名沒輸入,然后提示密碼沒輸入;加了return之后遇到一個沒輸入之后就不再繼續檢測
總的來說在js中對於return用法的三種情況的總結如下:
retrun true; 返回正確的處理結果。
return false;返回錯誤的處理結果;終止處理;阻止提交表單;阻止執行默認的行為。
表單中
`document.getElementById("submit").onclick=function(){
var result = validate();
if(result){
alert("輸入有誤!");
return false;//終止處理;阻止提交表單
}else{
return true;//返回正確的處理結果,提交表單
document.getElementById("login_form").submit();
}
}`