ES6中JavaScript新特性有哪些

發(fā)布時(shí)間：2021-11-20 14:04:22 來(lái)源：億速云閱讀：163 作者：iii 欄目：開(kāi)發(fā)技術(shù)

本篇內(nèi)容介紹了“ES6中JavaScript新特性有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

ES.next目前的實(shí)現(xiàn)情況

可以通過(guò)查看Juriy Zaytsev總結(jié)的ECMAScript
6兼容性表格,和Mozilla的ES6實(shí)現(xiàn)情況頁(yè)面以及通過(guò)使用現(xiàn)代瀏覽器的最新版本(比如Chrome
Canary, Firefox
Aurora),來(lái)了解目前有哪些已經(jīng)實(shí)現(xiàn)了的ES.next特性.

在Canary中,記得要進(jìn)入chrome:flags打開(kāi)'啟用實(shí)驗(yàn)性JavaScript'選項(xiàng)以激活所有最新的的JavaScript特性.

另外,許多ES.next特性還可以通過(guò)使用Google的Traceur轉(zhuǎn)換編譯器(這里有一些單元測(cè)試的例子)來(lái)體驗(yàn),以及一些shim項(xiàng)目比如ES6-Shim和Harmony
Collections,也實(shí)現(xiàn)了不少新特性.

在Node.js(V8)中使用--harmony命令行選項(xiàng)可以開(kāi)啟一些試驗(yàn)性質(zhì)的ES.next特性,包括塊級(jí)作用域,WeakMap等等.

模塊

我們已經(jīng)習(xí)慣了將我們的代碼分割成為更加便于管理的功能塊.在ES.next中,一個(gè)模塊(module)是就是一個(gè)module聲明,以及包含在該聲明中的一組代碼.模塊可以用內(nèi)聯(lián)方式(inline)聲明,也可以引入一個(gè)外部的模塊文件.一個(gè)名為Car的內(nèi)聯(lián)模塊的寫(xiě)法大致如下:

module Car {
// 導(dǎo)入 …
// 導(dǎo)出 …
}

一個(gè)模塊實(shí)例就是一個(gè)被求過(guò)值的模塊,它已經(jīng)被鏈接到了其他的模塊身上或者已經(jīng)有了詞法上的封裝數(shù)據(jù).下面是一個(gè)模塊實(shí)例的例子:

module myCar at "car.js";

module聲明可以使用在如下上下文中:

module UniverseTest {};
module Universe { module MilkyWay {} };
module MilkyWay = 'Universe/MilkyWay';
module SolarSystem = Universe.MilkyWay.SolarSystem;
module MySystem = SolarSystem;

一個(gè)export聲明聲明了一個(gè)可以被其他模塊看到的局部函數(shù)或變量.

module Car {
// 內(nèi)部變量
var licensePlateNo = '556-343';
// 暴露到外部的變量和函數(shù)
export function drive(speed, direction) {
console.log('details:', speed, direction);
}
export module engine{
export function check() { }
}
export var miles = 5000;
export var color = 'silver';
};

一個(gè)模塊可以使用import導(dǎo)入任何它所需要的其他模塊.導(dǎo)入模塊會(huì)讀取被導(dǎo)入模塊的所有可導(dǎo)出數(shù)據(jù)(比如上面的drive(), miles等),但不能修改它們.導(dǎo)出的變量或函數(shù)可以被重命名.

再次用到上面導(dǎo)出相關(guān)的例子,我們現(xiàn)在可以有選擇性的導(dǎo)入一些模塊中的功能.

比如我們可以導(dǎo)入drive():

import drive from Car;

還可以可以同時(shí)導(dǎo)入drive()和miles:

import {drive, miles} from Car;

下面,我們要講一下模塊加載器API的概念.模塊加載器能夠讓我們動(dòng)態(tài)的加載所需要的腳本.類似于import, 我們可以使用被導(dǎo)入模塊中的所有用export聲明過(guò)的東西.

