es6 - let能代替var嘛

栏目: JavaScript · 发布时间: 6年前

内容简介：es6 - let能代替var嘛

一 let能代替var嘛？

let能代替var嘛？这是我在使用let一段时间后发出的疑问？也是我写这篇文章的原因。下面我们就以这个问题为基础，探讨一下let 和 var 之间的区别和联系。

1.1 let 和 var 的区别

let:声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。 let声明的定义

var:声明了一个变量，可选的将其初始化为一个值。 var声明的定义

根据mdn对let 和 var 的不同定义我们可以看出。两者的核心区别在于是否声明一个块级作用域。函数作用域也是块级作用域，所以从这点来说let是能取代var的。看一下下面的demo

function test(){
   var a = 10
}
function test1(){
   let b = 11
}
console.log(a)
console.log(b)
// a is not defined
// b is not defined

从这个例子中，我们可以看出，应该在绝大部分的情况下,let是可以代替var使用的，那么还有什么地方是不能替代的嘛？？在理清这个问题之前，我们先来了解一下let的几个特性。

1.2 let的几个特殊用法

由于let是块级作用域的，当我们需要让变量只在块级作用域里有效的话，就需要使用它，下面看几个例子

1.2.1 在循环体中使用变量

这是开发者最常用到的一个块级作用域需求，当写循环体的时候，我们通常都是希望变量只在循环体内有效。使用let能实现这一需求。

for(let i = 0; i < 10; i++){
  // some code
}
console.log(i)
//undefined

1.2.2 let声明不提升

我们都知道，如果用var来声明一个变量，通常会发生声明提升现象，（个人可能由于水平较低的原因，并不知道声明提升的好处在哪里）而如果用let来声明一个变量的话，不会发生声明提升。

console.log(j)
let j = 10
// j is not defined

这个特点，是var声明有的，而let声明没有的，如果需要利用这一特性，let就不能代替var了。（什么时候会需要使用这个特性呢？目前还没有遇见过）

1.2.3 let在不会给全局变量加属性

在全局作用域下，不同于var声明的变量，使用let来定义变量，该变量不会成为全局变量的一个属性。

var b = 2
let a = 1
console.log(window.a)
console.log(window.b)
// undefined 2

所以如果你想把某个变量变成window的属性，使用var而不要使用let

1.2.4 let的暂时性死区

let在 从块级作用域开始到声明这段（注意是块级作用域开始) 时间里是无法被访问的，因为其处在暂时性死区之间。试图引用，会抛出错误

if(true){
 console.log(typeof a) //type error
 let a = 10
}

上面为什么说从块级作用域开始到声明的位置是暂时性死区呢？下面我们看看这段代码

console.log(typeof a) //undefined
if(true){
 let a = 10
}

在上面这段代码中，返回的结果是undefined。而不是typeroor了。因为在使用typeof的时候，a不没有处在暂时性死区之中。所以可以返回undefined。这里有一个疑问，不是说let不会进行声明提升嘛？为什么这里用typeof结果是undefined呢，答案是因为不管typeof 任何一个不存在的变量名都会返回undefined,不信你可以在控制台随便typeof 一个什么鬼变量名，结果都是undefined。所以可见暂时性死区的厉害。真的是不可能访问到该变量。

1.2.5 在一个作用域内不能重复使用let定义同一个变量名

let a = 10
let a = 20
console.log(a)
// 语法错误

这个特点尤其在switch语句中要特别小心，应为switch语句只有一个作用域

switch(true){
 case 1:
 let a = 10
 break
 case 2: 
 let a = 20
 break
}
//output typerror

二总结

综合以上几个方面，我们可以得出，在绝大多数情况下，let是可以代替var的，但是如果需要用到hack的地方，比如需要变量提升，需要在外部能引用内部定义的变量，需要把变量定义为全局的属性的时候，就需要使用var。目前，我在开发中的做法是先尽量用const定义不需要修改的变量（修改本身，const下次次再写一篇文章探讨一下），需要修改的先使用let,特殊的时候再使用var(可能本人接触前端的时间有限，还没有碰到非用var不可的时候)。

以上所述就是小编给大家介绍的《es6 - let能代替var嘛》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！