The return statement 会终止函数的执行merges 返回函数的值.
Syntax: return expression
If omitted, that is, return; then return undefined
The following return statements will terminate the execution of the function:
return;
return true;
return false;
return x;
return x + y / 3;
The official definition of return can be followed by value, which means that it can be followed by any data type in js, such as numbers, strings, objects, etc., of course, it can also return a function.
First look at the following example:
<!DOCTYPE html>
<html>
<head>
<title>return测试</title>
</head>
<body>
<a href="#"></a>
<a onclick="fun1()">111</a>
<a onclick="fun2()">222</a>
<a onclick="fun3()">333</a>
<a onclick="fun4()">444</a>
<script type="text/javascript">
function fun1() {
return ;
console.log('111 这个不会执行')
}
function fun2() {
return false
console.log('222 这个不会执行')
}
function fun3() {
return true
console.log('333 这个不会执行')
}
function fun4() {
console.log('444 这个会执行')
}
</script>
</body>
</html>
Through the above example, we can see that return; return false return true interrupts the execution of the function inside the function
Then take a look at the results they return, print and see the code as follows:
<script type="text/javascript">
function fun1() {
return;
}
function fun2() {
return false
}
function fun3() {
return true
}
console.log(fun1())
// undefined
console.log(fun2())
// false
console.log(fun3())
// true
</script>
The returned results are undefined false true Note: (undefined != false)
return
Regarding return, it should be noted that the content after return in the function is no longer executed.
function a(){
return 10;
document.write(50);//不执行
}
a();//10
In the above example, "return 10;" at this time, the value of function a will be equal to 10, and the content below the function will no longer be executed, because 10 is entered when running function a below.
Also commonly used when checking
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>return校验时比较常用</title>
</head>
<body>
<form name="form1">
<input type="text" name="UsName" >用户名
<input type="password" name="UsPwd">密码
<input type="button" name="Login" onClick="Login_Click();" >登陆
</form>
<script language="javascript">
function Login_Click(){
if(document.form1.UsName.value==""){
alert('用户名为空');
return;
}
if(document.form1.UsPwd.value==""){
alert('密码为空');
return;
}
alert('登陆成功');
}
</script>
</body>
</html>
The phenomenon of not adding return is to prompt that the user name is not entered first, and then prompt that the password is not entered; after adding return, it will not continue to detect if one is not entered.
return false
Generally speaking, return false for the event handler; the function is to prevent the default event behavior and cancel the default action.
The code to prevent form submission is as follows:
<!DOCTYPE html>
<html>
<head>
<title>return测试</title>
</head>
<body>
<form method="post" onsubmit="return submitFunction()">
<input type="text" name="nameId">
<button type="submit" id="submit">提交</button>
</form>
<script type="text/javascript">
function submitFunction () {
return false;
}
</script>
</body>
</html>
The effect is as follows: there is no request on the right, and the request is blocked.
return false; is equivalent to a terminator, and return true; is equivalent to an executor.
In js, return false; is often used to prevent form submission or continue to execute the following code, which is the default behavior to prevent execution.
Another example:
function sum(){
if(true){
return false;
}
}
function test(){
sum();
num();
}
Although the sum function returns false to prevent submission, it will not affect the execution of the num function. The return of false in the a function is just equivalent to a return value for the test() function, and will not affect the execution of the test() function. As you can see,
return false; Only valid for the current function and will not affect the execution of other functions.
总结：
1. retrun true; returns the correct processing result.
2. return false; return the wrong processing result and prevent the code from continuing to execute downward.
3. return; return control to the page.
4. return; return false; return true will block the execution of the program inside the function.
5. Only return false will prevent the submission of the form.