// Signature: load(moduleURL, callback, errorCallback)
Loader.load('car.js', function(car) {
console.log(car.drive(500, 'north'));
}, function(err) {
console.log('Error:' + err);
});

load()接受三個(gè)參數(shù):

moduleURL: 表示一個(gè)模塊URL的字符串 (比如 "car.js")
callback: 一個(gè)回調(diào)函數(shù),接受模塊加載,編譯,以及執(zhí)行后的輸出結(jié)果
errorCallback: 一個(gè)回調(diào)函數(shù),在加載或編譯期間發(fā)生錯(cuò)誤時(shí)調(diào)用

關(guān)于類(class)

我不打算在本文中過(guò)多的講ES.next中的類,如果你想知道類和模塊將會(huì)有什么聯(lián)系,Alex
Russell曾經(jīng)寫(xiě)過(guò)一個(gè)很好的例子來(lái)說(shuō)明這件事.

JavaScript中有了類,并不意味著要把JavaScript變成Java.ES.next中的類只是我們已經(jīng)熟悉的語(yǔ)義(比如函數(shù),原型)的另外一種聲明方式

下面是用來(lái)定義一個(gè)widget的ES.next代碼:

module widgets {
// ...
class DropDownButton extends Widget {
constructor(attributes) {
super(attributes);
this.buildUI();
}
buildUI() {
this.domNode.onclick = function(){
// ...
};
}
}
}

下面是去糖(de-sugared)后的做法,也就是我們目前正在使用的方法:

var widgets = (function(global) {
// ...
function DropDownButton(attributes) {
Widget.call(this, attributes);
this.buildUI();
}
DropDownButton.prototype = Object.create(Widget.prototype, {
constructor: { value: DropDownButton },
buildUI: {
value: function(e) {
this.domNode.onclick = function(e) {
// ...
}
}
}
});
})(this);

ES.next的寫(xiě)法的確讓代碼變的更可讀.這里的class也就相當(dāng)于是function,至少是做了目前我們用function來(lái)做的一件事.如果你已經(jīng)習(xí)慣并且也喜歡用JavaScript中的函數(shù)和原型,這種未來(lái)的語(yǔ)法糖也就不用在意了.

這些模塊如何和AMD配合使用?

ES.next中的模塊是朝著正確的方向走了一步嗎?也許是吧.我自己的看法是:看相關(guān)的規(guī)范文檔是一碼事,實(shí)際上使用起來(lái)又是另一碼事.在Harmonizr,Require
HM和Traceur中可以體驗(yàn)新的模塊語(yǔ)法,你會(huì)非常容易的熟悉這些語(yǔ)法,該語(yǔ)法可能會(huì)覺(jué)得有點(diǎn)像Python的感覺(jué)(比如import語(yǔ)句).

我認(rèn)為,如果一些功能有足夠廣泛的使用需求(比如模塊),那么平臺(tái)(也就是瀏覽器)就應(yīng)該原生支持它們.而且,并不是只有我一個(gè)人這么覺(jué)得. James Burke,發(fā)明了AMD和RequireJS的人,也曾經(jīng)說(shuō)過(guò):

我想,AMD和RequireJS應(yīng)該被淘汰了.它們的確解決了一個(gè)實(shí)際存在的問(wèn)題,但更理想的情況是,語(yǔ)言和運(yùn)行環(huán)境應(yīng)該內(nèi)置類似的功能.模塊的原生支持應(yīng)該能夠覆蓋RequireJS 80%的使用需求,從這一點(diǎn)上說(shuō),我們不再需要使用任何用戶態(tài)(userland)的模塊加載庫(kù)了,至少在瀏覽器中是這樣.

不過(guò)James的質(zhì)疑是ES.next的模塊是否是一個(gè)足夠好的解決方案,他曾在六月份談到過(guò)自己關(guān)于ES.next中模塊的一些想法 ES6
Modules: Suggestions for improvement以及再后來(lái)的一篇文章Why
not AMD?.

Isaac Schlueter前段時(shí)間也寫(xiě)過(guò)一些自己的想法,講到了ES6的模塊有哪些不足.嘗試一下下面這些選項(xiàng),看看你的想法如何.

