阅读 85

了解一下ES6: let & const

写之前翻了翻掘金的let & const系列文章,写的人很多。搞得我不想去做重复运动了。但是大部分都写的很难懂。今天我们来写一篇易懂的


ES6系列文章标准开头:

  


emm......错了错了,应该是下面这张图片



var和let的区别

在之前,我们常常用var去声明一个变量。但是var本身就有一些问题:

在var的概念里,没有块级作用域

此话怎讲?

我们首先来上这样一段代码:

if (true) {
    var a = "hello";
}
console.log(a);复制代码

输出结果:a

但是我们换成let尝试一下:

if (true) {
    let a = "hello";
}
console.log(a);复制代码

输出:ReferenceError: a is not defined

也就是a 变量为定义


在let类型内,形成了块级作用域的概念,我们在if内定义的let类型变量,在if外层是无法进行访问的。会提示变量未被定义


有个典型的例子,就是块级作用域导致的问题 

for (var a = 0; a < 3; a++) { // 结果输出为 3 3 3
    setTimeout(() => {
        console.log(a)
    }, 1000)
}

for (let a = 0; a < 3; a++) { // 结果输出为 0 1 2
    setTimeout(() => {
        console.log(a)
    }, 1000)
}复制代码



var类型可以重复声明

在之前,我们一个变量名,用var类型可以声明两次。示例:

var a = 10;
var a = 20;复制代码


但是let不可以,重复声明会报错。提示:已声明标识符'a'

SyntaxError: Identifier 'a' has already been declared 


var类型可以进行变量提升

首先,我们先要明白什么是变量提升

变量提升的概念就是,函数及变量的声明都将被提升到函数的最顶部。实例:

console.log(vara); //undefined
var vara = 20;
console.log(vara); //20复制代码

在使用var时,会将变量提升在函数最顶部,但只是声明未赋值。之后运行到声明的行时,再进行赋值。所以我们为何可以看到 undefined


但是let就不是这样了。我们换成let试试

ReferenceError: vara is not defined
复制代码

这里直接提示 vara变量 未被声明。

也就是代表,let不支持变量预解释,也不支持变量提升。



const

const是ES6中一个新引入的类型,学过C++的可能很熟悉。他代表声明一个常量

既然是常量,那肯定代表初始化值后无法重新赋值了。例如

const a = 1;
a = 2;复制代码

TypeError: Assignment to constant variable.复制代码

会提示:赋值给常量变量报错


但是,我们就无法更改const类型的常量了吗?

有一种是比较特殊的,那就是对象(Object)。如果我们声明一个对象常量,那么对象内属性的值还是可以更改的

const info = {
    name: '王圣松',
    age: 17
};
info.name = "Janlay";
console.log(info);复制代码

然后输出 

{ name: 'Janlay', age: 17 }
复制代码


当然,在每一个闭包内还是可以重复声明的。Tips: 在ES6中,闭包的写法也更新了

以前的写法

;(function () {

})();
复制代码

现在

{
}复制代码

所以,我们这样写:

const name = "王圣松";
{
    const name = "wss";
    console.log(name)
}
{
    const name = "wss";
    console.log(name)
}
console.log(name);复制代码

然后输出:

wss
wss
王圣松复制代码



The End

Babel中文网


关注下面的标签,发现更多相似文章
评论