以for循环的方式了解var与let的区别

lucio110 2019-07-24 原文

var是ES5定义变量的一种声明方式。

let是ES6定义变量的一种声明方式—可定义局部变量，即定义块级作用域。

以下列简单的函数进行表现二者作用域的不同

在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。
{
　　var i=0
}
console.log(i)    //输出0

ES6新增的let，可以声明块级作用域的变量。
{
    let i=0
}
console.log(i)    //输出“Uncaught ReferenceError: i is not defined”以简单

以简单示例表现二者提升变量的不同

console.log(aicoder);    // “undefined” 
var aicoder = 'aicoder.com'

因为变量被提升了，但是输出在赋值之前，所以，未找到aicoder的值，输出“undefined”

console.log(aicoder);    // 错误：Uncaught ReferenceError: Cannot access 'aicoder' before initialization 
let aicoder = 'aicoder.com'; // 这之后就可以安全使用aicoder

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。

与for循环的独特应用

 for (var i = 0; i < 5; i++) {
        setTimeout(() => {
            console.log("var", i)
        }, 1000)
    }

　　/*输出：一秒后，输出5个5
　　*因为var，导致最后i成为5
　　*
　　*函数执行顺序：
　　*->开始同步
　　*->for循环5次，并向异步中推5个timeout函数
　　*->同步结束->开始异步
　　*->同时开始执行5个timeout函数（因为i是全局变量，所以，外部for循环结束时，i为5，则timeout函数i也发生变化，变为5）
　　*->异步结束
　　*->打印结果：一秒后，同时输出5个5
　　**/

for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            console.log("let", i)
        }, 1000)
    }
    /*输出：一秒后，同时顺序输出01234
     *
     *因为let，let限制了参数作用域
     *
     *函数执行顺序：
     *->开始同步
     *->for循环5次，并向异步中推5个timeout函数
     *->同步结束->开始异步
     *->同时开始执行5个timeout函数（虽然i在变化，但传入timeout函数的i已经拥有了块作用域，所以并不会因为外部的改变而改变）
     *->异步结束
     *->打印结果：一秒后，同时输出01234
     **/

ES6的let让js真正拥有了块级作用域，也是向这更安全更规范的路走，虽然加了很多约束，但是都是为了让我们更安全的使用和写代码。