ES6的新特性概覽

更新時(shí)間：2016年03月10日 09:48:00 作者：賴祥燃

Nick Justice是GitHub開(kāi)發(fā)者計(jì)劃的一員。早在ES6語(yǔ)言標(biāo)準(zhǔn)發(fā)布之前，他就借助像Babel這樣的轉(zhuǎn)譯器以及最新版本的瀏覽器在自己的項(xiàng)目中使用ES6特性。他認(rèn)為，ES6的新特性將極大地改變JavaScript的編寫(xiě)方式

ES6（ECMAScript 6）是即將到來(lái)的新版本JavaScript語(yǔ)言的標(biāo)準(zhǔn)，代號(hào)harmony(和諧之意，顯然沒(méi)有跟上我國(guó)的步伐，我們已經(jīng)進(jìn)入中國(guó)夢(mèng)版本了)。上一次標(biāo)準(zhǔn)的制訂還是2009年出臺(tái)的ES5。目前ES6的標(biāo)準(zhǔn)化工作正在進(jìn)行中，預(yù)計(jì)會(huì)在14年12月份放出正式敲定的版本。但大部分標(biāo)準(zhǔn)已經(jīng)就緒，且各瀏覽器對(duì)ES6的支持也正在實(shí)現(xiàn)中。

技術(shù)雖然發(fā)展太快，但是我們不停下學(xué)習(xí)的步伐，就不會(huì)被新技術(shù)淘汰，下面我們一起來(lái)學(xué)習(xí)es6的新特征吧。

箭頭操作符

如果你會(huì)C#或者Java，你肯定知道lambda表達(dá)式，ES6中新增的箭頭操作符=>便有異曲同工之妙。它簡(jiǎn)化了函數(shù)的書(shū)寫(xiě)。操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs。

我們知道在JS中回調(diào)是經(jīng)常的事，而一般回調(diào)又以匿名函數(shù)的形式出現(xiàn)，每次都需要寫(xiě)一個(gè)function，甚是繁瑣。當(dāng)引入箭頭操作符后可以方便地寫(xiě)回調(diào)了。請(qǐng)看下面的例子：

var array = [1,2,3];
// 傳統(tǒng)寫(xiě)法寫(xiě)法
array.forEach(function(v) {
console.log(v);
});
// ES6寫(xiě)法
array.forEach(v => console.log(v));

類的支持

ES6中添加了對(duì)類的支持，引入了class關(guān) 鍵字（其實(shí)class在JavaScript中一直是保留字，目的就是考慮到可能在以后的新版本中會(huì)用到，現(xiàn)在終于派上用場(chǎng)了）。JS本身就是面向?qū)ο?的，ES6中提供的類實(shí)際上只是JS原型模式的包裝?，F(xiàn)在提供原生的class支持后，對(duì)象的創(chuàng)建，繼承更加直觀了，并且父類方法的調(diào)用，實(shí)例化，靜態(tài)方法和構(gòu)造函數(shù)等概念都更加形象化。

下面代碼展示了類在ES6中的使用：

// 類的定義
class Animal {
// ES6中新型構(gòu)造器
constructor(name) {
this.name = name;
}
// 實(shí)例方法
sayName() {
console.log('My name is ' + this.name);
}
}
// 類的繼承
class Programmer extends Animal {
constructor(name) {
// 直接調(diào)用父類構(gòu)造器進(jìn)行初始化
super(name);
}
program() {
console.log("I'm coding...");
}
}
// 測(cè)試我們的類
var animal = new Animal('dummy'),
wayou = new Programmer('wayou');
animal.sayName(); // 輸出 'My name is dummy'
wayou.sayName(); // 輸出 'My name is wayou'
wayou.program(); // 輸出 'I'm coding...'

增強(qiáng)的對(duì)象字面量

對(duì)象字面量被增強(qiáng)了，寫(xiě)法更加簡(jiǎn)潔與靈活，同時(shí)在定義對(duì)象的時(shí)候能夠做的事情更多了。具體表現(xiàn)在：

1.可以在對(duì)象字面量里面定義原型

2.定義方法可以不用function關(guān)鍵字

3.直接調(diào)用父類方法

這樣一來(lái)，對(duì)象字面量與前面提到的類概念更加吻合，在編寫(xiě)面向?qū)ο蟮腏avaScript時(shí)更加輕松方便了。

// 通過(guò)對(duì)象字面量創(chuàng)建對(duì)象
var human = { 
breathe() {
console.log('breathing...');
}
};
var worker = { 
__proto__: human, // 設(shè)置此對(duì)象的原型為human, 相當(dāng)于繼承human
company: 'freelancer',
work() {
console.log('working...');
}
};
human.breathe(); // 輸出 'breathing...'
// 調(diào)用繼承來(lái)的breathe方法
worker.breathe(); // 輸出 'breathing...'

