在學(xué)習(xí)vue開發(fā)時(shí)遇到很多不認(rèn)識(shí)的編碼（ES2015），于是各處論壇博客逛了一圈相關(guān)的知識(shí)點(diǎn)，記錄了一些大綱概要，僅供查詢。
更具體詳細(xì)的講解，強(qiáng)烈推薦——阮一峰的ECMAScript6入門，http://es6.ruanyifeng.com 。
另外，babel官方提供的在線編譯工具——http://babeljs.io/repl/ ，（好尷尬，Safari上居然用不了）
1、let/const
1.1 let/const具有塊作用域的特性；
1.2 let用于聲明變量，可以被改變；
1.3 const用于聲明常量，不可以被改變；（對(duì)于引用類型常量，引用對(duì)應(yīng)的內(nèi)容是可以被改變的）
1.4 頂層對(duì)象，let/const等聲明的對(duì)象不再是window的屬性；
2、箭頭函數(shù)
2.1 定義：
const sum = （a, b) => {
return a + b;
};
2.2 參數(shù)表：(a, b)（可以為空）
2.3 函數(shù)體：{}，內(nèi)容只有一個(gè)語句時(shí)，可以省略；（但是沒有必要這樣做）
2.4 作用域（this）：函數(shù)沒有獨(dú)立作用域，即作用域與外部一致（可以減少const that = this或者const _this = this使用的尷尬）；
3、模板字符串
3.1 定義：
const user = {name: '金小可'}；
let action = '登錄';
const demoSting = `用戶 ${user.name} 未被授權(quán)執(zhí)行 ${action} 操作。`)
3.2 ``：用反撇號(hào)來包含內(nèi)容；
3.3 ${} 插值符號(hào)：插入不確定的字符串值，包含的內(nèi)容為任意表達(dá)式；
3.4 其他：
支持嵌套；
允許并且識(shí)別空格、制表符、換行等；
特殊字符仍然需要進(jìn)行轉(zhuǎn)義；
4、解構(gòu)賦值
4.1 定義：
const user = {name: 'yh', age: 18, country: 'china', height: 179, weight: 129};
let {name: nickname, height = 180, weight} = user;
// 結(jié)果nickname為'yh'，height為179，weight為129；另180是默認(rèn)值
const array = ['a', 'b', 'c', 'd', 'e'];
let [ , x, y] = array;
// 結(jié)果x為'b'，y為'c'
// 解構(gòu)實(shí)際上是一種選擇性賦值的簡化
4.2 交換變量值
[x, y] = [y, x];
4.3 函數(shù)返回多個(gè)值
const multiAndSum = (a, b) => {
return { a*b, a + b};
}
4.4 函數(shù)參數(shù)
const multi = ({ a, b }) => {
return a*b;
}
4、函數(shù)參數(shù)默認(rèn)值
const multi = (a = 1, b = 1) => {
return a * b;
}
5、展開運(yùn)算符...
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 解構(gòu)
const x = {a: 1, b: 2, c: 3, d: 4, e: 6};
const { b, c ...others } = x;
// y = { d: 4, e: 6}
5.3 函數(shù)參數(shù)
const sum = (a, b, ...others) => {
return others.reduce((x, y) = { return x + y;}) + a + b;
}
6、對(duì)象字面量
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 計(jì)算屬性
const prop = 'name';
const fun = 'get';
const x = {
height: 179,
weight: 129,
[prop]: 'yh',
[fun + 'Height']() {
return this.height;
}
} // 在聲明的時(shí)候就可以使用變量作為屬性，方法也可以
7、class
7.1 定義
class Person {
constructor(name, height) { // 構(gòu)造函數(shù)
this.name = name;
this.height = height;
}
static age = 30;
static getAge() { // 靜態(tài)方法
return this.age;
}
weight = 129;// 在構(gòu)造函數(shù)中添加屬性
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 模塊的設(shè)計(jì)思想，是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量；
模塊不是對(duì)象，而是通過export命令顯式指定輸出的代碼，再通過import命令輸入;
8.2 export命令用于規(guī)定模塊的對(duì)外接口
let name = 'yh';
const v1= () => { return name}；
export {
name,
v1 as getName,
}; // as用于重命名對(duì)外接口名稱
8.3 import命令用于輸入其他模塊提供的功能
import { name, getName } from './lastModule'
let currentName = getName();
// name, getName 必須與lastModule文件中export的接口名稱一致
// import是靜態(tài)執(zhí)行，具有變量提升且只會(huì)執(zhí)行一次，但不能包含表達(dá)式
// 也可以用import * 來導(dǎo)入全部的接口
// import 聲明的變量是只讀的，本身不能再進(jìn)行賦值操作
8.4 export default 表示默認(rèn)輸出
const getName = () => {
return 'yh';
}
export default getName;
// 默認(rèn)輸出只能有一個(gè)，在import默認(rèn)輸出是可以任意命名
8.5 import export 復(fù)合用法及模塊的繼承
export { name, getName as default } from './lastModule';
// 導(dǎo)入name, getName 接口并輸出，其中g(shù)etName作為默認(rèn)輸出
基于復(fù)合用法實(shí)現(xiàn)模塊的繼承export * from './lastModule'
8.6 ES6模塊與CommonJS模塊的差異
CommonJS 模塊輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用。
CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口。
end
