ES6的一些有用的小特性

Alone381發表於2018-05-16

1.Module

Module 是 ES6 的新特性,是語言層面對模組化的支援。

ES6的一些有用的小特性

注:與之前模組載入機制不同,Module 是動態的載入,匯入的是變數的 只讀引用 ,而不是拷貝

2.Symbol

特點:
symbol 是一個 “新” 的 基礎資料型別 ;從 ES6 起,JavaScript 的 基礎資料型別 變為:string, number, boolean, null, undefined, symbol
symbol 可以用作 Object 的 key
symbol 存在全域性作用域,利用 Symbol.for(key) 方法,可以建立(全域性作用域無指定鍵)或獲取全域性作用域內的 symbol ;利用 Symbol.keyFor(sym) 方法,可以獲取指定 symbol 的鍵
JavaScript 內部使用了很多內建 symbol ,作為特殊的鍵,來實現一些內部功能;例如 Symbol.iterator 用於標示物件的迭代器
例子如下:

ES6的一些有用的小特性

3.lterator和For..Of

遍歷器(Iterator)它是一種介面,為各種不同的資料結構提供統一的訪問機制。任何資料結構只要部署Iterator介面,就可以完成遍歷操作(即依次處理該資料結構的所有成員)。
Iterator的作用有三個:
一是為各種資料結構,提供一個統一的、簡便的訪問介面;
二是使得資料結構的成員能夠按某種次序排列;
三是ES6創造了一種新的遍歷命令for…of迴圈,Iterator介面主要供for…of消費。
請看例子:

ES6的一些有用的小特性

ES6的一些有用的小特性

String, Array, Map, Set等是原生可迭代物件,因為他們都在原型(prototype)物件中實現了 Symbol.iterator 鍵對應的方法
for…of 是物件迭代器的遍歷,而 for…in 是物件中 可列舉 值的遍歷

4.Map和set

Object本質上是鍵值對的集合(Hash結構),但是傳統上只能用字串當作鍵。
Map類似於物件,也是鍵值對的集合,但是“鍵”的範圍不限於字串,各種型別的值(包括物件)都可以當作鍵。
Set它類似於陣列,但是成員的值都是唯一的,沒有重複的值。
繼續看例子:

ES6的一些有用的小特性

5.Proxy和Reflect

超程式設計
超程式設計是指的是開發人員對 “語言本身進行程式設計”。一般是程式語言暴露了一些 API,供開發人員來操作語言本身的某些特性。ES6 兩個新特性 Proxy 和 Reflect 是 JavaScript 關於物件超程式設計能力的擴充套件。
Proxy 可以 “代理” 物件的原生行為,替換為執行自定義行為。
Proxy 可以理解成,在目標物件之前架設一層“攔截”,外界對該物件的訪問,都必須先通過這層攔截,因此提供了一種機制,可以對外界的訪問進行過濾和改寫。Proxy 這個詞的原意是代理,用在這裡表示由它來“代理”某些操作,可以譯為“代理器”。繼續看例子:

ES6的一些有用的小特性

注:Reflect物件的方法與Proxy物件的方法一一對應,只要是Proxy物件的方法,就能在Reflect物件上找到對應的方法。這就讓Proxy物件可以方便地呼叫對應的Reflect方法,完成預設行為,作為修改行為的基礎。也就是說,不管Proxy怎麼修改預設行為,你總可以在Reflect上獲取預設行為。

6.Promise,Generator,Async-Await

非同步程式設計
在 ES6 之前,JavaScript 的非同步程式設計都跳不出回撥函式這個方式。回撥函式方式使用非常簡單,在簡單非同步任務呼叫時候沒有任何問題,但如果出現複雜的非同步任務場景時,就顯得力不從心了,最主要的問題就是多層回撥函式的巢狀會導致程式碼的橫向發展,難以維護;ES6 帶來了兩個新特性來解決非同步程式設計的難題。

ES6的一些有用的小特性

6.1 Promise

Promise 是非同步程式設計的一種解決方案,比傳統的解決方案——回撥函式和事件——更合理和更強大。
Promise 是 ES6 的一個新特性,同為非同步程式設計方式,它主要有如下幾個特點:
1.本質還是回撥函式
2.區分成功和失敗的回撥,省去巢狀在內層的判斷邏輯
3.可以很輕鬆的完成回撥函式模式到 Promise 模式的轉化
4.程式碼由回撥函式巢狀的橫向擴充套件,變為鏈式呼叫的縱向擴充套件,易於理解和維護
5.Promise 雖然優勢頗多,但是程式碼結構仍與同步程式碼區別較大
看例子:

ES6的一些有用的小特性

6.2 Generator

1.Generator 從語法上,首先可以把它理解成,Generator 函式是一個狀態機,封裝了多個內部狀態。
2.執行 Generator 函式會返回一個遍歷器物件,也就是說,Generator 函式除了狀態機,還是一個遍歷器物件生成函式。返回的遍歷器物件,可以依次遍歷 Generator 函式內部的每一個狀態。
3.形式上,有兩個特徵。一是,function關鍵字與函式名之間有一個星號*;二是,函式體內部使用yield語句,定義不同的內部狀態(yield在英語裡的意思就是“產出”)。

ES6的一些有用的小特性

特點:
1.可以通過 yield 關鍵字,終止執行並返回(內到外)
2.可以通過 next(val) 方法呼叫重新喚醒,繼續執行(外回內)
3.執行時(包括掛起態),共享區域性變數

6.3 Async-Await

ES2017 標準引入了 async 函式,使得非同步操作變得更加方便。
async 函式是什麼?
一句話,它就是 Generator 函式的語法糖。
個人認為它將是 JavaScript 目前支援非同步程式設計最好的方式
看看下面的例子:

ES6的一些有用的小特性

參考資料和例子來自:http://es6.ruanyifeng.com/

Alone
2018-05-16

相關文章