【系统学习ES6】第一节：新的声明方式

【系统学习ES6】

本专题旨在对ES6的常用技术点进行系统性梳理，帮助大家对其有更好的掌握。计划每周更新1-2篇，希望大家有所收获。

以前用ES5时，声明变量只能用var。ES6的出现，为我们带来了两种新的声明方式：let和const。我们可以先简单记忆：

var：声明全局变量
let：声明局部变量
const：声明常量

var声明

var在ES6里是用来声明全局变量的，我们先看一个简单的例子：

var a = "lemoncool";
console.log(a);

控制台输出了“lemoncool”。但这个例子不足以声明a是全局变量。我们继续声明一个函数，在函数体中看是否可以拿到函数外面声明的a。

var a = "lemoncool";
var testFun = function(){
 console.log(a);
} 
testFun();

控制台同样输出了“lemoncool”，说明函数中可以拿到外部声明的a，这可以说明var声明的变量确实是全局的。如果你觉得这个例子说服力还不够，那我们继续看。

var a = "lemoncool";
var testFun = function(){
  a = '23';
} 
testFun(); 
console.log(a);

此时控制台会输出多少呢？是"23"。我想，这个例子，足以说明var是全局声明的。

let 声明

我们试着用let再次执行上面的例子：

var b = "lemoncool";
var testFun = function(){
  let b = '23';
} 
testFun(); 
console.log(b);

函数执行后，再打印b，你觉得会输出多少呢？结果是此时输出的是"lemoncool"。为什么？

因为我们在函数里用通过let声明了 b，这时的 b ="23"只在函数作用域内有效，属于局部变量。外面的打印，拿不到函数的局部变量，所以拿不到"23"。

那如果我们只在函数体里声明b，外部的声明删掉，打印就会输出"23"么？

var testFun = function(){
  let b = '23';
} 
testFun(); 
console.log(b);

不好意思，报错了。不在外部声明，即使函数里声明再多花样，外部依然拿不到。

上面两个例子，说明了let声明的是局部变量。let声明的变量，只在区块内起作用，外部拿不到，也是不可以调用的。有关作用域问题，大家可以自行查阅资料深入了解。

所以let不会存在变量提升的bug，可以有效防止数据污染。同时，let不允许在相同作用域内，重复声明同一个变量。

在合理场景下，我们要努力去习惯用let代替var。

const 声明

在开发中，有些变量从声明后就不允许改变。这种变量叫常量。这时就需要用到const声明。

我们通过一个反例，看一段错误代码：

const c = "lemoncool";
c = 'hello';
console.log(c);

执行这段代码时，会报错。原因是const声明的变量不可改变。

const c = "lemoncool";
console.log(c); //"lemoncool"
const d;  // SyntaxError: Missing initializer in const declaration

这段代码同样会报错，意味着，const一旦声明必须初始化，否则会报错。

Q：const声明的变量初始化不允许再改变，是针对所有类型么？

A：答案是“否”，简单类型（数值 number、字符串 string 、布尔值 boolean），的确是这样。但是对于复杂类型（对象 object，数组 array，函数 function），const只能保证变量指针是固定的，至于指针指向的数据结构，是否发生变化，就有些无法控制。所以使用 const 声明复杂类型对象时要慎重。

暂时性死区

var temp = "lemoncool";
if (true) {
 console.log(temp);
 const temp = '123456';
}

你以为会输出“lemoncool”？NO，会报错。

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。 凡是在声明之前就使用这些变量，就会报错。

所以，在代码块内，使用let或const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

上面代码中，在const命令声明变量temp之前，都属于变量temp的“死区”。

到此，三种声明方式的使用方法及注意事项已梳理完毕。没有整理很细，因为细的知识点太多，不知从何说起。大家作为一个大纲，举一反三。

下一节我们会一起讨论【解构赋值】，感谢大家支持，希望大家在每一节中都有所得。

公棕号【前端便利贴】记录着一个程序媛的所见所得所想，分享日常技术笔记，内容覆盖了阅读、技术和个人思考~，关注公棕号更早获取更多文章。

觉得有用的话，小手点点【推荐】再走吖~~