您的位置:首页> 前端教程> JS教程
文章导航

JavaScript return 语句

2018-10-5 23:48| 作者: admin| 查看: 1621| 评论: 0|来自: 蚂蚁部落

首先强调一点,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去掉测试一下效果,即便弹出报警提示,但是依然会有表单提交动作。

1

鲜花

握手

雷人

路过
1

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部