兼容目前引擎的Module實(shí)現(xiàn)

Traceur
demo
Harmonizr
Require
HM
ES6
Module Loader

Object.observe()

通過(guò)Object.observe,我們可以觀察指定的對(duì)象,并且在該對(duì)象被修改時(shí)得到通知.這種修改操作包括屬性的添加,更新,刪除以及重新配置.

屬性觀察是我們經(jīng)常會(huì)在MVC框架中看到的行為,它是數(shù)據(jù)綁定的一個(gè)重要組件,AngularJS和Ember.js都有自己的解決方案.

這是一個(gè)非常重要的新功能,它不僅比目前所有框架的同類實(shí)現(xiàn)性能要好,而且還能更容易的觀察純?cè)鷮?duì)象.

// 一個(gè)簡(jiǎn)單的對(duì)象可以作為一個(gè)模塊來(lái)使用
var todoModel = {
label: 'Default',
completed: false
};
// 我們觀察這個(gè)對(duì)象
Object.observe(todoModel, function(changes) {
changes.forEach(function(change, i) {
console.log(change);
/*
哪個(gè)屬性被改變了? change.name
改變類型是什么? change.type
新的屬性值是什么? change.object[change.name]
*/
});
});
// 使用時(shí):
todoModel.label = 'Buy some more milk';
/*
label屬性被改變了
改變類型是屬性值更新
當(dāng)前屬性值為'Buy some more milk'
*/
todoModel.completeBy = '01/01/2013';
/*
completeBy屬性被改變了
改變類型是屬性被添加
當(dāng)前屬性值為'01/01/2013'
*/
delete todoModel.completed;
/*
completed屬性被改變了
改變類型是屬性被刪除
當(dāng)前屬性值為undefined
*/

Object.observe馬上將會(huì)在Chrome Canary中實(shí)現(xiàn)(需要開(kāi)啟"啟用實(shí)驗(yàn)性JavaScript"選項(xiàng)).

兼容目前引擎的Object.observe()實(shí)現(xiàn)

Chromium特殊版本
Watch.JS 可以實(shí)現(xiàn)類似的功能,但它并不是實(shí)現(xiàn)Object.observe的polyfill或shim

Rick Waldron的這篇文章有關(guān)于Object.observe更詳細(xì)的介紹.

譯者注:Firefox很早就有了一個(gè)類似的東西:Object.prototype.watch.

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

默認(rèn)參數(shù)值(Default
parameter values)的作用是:在一些形參沒(méi)有被顯式傳值的情況下,使用默認(rèn)的初始化值來(lái)進(jìn)行初始化.這就意味著我們不再需要寫(xiě)類似options = options || {};這樣的語(yǔ)句了.

該語(yǔ)法形式就是把一個(gè)初始值賦值給對(duì)應(yīng)的形參名:

function addTodo(caption = 'Do something') {
console.log(caption);
}
addTodo(); // Do something

擁有默認(rèn)參數(shù)值的形參只能放在形參列表的最右邊:

function addTodo(caption, order = 4) {}
function addTodo(caption = 'Do something', order = 4) {}
function addTodo(caption, order = 10, other = this) {}

已經(jīng)實(shí)現(xiàn)該特性的瀏覽器: Firefox 18+

譯者注:Firefox 15就已經(jīng)實(shí)現(xiàn)了默認(rèn)參數(shù)值,作者所說(shuō)的18只是說(shuō)18支持,并不是說(shuō)18是第一個(gè)支持的版本.包括本文下面將要提到的chrome 24+等等,都有這個(gè)問(wèn)題.

塊級(jí)作用域

塊級(jí)作用域引入了兩種新的聲明形式,可以用它們定義一個(gè)只存在于某個(gè)語(yǔ)句塊中的變量或常量.這兩種新的聲明關(guān)鍵字為:

let: 語(yǔ)法上非常類似于var, 但定義的變量只存在于當(dāng)前的語(yǔ)句塊中
const: 和let類似,但聲明的是一個(gè)只讀的常量

