从3个for循环代码来理解javascript变量声明

发布时间:2022-08-18 18:52

前情提要
在逛技术社区的过程中遇到这么一个问题:第一个for循环为什么只输出一次呢?看了题主贴的代码后,觉得比较简单所以就回答了一下。回答完之后就萌生了水一篇文章的想法。
注:内容比较简单,如果喜欢点个赞,不喜勿喷。欢迎在评论区内交流。如果本人观点有错误的地方,恳请大佬多多指点,感谢。

3个考验js基本功的for循环

先来看第一个for循环:

for (var i =0; i < 3; i++) {
  var i = 3;
  console.log(i)
}

思考一下,这段代码中,会打印几次?打印的内容分别是多少?

答案是只打印一次,打印的内容是 3。那么为什么会这样呢?其实是js的变量提升机制导致的。至于代码的详细执行步骤,后续给出。这里先不急,再来看第二个for循环。

for (var i =0; i < 3; i++) {
  const i = 3;
  console.log(i)
}

思考一下,这段代码中,会打印几次?打印的内容分别是多少? 答案是打印3次,打印内容都是3。那么,这又是为什么呢?只是换了一个关键字来声明变量。竟有如此之区别?其实const声明的变量在代码块中有作用域,并且不存在变量提升机制。如果在const声明之前去使用该变量会导致js报错(阮一峰es6中讲的暂时性死区)。

来看正常的for循环代码

let i =0;
for (; i < 3; i++) {
  console.log(i)
}

这段代码能打印几次?打印的内容分别是?我相信在座的各位大佬应该都能给出。大佬666呀,在此膜拜。

简单讲讲js中var、let、const三个关键字的区别

先谈谈在es6中新增的letconst这两个关键字。var算是js历史遗留的产品。都2202年了,不会还有人在用var吧?不会吧?不会吧?

let 关键字的特性

let的使用和var是差不多,和var的区别是。

  • let只会在它所声明的块中生效。请看代码:

    {
      let a = 10;
      var b = 1;
    }
    a // 代码块外访问a 会报错 ReferenceError: a is not defined.
    b // 代码块外访问b,可以拿到数据 1
  • let不存在变量提升。请看代码:

    // var 的情况
    console.log(foo); // 输出undefined
    var foo = 2;
    
    // let 的情况
    console.log(bar); // 报错ReferenceError
    let bar = 2;
  • 在相同作用域内不允许重复声明同一变量。请看代码

    // 报错
    {
        var a = 10;
        let a = 10;
    }
    // 报错
    {
        let a = 1;
        let a = 2;
    }
  • 不能在let变量声前使用(TDZ暂时性死区)。请看代码:

      {
        // TDZ开始
        tmp = 'abc'; // 报错: ReferenceError
        console.log(tmp); // 报错: ReferenceError
    
        let tmp; // TDZ结束
        console.log(tmp); // undefined
    
        tmp = 123;
        console.log(tmp); // 123
      }
  • let声明的变量会绑定当前作用,不受外部变量影响

    var tmp = 123;
    if (true) {
      console.log(tmp) // 报错(触发暂时性死区):ReferenceError
      let tmp = 'abc';
      console.log(tmp) // abc
    }

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号