let和const命令

文章编写参考 阮一峰《ECMAScript 6 入门》

1.let命令

---

1.1 基本用法
ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

//let声明的变量只在代码块内有效
{
    let a = "外部不可访问";
    var b = "外部可以访问";
}
a  // ReferenceError: a is not defined.
b  //"外部可以访问"

再一个例子说明【let】只在代码块中有效

var fnArr = [];
for (var i = 0; i < 10; i++) {
    fnArr[i] = () => {
        console.log(i);
    }
}
fnArr[6]() //10
//var声明的i泄露成为了全局变量

将var换成let后

var fnArr = [];
for (let i = 0; i < 10; i++) {
    fnArr[i] = () => {
        console.log(i);
    }
}
fnArr[6](); //6
// 因为let只在块级作用域中有效，每一次的i都是新的，所以这儿输出6

你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let index = 0; index < 3; index++) {
    let index = "hello"
    console.log(index);
}
//hello
//hello
//hello

1.2 不存在变量提升

var用于声明变量时存在变量提升，也就是说在变量声明之前使用该变量不会报错，只是值为undefined，但是使用let声明就会报错

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

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

1.3 暂时性死区

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

var tmp = 123;
if (true) {
    console.log(tmp);  //123
}

var tmp = 123;
if (true) {
    console.log(tmp);  
    let tmp;
}
// 'Uncaught ReferenceError: tmp is not defined'

只要块级作用域中使用了let或者const之后，就该变量就绑定了这个块级作用于，不再向上级寻找该变量，我们称作【暂时性死区】

1.4 不允许重复声明

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

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

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

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

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

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

2.块级作作用域

---

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量

var tmp = new Date();

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

f(); // undefined
/*
    由于var存在变量提升，所以tmp覆盖了全局的tmp，所以结果为undefined
*/

第二种场景，用来计数的循环变量泄露为全局变量。

var s = 'hello';

for (var i = 0; i < s.length; i++) {
    console.log(s[i]);
}

console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

---

2.1 ES6的块级作用域
let实际上为 JavaScript 新增了块级作用域。

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

上面的函数有两个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是10。

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

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

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

上面代码使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量。

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

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

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

---

2.2 do表达式

本质上，块级作用域是一个语句，将多个操作封装在一起，没有返回值。

{
  let t = f();
  t = t * t + 1;
}

上面代码中，块级作用域将两个语句封装在一起。但是，在块级作用域以外，没有办法得到t的值，因为块级作用域不返回值，除非t是全局变量

现在有一个提案，使得块级作用域可以变为表达式，也就是说可以返回值，办法就是在块级作用域之前加上do，使它变为do表达式。

let x = do {
  let t = f();
  t * t + 1;
};

上面代码中，变量x会得到整个块级作用域的返回值。

---

3.const命令

3.1 基本用法
const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

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

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const foo;
// 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;
}

上面代码在常量MAX声明之前就调用，结果报错。

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

上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

下面是数组类型的例子

const a = [];
a.push("hello");    // 可执行
a.length = 0;       // 可执行
a = new Array();    // 报错

上面代码中，常量a是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给a，就相当于改变了指针地址，这是不允许的。

如果真的想将对象冻结，应该使用Object.freeze方法。

const foo = Object.freeze({});

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

上面代码中，常量foo指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。

除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

var constantize = (obj) => {
    Object.freeze(obj);
    Object.keys(obj).forEach(key => {
        if (typeof obj[key] === 'object') {
            constantize(obj[key]);
        }
    })
}