zoukankan      html  css  js  c++  java
  • ES6中的let

    一、没有声明提升

    var有声明提升。

    用let来声明变量时,不会将声明提升到最顶部。

    console.log(val); // 0
    var val = 0;
    
    console.log(a); // Cannot access 'a' before initialization
    let a = 1;
    

    因此,当我们使用let来声明变量时,一定要先声明再使用
    注意: let声明的变量不会被挂载到window对象上。

    let a = 1;
    console.log(a); // 1
    console.log(window.a); // undefined
    

    二、块级作用域

    var不存在块级作用域,只有全局作用域和函数作用域。

    ES6中存在块级作用域,let仅在代码块内有效。(用大括号括起来的区域就是代码块,引擎会自动识别它。)

    {
        var val = 0;
        let a = 1;
        console.log(a); // 1 (在内部可以被访问到)
    }
    console.log(val); // 0
    console.log(a); // ReferenceError: a is not defined (到了外部就不存在了)
    

    这和立即执行函数有异曲同工之妙,达到了保护私有变量,防止污染全局的作用。

    (function() {
        var a = 1;
        console.log(a); // 1
    })();
    console.log(a); // ReferenceError: a is not defined
    

    三、暂时性死区(temporal dead zone)

    在使用let的代码块中的变量会绑定在当前的块级作用域中,不受外部作用域干扰。

    let a = 0;
    {
        console.log(a);
        let a = 10;
    }
    


    在变量用let声明之前都是不可以用的。(let没有声明提升)
    这种语法就叫做暂时性死区。
    简而言之,块级作用域内用let声明的变量不可以在声明之前使用。

    四、不允许重复声明变量

    var可以声明多次。

    在同一作用域中,let只能声明一次

    let a = 1;
    let a = 5;
    console.log(a); // SyntaxError: Identifier 'a' has already been declared
    

    五、for循环计数器

    一个问题

    for(var i = 0; i < 10; i++) {
        setTimeout(function() {
            console.log(i);
        }, 1000);
    }
    

    运行一下结果是10个10。为什么呢?
    第一,var声明的i可以在全局访问到,因此可能会出现覆盖现象。
    第二,for循环内的计数器是异步执行的。
    综合以上两点,1秒后执行10个setTimeout函数,因为i是定义在全局作用域上的,因此,变量i早就被覆盖成了10。
    于是打印出10个10。

    解决方案一:立即执行函数

    解决问题之前,我们分析到问题的关键是i作为全局变量被污染(覆盖),这才导致了结果出现误差。
    那么解决这种问题,我们首先想到的就是立即执行函数(IIFE)。

    立即执行函数也叫自执行函数,它的作用就是封装私有变量,防止全局变量受污染。

    for(var i = 0; i < 10; i++) {
        (function(j){
            setTimeout(function() {
                console.log(j);
            }, 1000);
        })(i);
    }
    

    解决方案二:let

    因为let只在代码块内有效,因此使用let就避免了变量污染的问题。

    for(let i = 0; i < 10; i++) {
        setTimeout(function() {
            console.log(i);
        }, 1000);
    }
    

  • 相关阅读:
    CentOS6.5升级内核到3.10.28的记录
    redis集群搭建,手把手教学
    zookeeper集群搭建,这一篇就够了
    Caused by: java.sql.SQLException: Column 'show_type' not found
    zkEnv.sh: Syntax error: "(" unexpected (expecting "fi")记录一下解决方法。。。
    http分层
    浏览器
    less
    333
    CSS 解决方案
  • 原文地址:https://www.cnblogs.com/buildnewhomeland/p/12828074.html
Copyright © 2011-2022 走看看