百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> JavaScript中的var和let的不同(代码示例)
分享文章到:

JavaScript中的var和let的不同(代码示例)

发布时间:09/01 来源:未知 浏览: 关键词:
var和let都用于javascript中的函数声明,它们之间的不同是,var是函数作用域,let是块作用域。

可以说,与let比拟,用var声明的变量在整个程序中都是定义的。

举个例子会更分明地说明这种不同,如下:

var的例子:

输入:
console.log(x);
var x=5;
console.log(x);
输出:
undefined
5

35ea50c8672d52b2512a5c8b7df8198.png

let的例子:

输入:
console.log(x);
let x=5;
console.log(x);
输出:
Error

eccb61b4ec37c362055db4f68547400.png

让我们看看JavaScript代码:

代码示例1:

<html> 
  
<body> 
    <script> 
        // 定义后调取x
        var x = 5; 
        document.write(x, "\n"); 
  
        // 定义后调取y 
        let y = 10; 
        document.write(y, "\n"); 
  
        // 在定义此前调取var z将返回undefined
        document.write(z, "\n"); 
        var z = 2; 
  
        // 在定义前调取let a会发生错误
        document.write(a); 
        let a = 3; 
    </script> 
</body> 
  
</html>

输出:

802db4c083717ce042739d2190496c8.png

代码示例2:

鄙人面的代码中,单击start将调取一个函数,该函数每0.5秒更换两个标题的色彩。第一个标题的色彩储备在一个var中,第二个标题使用let声明。

然后在函数块之外拜访它们。Var将工作,但使用let声明的变量将显示一个错误,由于let是块作用域。

<!DOCTYPE html>
<html>
<head>
    <title>js教程</title>
    <meta charset="UTF-8">
</head>

<body>

<h1 id="var" style="color:black;">javascript教程</h1>
<h1 id="let" style="color:black;">javascript教程</h1>
<button id="btn" onclick="colour()">Start</button>

<script type="text/javascript">
    function colour() {

        setInterval(function() {

            if (document.getElementById('var').style.color == 'black')
                var col1 = 'blue';
            else
                col1 = 'black';

            // 通过var设定color 1的值

            if (document.getElementById('let').style.color == 'black') {
                let col2 = 'red';
            } else {
                col2 = 'black';
            }

            // 通过let设定color 2的值

            document.getElementById('var').style.color = col1;

            document.getElementById('let').style.color = col2;

            // 在html中改动h1的色彩
        }, 500);

    }
</script>
</body>

</html>

输出:

65d7fc544796f7100b2ece584fb1178.png

相关引荐:《javascript教程》

本篇文章就是关于JavaScript中的var和let之间的不同介绍,但愿对需要的伴侣有所帮忙!

以上就是JavaScript中的var和let的不同(代码示例)的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板