在学习vue开发时遇到很多不认识的编码（ES2015），于是各处论坛博客逛了一圈相关的知识点，记录了一些大纲概要，仅供查询。
更具体详细的讲解，强烈推荐——阮一峰的ECMAScript6入门，http://es6.ruanyifeng.com 。
另外，babel官方提供的在线编译工具——http://babeljs.io/repl/ ，（好尴尬，Safari上居然用不了）
1、let/const
1.1 let/const具有块作用域的特性；
1.2 let用于声明变量，可以被改变；
1.3 const用于声明常量，不可以被改变；（对于引用类型常量，引用对应的内容是可以被改变的）
1.4 顶层对象，let/const等声明的对象不再是window的属性；
2、箭头函数
2.1 定义：
const sum = （a, b) => {
return a + b;
};
2.2 参数表：(a, b)（可以为空）
2.3 函数体：{}，内容只有一个语句时，可以省略；（但是没有必要这样做）
2.4 作用域（this）：函数没有独立作用域，即作用域与外部一致（可以减少const that = this或者const _this = this使用的尴尬）；
3、模板字符串
3.1 定义：
const user = {name: '金小可'}；
let action = '登录';
const demoSting = `用户 ${user.name} 未被授权执行 ${action} 操作。`)
3.2 ``：用反撇号来包含内容；
3.3 ${} 插值符号：插入不确定的字符串值，包含的内容为任意表达式；
3.4 其他：
支持嵌套；
允许并且识别空格、制表符、换行等；
特殊字符仍然需要进行转义；
4、解构赋值
4.1 定义：
const user = {name: 'yh', age: 18, country: 'china', height: 179, weight: 129};
let {name: nickname, height = 180, weight} = user;
// 结果nickname为'yh'，height为179，weight为129；另180是默认值
const array = ['a', 'b', 'c', 'd', 'e'];
let [ , x, y] = array;
// 结果x为'b'，y为'c'
// 解构实际上是一种选择性赋值的简化
4.2 交换变量值
[x, y] = [y, x];
4.3 函数返回多个值
const multiAndSum = (a, b) => {
return { a*b, a + b};
}
4.4 函数参数
const multi = ({ a, b }) => {
return a*b;
}
4、函数参数默认值
const multi = (a = 1, b = 1) => {
return a * b;
}
5、展开运算符...
5.1 定义
const a = [1, 3, 5];
const b = [...a, 4, 9]; // b = [1, 3, 5, 4, 9]
const x = {a: 1, b: 2};
const y = {...x, c: 4, d: 0}; // y = {a: 1, b: 2, c: 4, d: 0}
5.2 解构
const x = {a: 1, b: 2, c: 3, d: 4, e: 6};
const { b, c ...others } = x;
// y = { d: 4, e: 6}
5.3 函数参数
const sum = (a, b, ...others) => {
return others.reduce((x, y) = { return x + y;}) + a + b;
}
6、对象字面量
6.1 精简属性
const a = 1, b = 2;
const x = {a, b}; // 属性与变量名一致 x = {a: 1, b: 2}
6.2 精简方法
const x = {
a: 1,
b: 2,
getSum() {
return this.a + this.b;
}
}
6.3 计算属性
const prop = 'name';
const fun = 'get';
const x = {
height: 179,
weight: 129,
[prop]: 'yh',
[fun + 'Height']() {
return this.height;
}
} // 在声明的时候就可以使用变量作为属性，方法也可以
7、class
7.1 定义
class Person {
constructor(name, height) { // 构造函数
this.name = name;
this.height = height;
}
static age = 30;
static getAge() { // 静态方法
return this.age;
}
weight = 129;// 在构造函数中添加属性
getHeight = () => {
return this.height;
};
getName() { // 原型方法
return this.name
}
}
new Person().getHeight(); // 必须声明在前使用在后
7.2 继承
class Staff extends Person {
constructor(name, height, type) {
super(name, age);
this.type = type;
}
getType() {
return this.type;
};
}
8、模块
8.1 概述
ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量；
模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入;
8.2 export命令用于规定模块的对外接口
let name = 'yh';
const v1= () => { return name}；
export {
name,
v1 as getName,
}; // as用于重命名对外接口名称
8.3 import命令用于输入其他模块提供的功能
import { name, getName } from './lastModule'
let currentName = getName();
// name, getName 必须与lastModule文件中export的接口名称一致
// import是静态执行，具有变量提升且只会执行一次，但不能包含表达式
// 也可以用import * 来导入全部的接口
// import 声明的变量是只读的，本身不能再进行赋值操作
8.4 export default 表示默认输出
const getName = () => {
return 'yh';
}
export default getName;
// 默认输出只能有一个，在import默认输出是可以任意命名
8.5 import export 复合用法及模块的继承
export { name, getName as default } from './lastModule';
// 导入name, getName 接口并输出，其中getName作为默认输出
基于复合用法实现模块的继承export * from './lastModule'
8.6 ES6模块与CommonJS模块的差异
CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
end