使用let代替var可以更容易的定義一個(gè)只在某個(gè)語(yǔ)句塊中存在的局部變量,而不用擔(dān)心它和函數(shù)體中其他部分的同名變量有沖突.在let語(yǔ)句內(nèi)部用var聲明的變量和在let語(yǔ)句外部用var聲明的變量沒(méi)什么差別,它們都擁有函數(shù)作用域,而不是塊級(jí)作用域.

譯者注:以防讀者看不懂,我用一個(gè)例子解釋一下上面的這句話,是這樣的:

let(var1 = 1) {
    alert(var1);      //彈出1,var1是個(gè)塊級(jí)作用域變量var var2 = 2;
}
var var3 = 3;
alert(var2);          //彈出2,雖然var2是在let語(yǔ)句內(nèi)部聲明的,但它仍然是個(gè)函數(shù)作用域內(nèi)的變量,因?yàn)槭褂玫氖莢ar聲明alert(var3);          //彈出3alert(var1);          //拋出異常

var x = 8;
var y = 0;
let (x = x+10, y = 12) {
console.log(x+y); // 30
}
console.log(x + y); // 8

實(shí)現(xiàn)let的瀏覽器: Firefox 18+, Chrome 24+

實(shí)現(xiàn)const的瀏覽器: Firefox 18+, Chrome 24+, Safari 6+, WebKit, Opera 12+

譯者注:Firefox很久以前就支持了let和const,但這兩個(gè)舊的實(shí)現(xiàn)都是依據(jù)了當(dāng)年的ES4草案.和目前的ES6草案有些區(qū)別,比如ES4中用const聲明的常量并沒(méi)有塊級(jí)作用域(和var一樣,只是值不可變),let也有一些細(xì)微差別,就不說(shuō)了.由于很少人使用舊版的Firefox(但我的主瀏覽器是FF3.6!),即使未來(lái)ES6和ES4中的一些東西有沖突,我們基本也可以忽略.

Map

我想大部分讀者已經(jīng)熟悉了映射的概念,因?yàn)槲覀冞^(guò)去一直都是用純對(duì)象來(lái)實(shí)現(xiàn)映射的.Map允許我們將一個(gè)值映射到一個(gè)唯一的鍵上,然后我們就可以通過(guò)這個(gè)鍵獲取到對(duì)應(yīng)的值,而不需要擔(dān)心用普通對(duì)象實(shí)現(xiàn)映射時(shí)因原型繼承而帶來(lái)的問(wèn)題.

使用set()方法,可以在map中添加一個(gè)新的鍵值對(duì),使用get()方法,可以獲取到所存儲(chǔ)的值.Map對(duì)象還有其他三個(gè)方法:

has(key) : 一個(gè)布爾值,表明某個(gè)鍵是否存在于map中
delete(key) : 刪除掉map中指定的鍵
size() : 返回map中鍵值對(duì)的個(gè)數(shù)

let m = new Map();
m.set('todo', 'todo'.length); // "todo" → 4
m.get('todo'); // 4
m.has('todo'); // true
m.delete('todo'); // true
m.has('todo'); // false

已經(jīng)實(shí)現(xiàn)Map的瀏覽器: Firefox 18+

Nicholas Zakas的這篇文章有關(guān)于Map更詳細(xì)的介紹.

兼容目前引擎的Map實(shí)現(xiàn)

ES6
Shim
Harmony
Collections

譯者注:我翻譯過(guò)尼古拉斯的這篇文章:[譯]ECMAScript
6中的集合類型,第二部分:Map.
作者可能不知道,10月份的ES6草案中,Map.prototype.size和Set.prototype.size都從size()方法改成size訪問(wèn)器屬性了.同時(shí)Map對(duì)象新添加的方法還有很多,clear()用來(lái)清空一個(gè)map,forEach()用來(lái)遍歷一個(gè)map,還有items(),keys(),values()等.Set對(duì)象也類似,有不少作者沒(méi)提到的方法,下面的Set小節(jié)我就不指出了.
另外,在ES5中,在把對(duì)象當(dāng)成映射來(lái)使用的時(shí)候,為了防止原型繼承帶來(lái)的問(wèn)題(比如在twitter中,@__proto__能讓瀏覽器卡死),可以用var hash = Object.create(null)代替var hash = {};

