ES6学习笔记(阮一峰教程)——let、const命令、函数声明

一.Babel转换器

Babel 转码器，能将ES6代码转换成ES5。例如:

// 转码前input.map(item => item + 1);
// 转码后input.map(function (item) {
   return item + 1;});

babel=browser.js可以通过进入browser.js的方式转换代码。

二.为什么需要块级作用域？

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

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

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

解释：if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

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

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

解释：变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

三.块级作用域与函数声明

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。ES6可以。

// 情况一if (true) {
  function f() {}}
// 情况二try {
  function f() {}} catch(e) {
  // ...}

根据 ES5 的规定都是非法的。但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。

function f() { console.log('I am outside!'); }
(function () {
  if (false) {
// 重复声明一次函数f    
function f() { console.log('I am inside!'); }
  }
	f();
}());

上面代码在 ES5 中运行，会得到“I am inside!”，因为在if内声明的函数f会被提升到函数头部，实际运行的代码如下:

// ES5 环境
function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());

ES6 就完全不一样了，理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是，如果你真的在 ES6 浏览器中运行一下上面的代码，是会报错的，这是为什么呢？ES6:

• 允许在块级作用域内声明函数。
• 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
• 同时，函数声明还会提升到所在的块级作用域的头部。

根据这三条规则，在浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的变量。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

// 函数声明语句
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

另外，还有一个需要注意的地方。ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

四.ES6声明变量的6种方法

var声明的局限性：

（1）可以重复声明

（2）无法限制修改

（3）没有块级作用域

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。

五.let命令

报错：undefined定义变量但没赋值      referenceError变量没定义

ES5没有块级作用域 let实际上为 JavaScript 新增了块级作用域。

1.let声明的变量只在它所在的代码块内有效

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

for循环的计数器，就很合适使用let命令。

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

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

例：

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

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

解释：变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

2.不存在变量提升（let、const语句不存在变量提升，主要是为了减少运行时错误）

// var 的情况console.log(foo); // 输出undefinedvar foo = 2;
// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;

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

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

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

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

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

六.const命令

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

2.const一旦声明变量，就必须立即初始化，不能留到以后赋值。

3.只在声明所在的块级作用域内有效。const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。const声明的常量，也与let一样不可重复声明。

七.顶层对象属性

顶层对象，在浏览器环境指的是window对象。顶层对象的属性与全局变量是等价的。

window.a = 1;
a // 1
a = 2;
window.a // 2

ES6 为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

var tmp =new Date();