ES6

[WHB1]

学习环境安装

注意：最新的谷歌和火狐浏览器可以直接解析了，不需要安装也可以【2018年3月16日10:24:11】

1、安装nodeJS

2、桌面新建文件夹为esDemo【（位置随意）我个人喜欢临时文件放到桌面上】

3、新建package.json

npm init 输入相关你想自定义的东西

4、安装相对应安装包

npm install babel-cli babel-preset-es2015 --save-dev

5、更改package.json中语句

"scripts": {"build": "babel src -d lib"},

"scripts": {"build": "babel src -d lib -w"}
 监听文档变化

注意:在之后不能添加多余“,”逗号，否则会报错

6、在根目录下创建src文件夹，里面存放ES6将要测试文件

7、在cmd终端中输入 type null>.babelrc 创建 .babelrc（ 在其中输入想要配置）

8、最终工程结构如下

9、使用方法

在src目录下新建一个test.js文件，输入一下代码

"use strict";

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

10、在cmd中运行如下命令

npm run build

11、运行之后效果如下

多出一个lib文件存放转换为ES5的文件夹（里面包含转换后文件）

[WHB1]

学习网址：
http://es6.ruanyifeng.com/ 中文文档 https://babeljs.cn/learn-es2015/ 好的转换器 http://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=NoCg3gBADgXBCGEC-BKANBSAPOBjZAuhALwTBhIYUEDcQA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&lineWrap=true&presets=es2015%2Ces2016%2Ces2017%2Creact%2Cstage-2%2Ces2015-loose&prettier=false&targets=&version=6.26.0&envVersion=

第一章 let 与const

一、 let命令

1. 基本用法 let命令只在所在的代码块内有效 let命令只在for循环体内有效
2. 不存在变量提升
3. 暂时性死区
4. 不允许重复声明

二、块级作用域

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

   ES5只有全局作用域和函数作用域， 没有块级作用域， 这带来很多不合理的场景。
   第一种场景， 内层变量可能会覆盖外层变量
   第二种场景， 用来计数的循环变量泄露为全局变量。

2. ES6的块级作用域

   let实际上为JavaScript新增了块级作用域。 ES6允许块级作用域的任意嵌套，外层作用域无法读取内层作用域的变量，内层作用域可以定义外层作用域的同名变量 块级作用域的出现， 实际上使得获得广泛应用的立即执行匿名函数（IIFE） 不再必要了。

   // IIFE写法
   (function () {
       var tmp = ...;
       ...
   }());
   // 块级作用域写法
   {
       let tmp = ...;
       ...
   }

3. 函数声明与块级作用域关系

   ES5规定，函数只能在顶层作用与和函数作用域中声明，不能再块级作用域声明【以下情况ES5--非法】 但是浏览器没有准守这个规定，还是支持在块级作用域中声明函数，因此都能执行不报错。 在 “严格模式” 还是会报错

   情况1：if （true）{ function f（）{ . . . } } 情况2：try{ function f（）{ . . . } } catch（e）{ . . . }

   ES6引用块级作用域，明确允许在块级作用域中可以声明函数。因此严格模式下，不会报错。 并且ES6规定，块级作用域中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

   function f ( ) { console.log( "I am outside !" ); };
   ( function ( ) {
        function f ( ) { console.log( "I am inside !" ); };
        f ( ) ;
   })( )
   ES5 ==> I am inside
   ES6 ==> I am outside