Set

正如Nicholas Zakas在他的文章中所說(shuō),對(duì)于那些接觸過(guò)Ruby和Python等其他語(yǔ)言的程序員來(lái)說(shuō),Set并不是什么新東西,但它的確是在JavaScript中一直都缺少的特性.

任何類型的數(shù)據(jù)都可以存儲(chǔ)在一個(gè)set中,但每個(gè)值只能存儲(chǔ)一次(不能重復(fù)).利用Set可以很方便的創(chuàng)建一個(gè)不包含任何重復(fù)值的有序列表.

add(value) – 向set中添加一個(gè)值.
delete(value) – 從set中刪除value這個(gè)值.
has(value) – 返回一個(gè)布爾值,表明value這個(gè)值是否存在于這個(gè)set中.

let s = new Set([1, 2, 3]); // s有1, 2,
3三個(gè)元素.
s.has(-Infinity); // false
s.add(-Infinity); // s有1, 2, 3,
-Infinity四個(gè)元素.
s.has(-Infinity); // true
s.delete(-Infinity); // true
s.has(-Infinity); // false

Set對(duì)象的一個(gè)作用是用來(lái)降低過(guò)濾操作(filter方法)的復(fù)雜度.比如:

function unique(array) {
var seen = new Set;
return array.filter(function (item) {
if (!seen.has(item)) {
seen.add(item);
return true;
}
});
}

這個(gè)利用Set來(lái)進(jìn)行數(shù)組去重的函數(shù)的復(fù)雜度為O(n).而其他現(xiàn)有數(shù)組去重方法的復(fù)雜度幾乎都為O(n^2).

已經(jīng)實(shí)現(xiàn)Set的瀏覽器: Firefox 18, Chrome 24+.

Nicholas Zakas的這篇文章有關(guān)于Set更詳細(xì)的介紹.

兼容目前引擎的Set實(shí)現(xiàn)

ES6
Shim
Harmony
Collections

譯者注:我翻譯過(guò)尼古拉斯的這篇文章:[譯]ECMAScript
6中的集合類型,第一部分:Set.
如果讓我來(lái)實(shí)現(xiàn)一個(gè)ES6下的數(shù)組去重函數(shù)的話,我會(huì)這么寫(xiě):
function unique(array) {   
return [v for(v of Set(array))]
}
該函數(shù)使用到了ES6中的for-of遍歷,以及數(shù)組推導(dǎo)式.不過(guò)效率比上面使用filter去重的方法稍微差點(diǎn).Firefox最新版中已經(jīng)可以執(zhí)行這個(gè)函數(shù).
另外,借助于下面將會(huì)提到的Array.from方法,還有更簡(jiǎn)單高效的寫(xiě)法:
>Array.from(new Set([ 1, 1, 2, 2, 3, 4 ]));
[1,2,3,4]
甚至,借助于ES6中的展開(kāi)(spread)操作,還有可能這樣實(shí)現(xiàn):
>[ ... new Set([ 1, 1, 2, 2, 3, 4 ]) ];
[1,2,3,4]

WeakMap

WeakMap的鍵只能是個(gè)對(duì)象值,而且該鍵持有了所引用對(duì)象的弱引用,以防止內(nèi)存泄漏的問(wèn)題.這就意味著,如果一個(gè)對(duì)象除了WeakMap的鍵以外沒(méi)有任何其他的引用存在的話,垃圾回收器就會(huì)銷毀這個(gè)對(duì)象.

WeakMap的另外一個(gè)特點(diǎn)是我們不能遍歷它的鍵,而Map可以.

