let和const命令

1. let 命令

1.1 基本用法

ES6 新增的let命令，用来声明遍历，类似于var，但是声明的变量只在let命令所在的代码块内有效

var和let的区别是：let有块级作用域,var没有块级作用域

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

用let声明了变量a，用var声明了变量b，然后在外部调用这两个变量，let声明的变量报错,var声明的变量返回了正确的值

for循环的计数器就很适合let声明方式

for(let i = 0;i < 10;i++){

}
console.log(i) //i is not defined

i是在for循环内部有效，在循环体外部引用报错

for(var i = 0;i < 10;i++){

}
console.log(i) //10

如果使用var，最后输出的是10

for循环的特别之处：设置循环变量的那部分的作用域和循环体内部的作用域是两个不同的作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

1.2 不存在变量提升

var命令会发生“变量提升”现象，即变量可以在声明之前使用

console.log(foo); // 输出undefined
var foo = 2;

let命令改变了语法行为，let声明的变量只能是在声明后使用，否则报错。

console.log(foo); // 报错ReferenceError
let foo = 2;

1.3 暂时性死区

只要块级作用域内存在let命令，它所声明的变量就会 “绑定” 这个区域，不再受外部的影响。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

上述代码，全局环境中存在一个变量tmp，但是在块级作用域内let又声明了一个局部变量tmp，会导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

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

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

上述代码，在let声明变量tmp之前，都属于tmp的死区

暂时性死区会导致typeof不再是一个完全安全的操作

typeof x; // ReferenceError
let x;

如果一个变量从未声明过，那么typeof不会报错

typeof variable // undefined

上述代码，variable是一个不存在的变量名，结果返回undefined

一些隐蔽的死区，不容易被发现

function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错

上述代码，调用函数bar 之所以报错，因为参数x默认值为y，但是y此时还没有声明，属于死区状态，如果y的默认值是x，就不会报错，因为x已经声明过了

function bar(x = 2, y = x) {
  return [x, y];
}
bar(); // [2, 2]

1.4 不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

因此，不能在函数内部重新声明参数。

function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

2. 块级作用域

2.1 为什么需要会计作用域

在ES5中只有全局作用域和函数作用域，没有块级作用域，可能会带来一些意料之外的场景

第一中，内层变量可能会覆盖外层变量

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

上述代码，if代码的外部使用的是外层tmp变量，内部使用的是内层的tmp变量，但是由于变量提升的原因，导致了内层的tmp覆盖了外层的tmp变量

第二中，用来计数的循环变量成为了全局变量

for(var i = 0;i < 10;i++){

}
console.log(i) //10

上述代码，变量i是用来控制循环，但是循环结束后，i并没有消失，成为了全局变量

2.2 ES6的块级作用域

let为 JavaScript 新增了块级作用域。

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上述代码，有两个作用域块，f1()和if，都声明了变量n，运行结果输出为5，这表示外层的代码块不会受到内层代码块的影响，如果使用var声明，最后结果才是10

ES6 允许块级作用域的任意嵌套。

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

上述代码使用了一个五层的块级作用域，每一层都是一个单独的作用域，第四层作用域无法访问第五层的作用域

内层作用域可以定义外层作用域的同名变量

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

3. const命令

3.1 基本用法

const声明一个只读的常量，常量的值不能被改变

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

修改常量的值会报错

const PI
// SyntaxError: Missing initializer in const declaration

如果只声明，不赋值也会报错

const的作用域与let命令相同：只在声明所在的块级作用域内有效

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

const命令也没有变量提升，也存在暂时性死区

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

const声明的常量，也与let一样不可重复声明。

var message = "Hello!";
let age = 25;

// 报错
const message = "Goodbye!";
const age = 30;

3.2 本质

const的本质，并不是保证变量的值不会被改动，而是保证变量的指向的内存地址所保存的数据不会被改动，但是对于复合类型，比如对象和数组，变量指向的是内存地址，保存的是一个指向数据的指针，const只能保证指向的变量的指针不会改变，但是指针指向的数据结构，const不能控制

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

数组例子

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

如果让数据结构不被改变，可以将对象冻结 使用Object.freeze方法

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

4. 顶层对象的属性

顶层对象在浏览器当中指的是window对象，在 Node 指的是global对象

ES5中，顶层对象和全局变量是相等的

window.a = 1;
a // 1

a = 2;
window.a // 2

在ES6中，用let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性

var a = 1;
window.a // 1

let b = 1;
window.b // undefined

全局变量a由var命令声明，所以它是顶层对象的属性；全局变量b由let命令声明，所以它不是顶层对象的属性，返回undefined。