了解var与let的区别

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”以简单
  • 以简单示例表现二者提升变量的不同

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

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

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

console.log(aicoder);    // 错误:Uncaught ReferenceError: Cannot access 'aicoder' before initialization 
let aicoder = 'aicoder.com'; // 这之后就可以安全使用aicoder
  • 与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真正拥有了块级作用域,也是向这更安全更规范的路走,虽然加了很多约束,但是都是为了让我们更安全的使用和写代码。

原文地址:https://www.cnblogs.com/lucio110/p/11236113.html