ES全稱ECMAScript，ECMAScript是ECMA制定的標(biāo)準(zhǔn)化腳本語言八千。目前JavaScript使用的ECMAScript版本為ECMA-417吗讶。關(guān)于ECMA的最新資訊可以瀏覽 ECMA news查看。
ECMA規(guī)范最終由TC39敲定恋捆。TC39由包括瀏覽器廠商在內(nèi)的各方組成照皆，他們開會推動JavaScript提案沿著一條嚴(yán)格的發(fā)展道路前進。 從提案到入選ECMA規(guī)范主要有以下幾個階段：
- Stage 0: strawman——最初想法的提交沸停。
- Stage 1: proposal（提案）——由TC39至少一名成員倡導(dǎo)的正式提案文件膜毁，該文件包括API事例。
- Stage 2: draft（草案）——功能規(guī)范的初始版本愤钾，該版本包含功能規(guī)范的兩個實驗實現(xiàn)瘟滨。
- Stage 3: candidate（候選）——提案規(guī)范通過審查并從廠商那里收集反饋
- Stage 4: finished（完成）——提案準(zhǔn)備加入ECMAScript，但是到瀏覽器或者Nodejs中可能需要更長的時間能颁。
ES6新特性（2015）
ES6的特性比較多杂瘸，在 ES5 發(fā)布近 6 年（2009-11 至 2015-6）之后才將其標(biāo)準(zhǔn)化。兩個發(fā)布版本之間時間跨度很大伙菊，所以ES6中的特性比較多败玉。 在這里列舉幾個常用的：
- 類
- 模塊化
- 箭頭函數(shù)
- 函數(shù)參數(shù)默認(rèn)值
- 模板字符串
- 解構(gòu)賦值
- 延展操作符
- 對象屬性簡寫
- Promise
- Let與Const
1.類（class）
對熟悉Java，object-c镜硕，c#等純面向?qū)ο笳Z言的開發(fā)者來說运翼，都會對class有一種特殊的情懷。ES6 引入了class（類）兴枯，讓JavaScript的面向?qū)ο缶幊套兊酶雍唵魏鸵子诶斫狻?/p>
class Animal {
constructor(name, color) {
this.name = name;
this.color = color;
}
toString() {
console.log('name:'+ this.name + ',color:' + this.color);
}
}
var animal = new Animal('dog', 'white');
animal.toString();
console.log(animal.hasOwnProperty('name'));
console.log(animal.hasOwnProperty('toString'));
console.log(animal.__proto__.hasOwnProperty('toString'));
class Cat extends Animal {
constructor(action) {
// 如果沒有置頂consructor,默認(rèn)帶super函數(shù)的constructor將會被添加血淌、
super('cat', 'white');
this.action = action;
}
toString() {
console.log(super.toString());
}
}
var cat = new Cat('catch');
cat.toString();
console.log(cat instanceof Cat);
console.log(cat instanceof Animal);
2.模塊化(Module)
ES5不支持原生的模塊化，在ES6中模塊作為重要的組成部分被添加進來财剖。模塊的功能主要由 export 和 import 組成悠夯。每一個模塊都有自己單獨的作用域，模塊之間的相互調(diào)用關(guān)系是通過 export 來規(guī)定模塊對外暴露的接口峰伙，通過import來引用其它模塊提供的接口疗疟。同時還為模塊創(chuàng)造了命名空間，防止函數(shù)的命名沖突瞳氓。
導(dǎo)出(export)
ES6允許在一個模塊中使用export來導(dǎo)出多個變量或函數(shù)策彤。
導(dǎo)出變量
export var name = 'Rainbow'
ES6不僅支持變量的導(dǎo)出栓袖，也支持常量的導(dǎo)出。
export const sqrt =Math.sqrt;//導(dǎo)出常量
ES6將一個文件視為一個模塊店诗，上面的模塊通過 export 向外輸出了一個變量裹刮。一個模塊也可以同時往外面輸出多個變量。
var name = 'Rainbow';
var age = '24';
export {
name,
age
};
導(dǎo)出函數(shù)
export function myModule (someArg) {
return someArg;
}
導(dǎo)入(import)
定義好模塊的輸出以后就可以在另外一個模塊通過import引用庞瘸。
import myModule from 'myModule';
import { name ,age } from 'test';
- 一條import 語句可以同時導(dǎo)入默認(rèn)函數(shù)和其它變量捧弃。
如：import defaultMethod, { otherMethod } from 'xxx.js';- 可以為變量起別名
如：import { otherMethod as om } from 'xxx.js'
3.箭頭（Arrow）函數(shù)
這是ES6中最令人激動的特性之一。 =>不只是關(guān)鍵字function的簡寫擦囊，它還帶來了其它好處违霞。箭頭函數(shù)與包圍它的代碼共享同一個 this,能幫你很好的解決this的指向問題。有經(jīng)驗的JavaScript開發(fā)者都熟悉諸如 var self = this;或 var that =this這種引用外圍this的模式瞬场。但借助 =>买鸽，就不需要這種模式了。
箭頭函數(shù)的結(jié)構(gòu)
箭頭函數(shù)的箭頭=>之前是一個空括號贯被、單個的參數(shù)名眼五、或用括號括起的多個參數(shù)名，而箭頭之后可以是一個表達式（作為函數(shù)的返回值）彤灶，或者是用花括號括起的函數(shù)體（需要自行通過return來返回值看幼，否則返回的是undefined）。
() => 1;
(a, b) => a + b;
() => ([1, 2]);
() => ({
a: 1,
b: 2
});
() => {
alert()
}
setTimeout(() => {
// to do
}, 500)
不論是箭頭函數(shù)還是bind幌陕，每次被執(zhí)行都返回的是一個新的函數(shù)引用诵姜，因此如果你還需要函數(shù)的引用去做一些別的事情（譬如卸載監(jiān)聽器），那么你必須自己保存這個引用
卸載監(jiān)聽器時的陷阱
錯誤的做法
class PauseMenu extends React.Component {
componentWillMount() {
AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
}
componentWillUnmount(){
AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
}
onAppPaused(event){}
}
正確的做法
class PauseMenu extends React.Component {
constructor(props) {
super(props)
this._onAppPaused = this.onAppPaused.bind(this)
}
componentWillMount() {
AppStateIOS.addEventListener('change', this._onAppPaused);
}
componentWillUnmount(){
AppStateIOS.removeEventListener('change', this._onAppPaused);
}
onAppPaused(event){}
}
除上述的做法外苞轿，babel最新版本允許我們還可以這樣做：
class PauseMenu extends React.Component {
constructor(props) {
super(props)
}
componentWillMount() {
AppStateIOS.addEventListener('change', this.onAppPaused);
}
componentWillUnmount(){
AppStateIOS.removeEventListener('change', this.onAppPaused);
}
onAppPaused = (event) => {}
}
需要注意的是：不論是bind還是箭頭函數(shù)茅诱，每次被執(zhí)行都返回的是一個新的函數(shù)引用，因此如果你還需要函數(shù)的引用去做一些別的事情（譬如卸載監(jiān)聽器）搬卒，那么你必須自己保存這個引用。
4.ES6支持在定義函數(shù)的時候為其設(shè)置默認(rèn)值：
function foo(width= 20, height = 50) {
console.log(width, height)
}
ES5設(shè)置默認(rèn)值：
function foo(width, height) {
var w = width || 20;
var h = height || 50;
console.log(w, h)
}
這樣寫一般沒問題翎卓，但當(dāng) 參數(shù)的布爾值為false時契邀，就會有問題了。比如失暴，我們這樣調(diào)用foo函數(shù)：
foo(0,'');
因為 0的布爾值為false坯门，這樣width的取值將是20。
所以說逗扒， 函數(shù)參數(shù)默認(rèn)值不僅能是代碼變得更加簡潔而且能規(guī)避一些問題古戴。
5.模板字符串
ES6支持 模板字符串，使得字符串的拼接更加的簡潔矩肩、直觀现恼。
- 不使用模板字符串：
var str = 'hello, ' + name + ', my name is ' + myName;
- 使用模板字符串：
let str = `hello, ${name}, my name is ${myName}`;
在ES6中通過 ${}就可以完成字符串的拼接，只需要將變量放在大括號之中。
解構(gòu)賦值語法是JavaScript的一種表達式叉袍，可以方便的從數(shù)組或者對象中快速提取值賦給定義的變量始锚。
6.解構(gòu)賦值
獲取數(shù)組中的值
從數(shù)組中獲取值并賦值到變量中，變量的順序與數(shù)組中對象順序?qū)?yīng)喳逛。
var foo = ["one", "two", "three", "four"];
var [one, two, three] = foo;
console.log(one);
console.log(two);
console.log(three);
var [first, , , last] = foo;
console.log(first);
console.log(last);
var a, b; [a, b] = [1, 2];
console.log(a);
console.log(b);
如果沒有從數(shù)組中的獲取到值瞧捌，你可以為變量設(shè)置一個默認(rèn)值。
var a, b; [a = 5, b = 7] = [1];
console.log(a);
console.log(b);
通過解構(gòu)賦值可以方便的交換兩個變量的值润文。
var a = 1;
var b = 3; [a, b] = [b, a];
console.log(a);
console.log(b);
獲取對象中的值
const student = {
name: 'Ming',
age: '18',
city: 'Shanghai'
};
const {
name,
age,
city
} = student;
console.log(name);
console.log(age);
console.log(city);
7.延展操作符(Spread operator)
延展操作符...可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時, 將數(shù)組表達式或者string在語法層面展開姐呐；還可以在構(gòu)造對象時, 將對象表達式按key-value的方式展開。
語法
- 函數(shù)調(diào)用：
myFunction(...iterableObj);
- 數(shù)組構(gòu)造或字符串：
[...iterableObj, '4', ...'hello', 6];
- 構(gòu)造對象時,進行克隆或者屬性拷貝（ECMAScript 2018規(guī)范新增特性）：
let objClone = { ...obj };
應(yīng)用場景
- 在函數(shù)調(diào)用時使用延展操作符
function sum(x, y, z) {
return x + y + z
}
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers));
console.log(sum(...numbers));
- 構(gòu)造數(shù)組
沒有展開語法的時候典蝌，只能組合使用 push皮钠，splice，concat 等方法赠法，來將已有數(shù)組元素變成新數(shù)組的一部分麦轰。有了展開語法, 構(gòu)造新數(shù)組會變得更簡單、更優(yōu)雅：
const stuendts = ['Jine', 'Tom'];
const persons = ['Tony', ...stuendts, 'Aaron', 'Anna'];
conslog.log(persions)
和參數(shù)列表的展開類似, ... 在構(gòu)造字?jǐn)?shù)組時, 可以在任意位置多次使用砖织。
- 數(shù)組拷貝
var arr = [1, 2, 3];
var arr2 = [...arr];
arr2.push(4);
console.log(arr2)
展開語法和 Object.assign() 行為一致, 執(zhí)行的都是淺拷貝(只遍歷一層)款侵。
- 連接多個數(shù)組
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];
var arr4 = arr1.concat(arr2);
在ECMAScript 2018中延展操作符增加了對對象的支持
var obj1 = {
foo: 'bar',
x: 42
};
var obj2 = {
foo: 'baz',
y: 13
};
var clonedObj = { ...obj1 };
var mergedObj = { ...obj1, ...obj2 };
在React中的應(yīng)用
通常我們在封裝一個組件時，會對外公開一些 props 用于實現(xiàn)功能侧纯。大部分情況下在外部使用都應(yīng)顯示的傳遞 props 新锈。但是當(dāng)傳遞大量的props時，會非常繁瑣眶熬，這時我們可以使用 ...(延展操作符,用于取出參數(shù)對象的所有可遍歷屬性) 來進行傳遞妹笆。
一般情況下我們應(yīng)該這樣寫
<CustomComponent name='Jine' age={21}/>
- 使用 ... ，等同于上面的寫法
const params = {
name: 'Jine',
age: 21
}
< CustomComponent {...params} />
- 配合解構(gòu)賦值避免傳入一些不需要的參數(shù)
var params = {
name: '123',
title: '456',
type: 'aaa'
}
var {
type, ...other
} = params;
<CustomComponent type = 'normal'number = {2} {...other} />
<CustomComponent type='normal'number={2}name='123'title='456' />
8.對象屬性簡寫
在ES6中允許我們在設(shè)置一個對象的屬性的時候不指定屬性名娜氏。
- 不使用ES6
const name = 'Ming',
age = '18',
city = 'Shanghai';
const student = {
name: name,
age: age,
city: city
};
console.log(student);
對象中必須包含屬性和值拳缠，顯得非常冗余。
- 使用ES6
const name = 'Ming',
age = '18',
city = 'Shanghai';
const student = {
name,
age,
city
};
console.log(student);
對象中直接寫變量贸弥，非常簡潔窟坐。
9.Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案callback更加的優(yōu)雅绵疲。它最早由社區(qū)提出和實現(xiàn)的哲鸳，ES6 將其寫進了語言標(biāo)準(zhǔn)，統(tǒng)一了用法盔憨，原生提供了Promise對象徙菠。
- 不使用ES6
嵌套兩個setTimeout回調(diào)函數(shù)：
setTimeout(function() {
console.log('Hello');
setTimeout(function() {
console.log('Hi')
},
1000)
},
1000);
- 使用ES6
var waitSecond = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
});
waitSecond.then(function() {
console.log("Hello");
return waitSecond
}).then(function() {
console.log("Hi")
});
10.支持let與const
在之前JS是沒有塊級作用域的，const與let填補了這方便的空白郁岩，const與let都是塊級作用域婿奔。
- 使用var定義的變量為函數(shù)級作用域：
{
var a = 10
}
console.log(a);
- 使用let與const定義的變量為塊級作用域
{
let a = 10
}
console.log(a); // 報錯
下一篇文章會整理ES7缺狠、ES8、ES9脸秽、ES10新特性儒老，敬請關(guān)注。
