你真的懂let和const？

你真的懂let和const？

let和const在不少工程师眼里可能只是变量声明符，其实错了他仍是有不少小细节值得注意的，这里我简单介绍几点。

1. 块级做用域

在ES6以前咱们脑海里应该只存在全局做用域和函数级做用域，没有块级做用域。那么为何要引入块级做用域呢？

• 避免外层变量被覆盖

var str = "hello";
function d() {
  console.log(str);
  if (false) {
    var str = 'world';
  }
}
d();//undefined
复制代码

相信不少刚入门的同窗看到上述代码会有所不解，其实在全局做用域str变量已经被声明且赋值，为何我函数里面访问不到呢。这里就牵扯到变量提高和函数级做用域的概念。上述代码其实等同于下放代码，当函数被执行的时候生成了一个新的做用域也就是函数做用域，js引擎会把变量声明提到方法体的最前面，你们能够看到只是声明了并无赋值。因此就是 undefined。

var str = "hello";
function d() {
  var str ;
  console.log(str);
  if (false) {
    str = 'world';
  }
}
d();//undefined
复制代码

• 循环变量污染全局变量

var str = 'hello';
for (var i = 0; i < str.length; i++) {
  console.log(str[i]);
}
console.log(i); // 5
复制代码

不少同窗面试的时候可能会遇到上面相似的代码，疑惑点应该在为何会打印出来为何会是5，一样的道理代码如同下方。变量会被提高，因此在循环结束以后i就被累加到了5.

var str = 'hello';
var i;
for ( i = 0; i < str.length; i++) {
  console.log(str[i]);
}
console.log(i); // 5
复制代码

es6的let和const声明符，是不存在变量提高的；同时也只在块级做用域生效。

这个答案应该很明显了吧

var str = "hello";
function d() {
  console.log(str);
  if (false) {
    let str = 'world';
  }
}
d();
复制代码

2. 暂时性死区MDN

什么是暂时性死区呢？不少人可能很迷惑。那就听我娓娓道来，若是说咱们使用了let和const命令，做用域内会对这些命令声明的变量，在它的声明周期内造成一种封闭做用域。这在语法上，称为“暂时性死区”。代码展现以下:

if (true) {
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError
  let tmp;
  console.log(tmp); // undefined
  tmp = 123;
  console.log(tmp); // 123
}
复制代码

由于let和const声明是不会被提高的，因此为了保障声明的有效性，js的解释引擎会对变量所处的块级做用域造成一种保护，所以在声明以前使用会有语法错误，是不被容许的。

不能重复声明

function de(){
	var a = "1";
	var a = "2";
	console.log(a);
}
de()//不报错

function de(){
	var a = "1";
	let a = "2";
	console.log(a);
}
de()//报错

function de(){
	let a = "1";
	let a = "2";
	console.log(a);
}
de()//报错
复制代码

相信你们通常不会声明重复变量编码，因此在这里就不作解释了。若是你们感兴趣能够本身研究或者来现场一块儿学习。

3. const常量

const声明符的大多特性和let相同，这里就很少作解释了。你们都知道const是声明常量的，一但变量被声明成常量它就不能再被继续修改了。你们要注意的是这里变量不可被修改的是存储的地址值不可被修改，意思就是简单类型的数据是不能修改的。复合类型的数据（主要是对象和数组）const只能保证这个指针是固定的，而这个具体的对象实例包含的属性是能够被修改的。看看代码咱们可能会更清楚：

//实例一
const a = "hello";
console.log(a);//"hello"

a = "world";//Assignment to constant variable

//实例二
const obj = {};
obj.name = "jack";
console.log(obj.name);//"jack"

obj = {};//Assignment to constant variable.

//实例三
const a = [];
a.push('Hello');
console.log(a); //[ 'Hello' ]
a.length = 0;
a = ['Dave'];    // Assignment to constant variable.

复制代码

正如你们所看到的字符串a被复制后就不能在修改，而对象和数组是能够改变它里面的元素的，可是不能给从新复制一个新的对象实例。由此就能够判定const声明出来的变量存的是固定的地址值。

• 关于es6还有更多的知识点，请关注我接下来的文章。如发现不当之处欢迎加微信(xiaoqiang0672)批评。