ES6研习：let和const命令

ES6研习：let和const命令

1.let命令

基本用法 ：

ES6 新增了let命令，用来声明变量。

注意：所有生命的变量旨在let命令所在代码块中有效，也就是{}中

{
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

1.1 不存在变量提升

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

这样很容易出现各种问题，let声明的变量不存在变量提升

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

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

1.2暂时性死区

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

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

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

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

注意：没有变量提升和有暂时性死区后，typeof关键字可能会报错

因为之前使用var关键字,没有声明的变量值都为undefined

typeof x; // ReferenceError
let x;
typeof undeclared_variable // "undefined"

还有一些情况会报错：

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

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

// 不报错
var x = x;

// 报错
let x = x;
// ReferenceError: x is not defined

总结 ： 在ES6中使用let关键字声明变量都应该先声明再使用,这样也可以避免很多不必要的错误

1.3不允许重复声明

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

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

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

1.4块级作用域

ES5中有全局作用域和函数作用域，ES6添加块级作用域。

ES5中的var关键字在很多时候都是不合理的，不管是变量提升还是作用域

ES6新增的块级作用域可以理解为{}

块级作用域的特点 ：

• 外层作用域无法读取内层作用域的变量
• 内层作用域可以定义外层作用域的同名变量。
• 有了块级作用域后就可以不需要立即执行函数了，解决了循环中的很多问题，像定时器，闭包等

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

注意：不要忘记在循环语句的（）里面会形成一个单独的作用域

2.const命令

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

2.1 基本用法

const PI = 3.1415;
PI // 3.1415

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

const特点 ：

• 声明常量，一旦声明不能改变
• 一旦声明，必须赋值不可以留到以后赋值
• 不存在变量提升，同样存在暂时性死区，只能声明后使用

2.2 实质

• const不是保证值不变，而是保证变量指向的地址不变，对于基本数据类型变量是直接指向内存地址的，所以等同于常量
• 但是对于对象而言，内存保存的是一个指针，所以使用const声明对象时不能重新赋值其他对象但是可以为其添加属性

const foo = {};

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

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

2.3冻结对象

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

const foo = Object.freeze({});

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

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

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

个人博客：http://www.aeiherumuh10.com/zeno-blog/
参考文献：https://es6.ruanyifeng.com/#docs/let