let vs const

title: let和const命令
date: 2015-12-19 20:18:38
categories: tech
tags: ES2015
toc: true

let

块级做用域

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

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

适合在for循环中使用，只在循环内部有效。

for(let i = 0; i < arr.length; i++){}

console.log(i)
//ReferenceError: i is not defined

下面的代码若是使用var，最后输出的是10。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var声明的，在全局范围内都有效。因此每一次循环，新的i值都会覆盖旧值，致使最后输出的是最后一轮的i的值。
若是使用let，声明的变量仅在块级做用域内有效，最后输出的是6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

let实际上为JavaScript新增了块级做用域。

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

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

块级做用域很犀利，界限划得很清楚。感受没有没闭包什么事的样子。若是确实须要调用，就要像下面这样处理。

let f;
{
  let a = 'secret';
  f = function () {
    return a;
  }
}
f() // "secret"

暂时性死区

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，因此每一次循环的i其实都是一个新的变量，因此最后输出的是6。

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

bar(); // [ undefined, 2 ]

上面代码中，调用bar函数之因此报错，是由于参数x默认值等于另外一个参数y，而此时y尚未声明，属于”死区“。若是y的默认值是x，就不会报错，由于此时x已经声明了。

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

暂时性死区最简单理解可能就是是否以前声明过，否则为死区。

const

基本用法

const也用来声明变量，可是声明的是常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: "PI" is read-only

上面代码代表改变常量的值会报错。

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

const foo;
// SyntaxError: missing = in const declaration

上面代码表示，对于const来讲，只声明不赋值，就会报错

const与let异同

const与let命令相同点

• 只在声明所在的块级做用域内有效

• 存在暂时性死区（即便用变量要提早声明）

• 不可重复声明

通常来说，const定义基本类型不在改变的值，好比字符串，数字等。
可是若是定义引用类型，好比普通对象{}或数组[]。好比

const foo = {}；

foo这个地址在栈区已经被const定死，不容改变，不然即为报错。
可是引用类型是能够改变的，由于它们地址在堆区。

const foo = {};
foo.prop = 123;
console.log(foo.prop) // 123
console.log(foo) // { prop: 123 }

由于使用const就是想把它规定死，常量。下面方法能够实现

const bar = Object.freeze({});
bar.name = 'joe';
console.log(bar.name);
//TypeError: Can't add property name, object is not extensible

ES6声明变量方法

ES5声明变量的方法

• var

• function

ES6新增声明变量的方法

• let

• const

• class

• import