一、ES6基本概念

ES6的概念以及运行环境

ES6即是一个历史名词，也是一个泛指。含义是5.1版以后的JavaScript的下一代标准。涵盖ES2015、ES2016、ES2017等

WebStorm配置

找到左上角的file，选择setting
选择Languages & Frameworks设置ES6选项。
新版的webstorm已经默认是es6了

Babel编译器

其主要作用是用于将ES2015+代码转化为向下兼容的JavaScript代码。

安装

yarn add @babel/core @babel/cli @babel/preset-env -D
yarn add @babel/polyfill

通过以上命令安装后会导致只有当前项目才可以使用babel工具，因此为了所有项目都可以使用babel工具，可以进行全局安装。

yarn global add @babel/core @babel/cli @babel/preset-env
yarn global add @babel/polyfill

创建配置文件

也就是在项目根目录创建package.json文件。

{
  "presets": [
    "latest"
  ],
  "plugins": [],
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-preset-latest": "^6.24.1"
  },
  "scripts": {
    "build": "babel src -d lib"
  }
}

配置完以上内容后，只需要在scr目录下进行开发，通过运行yarn run build即可将src目录下的js转换并放到lib目录下。

let关键字

let存在块级作用域，例如

if (true) {
  var a = 6;
  let b = 7;
  console.log(a); // 6
  console.log(b); // 7
}
console.log(a); // 6
console.log(b); //  b is not defined

在大括号内用let声明的变量无法在大括号外使用。

都可以在全局声明变量

/**
 * let与var关键字的区别 - 都是定义变量
 * let提供了块级作用域
 *  * 也可以在全局作用域和函数作用域定义变量
 * var提供了全局作用域和函数作用域
 */

var m = 100;
let n = 1000;

console.log(m); // 100
console.log(n); // 1000

let声明没有变量提升
当使用var声明时，不会报错。
```
console.log(m); // undefined
var m = 10;
```
当使用let声明时则直接报错。
```
console.log(m);
let m = 10;
```

不允许重复声明

当使用var声明时，允许重复声明。

var v = 100;

var v = 1000;

console.log(v); // 1000

当使用let重复声明时则直接报错。

let v = 100;

let v = 1000;

console.log(v);

与函数的关系
块级作用域中如果没有声明与全局作用域变量同名的变量，那么在块级作用域中可以使用全局变量。
```
let v = 100;
function fn() {
  // 全局作用域
  console.log(v); 
}
fn(); // 100
```
但如果在块级作用域中声明了与全局作用域变量同名的变量，那么会导致在块级作用域中无法使用全局作用域。无论在块级作用域中的哪里声明。
```
let v = 100;
function fn() {
  // 全局作用域
  console.log(v); // 由于在此作用域中还存在一个v的声明,因此v无法使用全局变量的v
  let v = 1000;
  console.log(v);
}
fn();
```

函数参数

function fn(a) {
  // 此时参数a相当于使用let关键字变量进行定义
  let a = 1000;
  console.log(a);
}
fn(100);

块级作用域

let a = 100; // 全局变量

(function () {
  // 函数作用域
  let b = 1000; // 局部变量
})();
if (true) {
  // 块级作用域
  let c = 10000;
}
// 此时只能找到a,而b\c会报错
console.log(a);
console.log(b);
console.log(c);

为什么需要块级作用域

局部变量可能覆盖全局变量

在循环体中用于计数的变量可能会暴露

当使用var关键字声明时，实际上声明的是全局变量。

for (var i = 0; i < 10; i++) {
  console.log(i);
}
console.log("跳出循环后: ", i); // 输出 10

使用let关键字声明则不会导致这种情况。

for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log("跳出循环后: ", i); // i is not defined

一个闭包案例

var arr = [];
for (var i = 0; i < 10; i++) {
  arr[i] = function () {
    return i;
  };
}
console.log(arr[9]()); // 任意位置都为10

当使用var关键字声明变量时，会导致数组所有元素的结果均为10.

当使用let关键字即可避免这种情况

函数声明

在ES5中不可以在块级作用域和try-catch中声明函数。而这些在ES6中是允许的。

直接定义函数等于定于全局作用域函数

if (true) {
  function fn() {
    console.log("块级作用域函数");
  }
}
fn(); // 块级作用域函数

虽然定义在了块里边，但外部还是可以调用。

通过变量定义不是全局变量。

if (true) {
  let t = function () {
    console.log("函数t");
  };
}
t(); // 报错 t is not defined