let 与 var 的区别

  1. 变量声明提升

     a) var 关键字声明的变量会被提升到当前作用域的顶部  注意:(只提升声明,不会提升赋值)

     b) let 关键字没有变量提升的概念

代码演示:

    // 声明提升前
    console.log(x); //输出 undefined
    var x = 1
    console.log(x); //输出 1

    // 声明提升后
    var x
    console.log(x); //输出 undefined
    var x = 1
    console.log(x); //输出 1


    console.log(x); //报错: let 关键字声明的变量,只能先定义后使用
    let x = 1  //报错后的代码不再执行
    console.log(x);

2. 作用域

    a) var 关键字声明的变量不会产生块级作用

    b) let 关键字声明的变量会产生块级作用

代码演示:

  if (true) {
      var xm = '小明'
      console.log(zs); //输出 小明
    }
    console.log(xm);  //输出 小明


  if (true) {
      let xm = '小明'
      console.log(xm); //输出 小明
    }
    console.log(xm);  //报错: xm没有被定义

 3. 重复赋值

    a) var 关键字声明的变量可以重新赋值  

    b) let 关键字声明的变量不可以重新赋值  

代码演示:

    var num = 1
    var num = 2
    console.log(num); //输入 2  (不建议使用)

    let num = 1
    let num = 2  //报错: 已经被赋值的变量不可以重新赋值
    console.log(num);

 4. 全局对象的属性

    a) var 关键字在全局声明的变量会被作为属性添加到 window 对象中

    b) let  关键字在全局声明的变量不会作为属性添加到 window 对象中

代码演示:

    var one = 1
    console.log(window.one); //输出 1

    let two = 2
    console.log(window.two); //输出 undefined

5. for循环中的var

    for (var i = 0; i < 3; i++) {
      console.log(i);  //先输出 0 1 2
       setTimeout(() => {
        console.log(i); //一秒后输出 3 3 3
      }, 1000)
    }


    // 原因分析：var 关键字不会形成块级作用域，所以当for循环完成，一秒后定时器打印 i 时 此时的 i                 
    //在全局作用域,并且已经是 3 所以打印的结果是 3 3 3 

    // 代码演示
    var i
    for (i = 0; i < 3; i++) {
      console.log(i);  //先输出 0 1 2
      setTimeout(() => {
        console.log(i); //一秒后输出 3 3 3
      }, 1000)
    }

6. for循环中的let

    for (let i = 0; i < 3; i++) {
      console.log(i);  //先输出 0 1 2
      setTimeout(() => {
        console.log(i); //一秒后输出 0 1 2
      }, 1000)
    }
    // 原因分析：因为 let 会形成块级作用域 每一次循环都是一个新的块级作用域包含了新的变量值

    // 代码演示
    {
      // 第一次循环
      let i = 0
      console.log(i);  //先输出 0 
      setTimeout(() => {
        console.log(i); //一秒后输出 0 
      }, 1000)
    }
    {
      // 第二次循环
      let i = 1
      console.log(i);  //先输出 1
      setTimeout(() => {
        console.log(i); //一秒后输出 1
      }, 1000)
    }
    {
      // 第三次循环
      let i = 2
      console.log(i);  //先输出 2
      setTimeout(() => {
        console.log(i); //一秒后输出 2
      }, 1000)
    }

以上分析内容仅代表作者个人观点,仅供参考.

好了我的朋友下次再见!如果还有下次的话~