关于ES6/ES2015的学习笔记

学习ES6/ES2015的笔记记录

关于ES6的学习网址：掌握ES6/ES2015核心内容

1、ECMAScript 6（简称ES6）是JavaScript语言的下一代标准，也称ECMAScript 2015。
2、Babel：Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而使代码在现有环境中执行。
Babel官网：Babel网址，可以在setup中选择自己习惯的工具来使用Babel。
安装Babel命令：

npm install -g babel-core//安装babel核心库
npm install -g babel-cli//安装babel命令行工具

将js的ES6代码编译为ES5代码的命令为：

babel a.js -o b.js

3、常用的ES6语法：
（1）let：声明变量；

let为JavaScript新增了块级作用域，用它所声明的变量，只在let命令所在的代码块内有效。

（2）const：声明变量；

声明的是常量，并且一旦声明，常量的值就不能改变。
const有一个很好的应用场景，即当引用第三方库的声明的变量时，用const声明可以避免未来不小心重命名而导致出现bug。

（3）class：类；

在类中可以定义构造方法，构造方法内定义的方法与属性是实例对象自己的，构造方法外定义的方法与属性是所有实例对象都可以共享的；this关键字即代表实例对象。

（4）extends：继承；

子类通过extends关键字继承父类的所有属性和方法。

（5）super：指代父类的实例（即父类的this对象）；

子类没有自己的this对象，需要继承父类的this对象，然后再对其进行加工。
因此子类必须在构造方法中调用super方法，否则新建实例时会报错；如果不调用super方法，子类就得不到this对象。
ES6的继承机制，实质是先创造父类的实例对象this，然后再用子类的构造函数修改this。

（6）arrow function：箭头函数；

箭头函数（(x, y) => {...}）体内的this对象，就是定义时所在的对象。

（7）template string：ES6的新特性模板字符串``（可以插入大量字符串到文档中）；

用反引号（`）来标识起始，用${}来引用变量，输出会保留所有的空格与缩进。

（8）destructuring：解构；

按照一定模式，从数组和对象中提取值，对变量进行赋值。

（9）default：默认值；

调用方法时忘了传参数，即使用默认值，举例：
function animal(type){
    type = type || 'cat' ; 
    console.log(type);
}
animal();

（10）rest：
函数参数声明中使用，用(...)表示，举例：

function animals(...types){
    console.log(types);
}
animals('cat', 'dog', 'fish');

4、ES6的module功能

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS（服务器端）和AMD（浏览器端）模块，都只能在运行时确定这些东西。
import（输入）命令；
export（输出）命令，除了输出变量，还可以输出函数，甚至是类。