zoukankan      html  css  js  c++  java
  • js中的let和var

    在ES6中,应该尽量使用const和let来声明变量,而尽量避免使用var。

    var的缺点是它的作用域比较混乱,使用let能够保证清晰的作用域。
    下面看一个小例子。

    var x = 3;
    if(x==3) {
        var x = 7;
    }
    console.log(x)//输出x=7
    
    let y=4
    if(y==4){
        // var y=5//报错:y已经定义过
    }
    console.log(y)//输出4
    

    给你出道题:编写一个html页面,一打开页面,就alert三次,每次alert的文本显示当前是第几次alert

    <html>
    <script>
        for (var i = 0; i < 3; i++) {
            setTimeout(function () {
                alert("这是第" + i + "次")
            }, 1000 * i)
        }
    </script>
    </html>
    

    写完运行,发现每次显示都是第3次。这是因为循环已经运行完了,i=3,然后才开始alert。

    那么问题来了,如何把i的状态保存下来?

    <html>
    <script>
        for (var i = 0; i < 3; i++) {
            setTimeout(function () {
                var j=i//使用var是没有用处的,使用let就对了
                alert("这是第" + j + "次")
            }, 1000 * i)
        }
    </script>
    </html>
    

    使用var j=i把i的状态保存下来,会发现并无卵用。因为3次循环var j是一个变量,而不是三份!我们想要实现的是保留三份j,这时使用let就可以实现了。

    那么问题来了,let是ES6才有的,没有let之前人们是如何操作的呢?

    <html>
    <script>
        for (var i = 0; i < 3; i++) {
            (function (val) {
                setTimeout(function () {
                    alert("这是第" + val + "次")
                }, 1000 * i)
            })(i)
        }
    </script>
    </html>
    

    由上面的小例子可以看出,let有严格的作用域而var没有。
    正是因为let有严格的作用域,所以let会进行许多运行时检查,比如禁止重复定义。

    let还有一种作用域的用法。

    var x = 5;
    var y = 0;
    
    let (x = x+10, y = 12) {
      console.log(x+y); // 27
    }
    
    console.log(x + y); // 5
    

    参考资料

    阮一峰-Javascript 严格模式详解
    海洋天堂-js中let和var

  • 相关阅读:
    PyCharm 2020 激活到 2100 年
    PyTorch-22 学习 PyTorch 的 Examples
    机器视觉的主要研究内容和细分方向(超全超赞)
    CVPR 2020 全部论文 分类汇总和打包下载
    2020年,加油鸭
    SpiningUP 强化学习 中文文档
    大学C语言基础——30天挑战PAT甲级(一)
    明天提交辞职报告
    要开始新的技术之旅了
    记忆是件奇怪的东西
  • 原文地址:https://www.cnblogs.com/weiyinfu/p/7636580.html
Copyright © 2011-2022 走看看