字符串模板

字符串模板相對(duì)簡(jiǎn)單易懂些。ES6中允許使用反引號(hào) ` 來(lái)創(chuàng)建字符串，此種方法創(chuàng)建的字符串里面可以包含由美元符號(hào)加花括號(hào)包裹的變量 ${vraible}。如果你使用過(guò)像C#等后端強(qiáng)類型語(yǔ)言的話，對(duì)此功能應(yīng)該不會(huì)陌生。

// 產(chǎn)生一個(gè)隨機(jī)數(shù)
var num = Math.random();
// 將這個(gè)數(shù)字輸出到console 
console.log(`your num is ${num}`);

解構(gòu)

自動(dòng)解析數(shù)組或?qū)ο笾械闹?。比如若一個(gè)函數(shù)要返回多個(gè)值，常規(guī)的做法是返回一個(gè)對(duì)象，將每個(gè)值做為這個(gè)對(duì)象的屬性返回。但在ES6中，利用解構(gòu)這一特性，可以直接返回一個(gè)數(shù)組，然后數(shù)組中的值會(huì)自動(dòng)被解析到對(duì)應(yīng)接收該值的變量中。

function getVal() {
return[1,2];
}
var [x,y] = getVal(), // 函數(shù)返回值的解構(gòu)
console.log('x:' + x + ', y:' + y); // 輸出：x:1, y:2
[name,,age] = ['wayou','male','secrect']; // 數(shù)組解構(gòu)
console.log('name:' + name + ', age:' + age); //輸出：name:wayou, age:secrect

參數(shù)默認(rèn)值，不定參數(shù)，拓展參數(shù)

默認(rèn)參數(shù)值

現(xiàn)在可以在定義函數(shù)的時(shí)候指定參數(shù)的默認(rèn)值了，而不用像以前那樣通過(guò)邏輯或操作符來(lái)達(dá)到目的了。

function sayHello(name) {
// 傳統(tǒng)的指定默認(rèn)參數(shù)的方式
var name = name || 'dude';
console.log('Hello ' + name);
} 
sayHello(); // 輸出：Hello dude
sayHello('Wayou'); // 輸出：Hello Wayou
// 運(yùn)用ES6的默認(rèn)參數(shù)
function sayHello2(name = 'dude') {
console.log(`Hello${name}`);
}
sayHello2(); // 輸出：Hello dude
sayHello2('Wayou'); // 輸出：Hello Wayou

不定參數(shù)

不定參數(shù)是在函數(shù)中使用命名參數(shù)同時(shí)接收不定數(shù)量的未命名參數(shù)。這只是一種語(yǔ)法糖，在以前的JavaScript代碼中我們可以通過(guò)arguments變量來(lái)達(dá)到這一目的。不定參數(shù)的格式是三個(gè)句點(diǎn)后跟代表所有不定參數(shù)的變量名。

比如下面這個(gè)例子中，…x代表了所有傳入add函數(shù)的參數(shù)。

// 將所有參數(shù)相加的函數(shù)
function add(...x) {
return x.reduce((m,n) => m+n);
}
// 傳遞任意個(gè)數(shù)的參數(shù)
console.log(add(1,2,3)); // 輸出：6
console.log(add(1,2,3,4,5)); // 輸出：15

拓展參數(shù)

拓展參數(shù)則是另一種形式的語(yǔ)法糖，它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過(guò)apply。

var people = ['Wayou','John','Sherlock'];
// sayHello函數(shù)本來(lái)接收三個(gè)單獨(dú)的參數(shù)人一，人二和人三
function sayHello(people1, people2, people3) {
console.log(`Hello${people1}, ${people2}, ${people3}`);
}
// 但是我們將一個(gè)數(shù)組以拓展參數(shù)的形式傳遞，它能很好地映射到每個(gè)單獨(dú)的參數(shù)
sayHello(...people); // 輸出：Hello Wayou,John,Sherlock
// 而在以前，如果需要傳遞數(shù)組當(dāng)參數(shù)，我們需要使用函數(shù)的apply方法
sayHello.apply(null, people); // 輸出：Hello Wayou,John,Sherlock

let與const 關(guān)鍵字

可以把let看成var，只是它定義的變量被限定在了特定范圍內(nèi)才能使用，而離開(kāi)這個(gè)范圍則無(wú)效。const則很直觀，用來(lái)定義常量，即無(wú)法被更改值的變量。

for (let i=0; i<2; i++) {
console.log(i); // 輸出: 0,1
}
console.log(i); // 輸出：undefined,嚴(yán)格模式下會(huì)報(bào)錯(cuò)

for of 值遍歷

我們都知道for in循環(huán)用于遍歷數(shù)組，類數(shù)組或?qū)ο螅珽S6中新引入的for of循環(huán)功能相似，不同的是每次循環(huán)它提供的不是序號(hào)而是值。

var someArray = ["a","b","c"];
for (v of someArray) {
console.log(v); // 輸出 a,b,c
}

iterator, generator

1.iterator: 它是這么一個(gè)對(duì)象，擁有一個(gè)next方法，這個(gè)方法返回一個(gè)對(duì)象{done,value}，這個(gè)對(duì)象包含兩個(gè)屬性，一個(gè)布爾類型的done和包含任意值的value

2.iterable: 這是這么一個(gè)對(duì)象，擁有一個(gè)obj[@@iterator]方法，這個(gè)方法返回一個(gè)iterator

3.generator: 它是一種特殊的iterator。反的next方法可以接收一個(gè)參數(shù)并且返回值取決與它的構(gòu)造函數(shù)（generator function）。generator同時(shí)擁有一個(gè)throw方法

4.generator函數(shù): 即generator的構(gòu)造函數(shù)。此函數(shù)內(nèi)可以使用yield關(guān)鍵字。在yield出現(xiàn)的地方可以通過(guò)generator的next或throw方法向外界傳遞值。generator 函數(shù)是通過(guò)function*來(lái)聲明的

5.yield關(guān)鍵字：它可以暫停函數(shù)的執(zhí)行，隨后可以再進(jìn)進(jìn)入函數(shù)繼續(xù)執(zhí)行

模塊

在ES6標(biāo)準(zhǔn)中，JavaScript原生支持module了。這種將JS代碼分割成不同功能的小塊進(jìn)行模塊化的概念是在一些三方規(guī)范中流行起來(lái)的，比如CommonJS和AMD模式。

將不同功能的代碼分別寫(xiě)在不同文件中，各模塊只需導(dǎo)出公共接口部分，然后通過(guò)模塊的導(dǎo)入的方式可以在其他地方使用。

// point.js
module "point" {
export class Point {
constructor(x,y) {
public x=x;
public y=y;
}
}
}
// myapp.js
// 聲明引用的模塊 
module point from "/point.js";
// 這里可以看出，盡管聲明了引用的模塊，還是可以通過(guò)指定需要的部分進(jìn)行導(dǎo)入
import Point from "point";
var origin = new Point(0,0);
console.log(origin); 
Map，Set 和 WeakMap，WeakSet

這些是新加的集合類型，提供了更加方便的獲取屬性值的方法，不用像以前一樣用hasOwnProperty來(lái)檢查某個(gè)屬性是屬于原型鏈上的呢還是當(dāng)前對(duì)象的。同時(shí)，在進(jìn)行屬性值添加與獲取時(shí)有專門的get，set方法。

// Sets 
var s = new Set();
s.add("hello").add("goodbye");
s.size === 2;
s.has("hello") === true;
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34; 
有時(shí)候我們會(huì)把對(duì)象作為一個(gè)對(duì)象的鍵用來(lái)存放屬性值，普通集合類型比如簡(jiǎn)單對(duì)象會(huì)阻止垃圾回收器對(duì)這些作為屬性鍵存在的對(duì)象的回收，有造成內(nèi)存泄漏的危險(xiǎn)。而WeakMap,WeakSet則更加安全些，這些作為屬性鍵的對(duì)象如果沒(méi)有別的變量在引用它們，則會(huì)被回收釋放掉，具體還看下面的例子：
// Weak Maps
var wm = new WeakMap();
wm.set(s, {extra: 42});
wm.size === undefined // 對(duì)象釋放了
// Weak Sets
var ws = new WeakSet();
ws.add({data: 42}); // 因?yàn)樘砑拥絯s的這個(gè)臨時(shí)對(duì)象沒(méi)有其他變量引用它，所以ws不會(huì)保存它的值，也就是說(shuō)這次添加其實(shí)沒(méi)有意思 
Proxies
Proxy可以監(jiān)聽(tīng)對(duì)象身上發(fā)生了什么事情，并在這些事情發(fā)生后執(zhí)行一些相應(yīng)的操作。一下子讓我們對(duì)一個(gè)對(duì)象有了很強(qiáng)的追蹤能力，同時(shí)在數(shù)據(jù)綁定方面也很有用處。
// 定義被偵聽(tīng)的目標(biāo)對(duì)象
var engineer = {name: 'Joe Sixpack', salary: 50};
// 定義處理程序
var interceptor = {set: function(receiver, property, value) {
console.log(property, 'is changed to', value);
receiver[property] = value;
}
};
// 創(chuàng)建代理以進(jìn)行偵聽(tīng)
engineer = Proxy(engineer, interceptor);
//做一些改動(dòng)來(lái)觸發(fā)代理
engineer.salary = 60; // 控制臺(tái)輸出：salary is changed to 60

上面代碼我已加了注釋，這里進(jìn)一步解釋。對(duì)于處理程序，是在被偵聽(tīng)的對(duì)象身上發(fā)生了相應(yīng)事件之后，處理程序里面的方法就會(huì)被調(diào)用，上面例子中我們?cè)O(shè)置了set的處理函數(shù)，表明，如果我們偵聽(tīng)的對(duì)象的屬性被更改，也就是被set了，那這個(gè)處理程序就會(huì)被調(diào)用，同時(shí)通過(guò)參數(shù)能夠得知是哪個(gè)屬性被更改，更改為了什么值。

Symbols

我們知道對(duì)象其實(shí)是鍵值對(duì)的集合，而鍵通常來(lái)說(shuō)是字符串。而現(xiàn)在除了字符串外，我們還可以用symbol這種值來(lái)做為對(duì)象的鍵。Symbol是一種基本類型，像數(shù)字，字符串還有布爾一樣，它不是一個(gè)對(duì)象。Symbol 通過(guò)調(diào)用symbol函數(shù)產(chǎn)生，它接收一個(gè)可選的名字參數(shù)，該函數(shù)返回的symbol是唯一的。之后就可以用這個(gè)返回值做為對(duì)象的鍵了。Symbol還可以用來(lái)創(chuàng)建私有屬性，外部無(wú)法直接訪問(wèn)由symbol做為鍵的屬性值。

(function() {
// 創(chuàng)建 symbol
var key = Symbol("key");
function MyClass(privateData) {
this[key] = privateData;
}
MyClass.prototype = {
doStuff: function() {
...this[key]...
}
};
})();
var c = new MyClass("hello");
c["key"] === undefined //無(wú)法訪問(wèn)該屬性，因?yàn)槭撬接械?
Math，Number，String，Object 的新API
對(duì)Math,Number,String還有Object等添加了許多新的API。
// Number
// 不同的兩個(gè)Number之間的最小的差
Number.EPSILON
// 判斷是否是整數(shù)
Number.isInteger(Infinity) // false
// 判斷是否為非數(shù)字
Number.isNaN("NaN") // false
// Math
Math.acosh(3) // 1.762747174039086
Math.hypot(3,4) // 5
Math.imul(Math.pow(2,32)-1, Math.pow(2,32)-2) // 2
// String
"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"
// Array
// 將一個(gè)類數(shù)組對(duì)象或可迭代對(duì)象轉(zhuǎn)換成真實(shí)的數(shù)組
Array.from(document.querySelectorAll('*'))
// 將它的任意類型的多個(gè)參數(shù)放在一個(gè)數(shù)組里并返回
Array.of(1,2,3)
// 將一個(gè)數(shù)組中指定區(qū)間的所有元素的值, 都替換成或者說(shuō)填充成為某個(gè)固定的值
[0,0,0].fill(7,1) // [0,7,7]
// 用來(lái)查找數(shù)組中某指定元素的索引, 如果找不到指定的元素, 則返回 -1
[1,2,3].findIndex(x => x == 2) // 1
// 返回一個(gè) Array Iterator 對(duì)象，該對(duì)象包含數(shù)組中每一個(gè)索引的鍵值對(duì)
["a","b","c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
// 返回一個(gè)數(shù)組索引的迭代器
["a","b","c"].keys() // iterator 0, 1, 2
// 返回一個(gè)新的 Array Iterator 對(duì)象，該對(duì)象包含數(shù)組每個(gè)索引的值
["a","b","c"].values() // iterator "a", "b", "c"
// Object
Object.assign(Point, {origin: new Point(0,0)}) 
Promises
Promises是處理異步操作的一種模式，之前在很多三方庫(kù)中有實(shí)現(xiàn)，比如jQuery的deferred 對(duì)象。當(dāng)你發(fā)起一個(gè)異步請(qǐng)求，并綁定了.when(), .done()等事件處理程序時(shí)，其實(shí)就是在應(yīng)用promise模式。
// 創(chuàng)建 promise
var promise = new Promise(function(resolve,reject) {
// 進(jìn)行一些異步或耗時(shí)操作
if(/*如果成功 */) {
resolve("Stuff worked!");
} else {
reject(Error("It broke"));
}
});
// 綁定處理程序
promise.then(function(result) {
// promise成功的話會(huì)執(zhí)行這里
console.log(result); // "Stuff worked!"
}, function(err) {
// promise失敗會(huì)執(zhí)行這里
console.log(err); // Error: "It broke"
});

有關(guān)ES6的新特性就給大家介紹這么多，希望對(duì)大家有所幫助！

您可能感興趣的文章: