需求

要求用户输入密码, 判断输入的密码是否正确 (假设正确密码是 ​​123456​​​) 如果正确, 输出 ​​"欢迎回来"​​，如果不正确, 要求用户重新输入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let pwd = -1;
        do {
            pwd = prompt("请输入密码");
        } while (pwd !== "123456");
        
        alert("欢迎回来");
    </script>
</head>
<body>
</body>
</html>

什么是递归函数

递归函数就是在函数中自己调用自己, 我们就称之为递归函数，递归函数在一定程度上可以实现循环的功能，????递归函数的注意点：每次调用递归函数都会开辟一块新的存储空间, 所以性能不是很好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function login() {
            // 1.接收用户输入的密码
            let pwd = prompt("请输入密码");

            // 2.判断密码是否正确
            if (pwd !== "123456") {
                login();
            }

            // 3.输出欢迎回来
            alert("欢迎回来");
        }

        login();
    </script>
</head>
<body>
</body>
</html>

通过如上代码的执行结果发现弹出了三次 ​​欢迎回来​​​ 那么这是为什么呢，因为每调用一次函数都会开辟一块新的存储空间，直到 ​​pwd === 123456​​ 为止，那么肯定会在某一次调用 login 的时候当中输入的是 === 123456 这个时候条件满足，就会直接执行 alter。那么当前的函数就已经执行完毕了，就会继续往下执行，会返回去执行之前函数调用处以下的代码，也就是返回到之前的调用处继续往下执行，分别如下图所示，红色代表调用，蓝色代表调用结束后的执行路线。

JavaScript-递归函数_html