let m = new WeakMap();
m.set('todo', 'todo'.length); //
異常,鍵必須是個(gè)對(duì)象值!
// TypeError: Invalid value used as weak map key
m.has('todo'); //
同樣異常!
// TypeError: Invalid value used as weak map key
let wmk = {};
m.set(wmk, 'thinger'); // wmk → 'thinger'
m.get(wmk); // 'thinger'
m.has(wmk); // true
m.delete(wmk); // true
m.has(wmk); // false

已經(jīng)實(shí)現(xiàn)WeakMap的瀏覽器: Firefox 18+, Chrome 24+.

兼容目前引擎的WeakMap實(shí)現(xiàn)

Harmony
Collections

Nicholas Zakas的這篇文章有關(guān)于WeakMap更詳細(xì)的介紹.

譯者注:我翻譯過(guò)尼古拉斯的這篇文章:[譯]ECMAScript
6中的集合類型,第三部分:WeakMap

代理

代理(Proxy)API允許你創(chuàng)建一個(gè)屬性值在運(yùn)行期間動(dòng)態(tài)計(jì)算的對(duì)象.還可以利用代理API"鉤入"其他的對(duì)象,實(shí)現(xiàn)例如打印記錄和賦值審核的功能.

var obj = {foo: "bar"};
var proxyObj = Proxy.create({
get: function(obj, propertyName) {
return 'Hey, '+ propertyName;
}
});
console.log(proxyObj.Alex); // "Hey, Alex"

可以看看Nicholas Zakas的這篇文章和這個(gè)例子.

實(shí)現(xiàn)代理API的瀏覽器: Firefox 18+, Chrome 24+

譯者注:作者不知道的是,一共有過(guò)兩個(gè)代理API的提案,一個(gè)是舊的Catch-all
Proxies,一個(gè)是新的直接代理(Direct
Proxies).前者已被廢棄.兩者的區(qū)別在這里.V8(Chrome和Node.js)實(shí)現(xiàn)的是前者,Firefox18及之后版本實(shí)現(xiàn)的是后者(17及之前版本實(shí)現(xiàn)的是前者).尼古拉斯在2011年寫(xiě)的文章也應(yīng)該是過(guò)時(shí)的.

一些新的API

Object.is

Object.is是一個(gè)用來(lái)比較兩個(gè)值是否相等的函數(shù).該函數(shù)和===最主要的區(qū)別是在對(duì)待特殊值NaN與自身以及正零與負(fù)零之間的比較上.Object.is的判斷結(jié)果是:NaN與另外一個(gè)NaN是相等的,以及+0和-0是不等的.

Object.is(0, -0); // false
Object.is(NaN, NaN); // true
0 === -0; // true
NaN === NaN; // false

實(shí)現(xiàn)了Object.is的瀏覽器: Chrome 24+

兼容目前引擎的Object.is實(shí)現(xiàn)

ES6
Shim

譯者注:Object.is方法和嚴(yán)格相等===運(yùn)算符的區(qū)別體現(xiàn)在ES標(biāo)準(zhǔn)內(nèi)部就是SameValue算法和嚴(yán)格相等比較算法的區(qū)別.

譯者注:如果我沒(méi)有理解錯(cuò)這條BE的推特的話,Object.is要改名成為Object.sameValue了.

Array.from

Array.from: 將參數(shù)中的類數(shù)組(array-like)對(duì)象(比如arguments, NodeList, DOMTokenList (classList屬性就是這個(gè)類型), NamedNodeMap (attributes屬性就是這個(gè)類型))轉(zhuǎn)換成數(shù)組并返回,比如轉(zhuǎn)換一個(gè)純對(duì)象:

Array.from({
0: 'Buy some milk',
1: 'Go running',
2: 'Pick up birthday gifts',
length: 3
});

再比如轉(zhuǎn)換一個(gè)DOM節(jié)點(diǎn)集合:

var divs = document.querySelectorAll('div');
Array.from(divs);
// [<div class="some classes" data-info="12"></div>, <div data-info="10"></div>]
Array.from(divs).forEach(function(node) {
console.log(node);
});

“ES6中JavaScript新特性有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)