ES7-ES9新特性概述

黑馬大前端發表於2018-08-28

ES2016

Array.prototype.includes
    類似於indexOf，該方法用來判斷一個陣列是否包含一個指定的值，如果是返回 true，否則false。
簽名為：Array.prototype.includes(value : any) : boolean。
includes與indexOf主要區別在於：

[NaN].includes(NaN)    //true     [NaN].indexOf(NaN)     //-1複製程式碼

** 指數運算子
    用於冪運算，與Math.pow(x, y)相同。 

3 ** 2        //9複製程式碼

ES2017

Async/await 非同步函式
    在多個非同步函式執行時比promise更簡潔
寫法如下： 

async function asyncFunc() {
    const result = await otherAsyncFunc();
    console.log(result);}複製程式碼

ShareArrayBuffer和Atomics
   用於從共享記憶體位置讀取和寫入。

Object.values()
     返回物件自身可列舉值陣列
Object.entries()
    返回一個給定物件自身可列舉屬性的鍵值對陣列。Map,Set物件也可以使用

新字串方法padStart()和padEnd()
    用於填充字串達到當前長度。

‘a'.padStart（5，'xy'）xyxya‘a'.padEnd（5，'xy'）axyxy複製程式碼


Object.getOwnPropertyDescriptors()
    返回物件中所有屬性的屬性描符
函式引數列表和呼叫中可以用逗號結尾
如： 

func('a','b',);複製程式碼

ES2018

非同步迭代

    在需要迴圈迭代呼叫非同步函式async時,是無法通過同步迭代傳遞其非同步資料的。
ES2018引入非同步迭代器（asynchronous iterators）for-awiait-of，是非同步的for…of版本
，next()方法返回一個Promise。寫法如下：

function createRejectingIterable() {    return {        [Symbol.asyncIterator]() {            return this;        },        next() {            return Promise.reject(new Error('Problem!'));        },    };}(async function () {
    try {        for await (const x of createRejectingIterable()) {            console.log(x);        }    } catch (e) {        console.error(e);    }})();複製程式碼

Rest/Spread 屬性

     ES2015引入了Rest引數和擴充運算子(…)。目前僅適用於陣列結構和引數定義。使用rest運算子可以收集所有剩餘引數，擴充運算子(…)可以將所有可列舉值的自身屬性賦值到運算元中。
ES2018為物件解構提供了和陣列一樣的Rest引數和擴充運算子(…)

const obj = {config: 1, info: 2, id: 3};const {config, …data} = obj;複製程式碼

正規表示式命名捕獲組（RegExp Named Capture Groups）

    正規表示式命名捕獲組允許通過顯示命名訪問到指定的組。在此之前，正則捕獲組都是按編號訪問。
ES2018引入了命名捕獲組(?<name>Expression)，用法如下：

const regDate = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d\d/;const matchObj  = regDate.exec('2018-08-28’);console.log(matchObj.groups.year)    // 2018console.log(matchObj.groups.month)   // 08console.log(matchObj.groups.day )    // 28複製程式碼

正規表示式反向斷言（lookbehind）

    斷言，通常指的是在目標字串的當前匹配位置進行的一種測試但這種測試並不佔用目標字串，也即不會移動模式在目標字串中的當前匹配位置。
常見斷言元字元有： \b, \B, \A, \Z, \z, ^ ,$ 它們只是表示特殊位置。
先行斷言，格式（?=pattern)/（?!pattern），表示從當前匹配位置開始之後內容必須與斷言相匹配。若匹配成功，正規表示式正向斷言成功，返回匹配字串。但是斷言並沒有包含在匹配字串中。若匹配失敗，返回null。
用法如下：

const RE_AS_BS = /[a-z]+(?=\d+)/,
const match = RE_AS_BS.exec(‘ab100’);
console.log( match[0] );    // abconst match2 = RE_AS_BS.exec(‘ab’);
console.log( match2[0] );    // null複製程式碼

反向斷言的工作方式與先行斷言相似，但方向相反。格式為（?<=pattern）用法如下：

const RE_DOLLAR_PREFIX  = /(?<=\$)foo/g,
const match = ‘$foo, %foo, foo’.relpace(RE_DOLLAR_PREFIX,’ele’);
console.log( match[0]);   // ‘$ele, %foo, foo'複製程式碼

否定反向斷言同理，格式為（?<!pattern）若沒有匹配成功，返回真。


正規表示式 s(dotAll) 標誌

目前，正規表示式點.與行終止符不匹配(\n)，ES2018指定了正規表示式/s (singleline的縮寫)標誌改變這種行為。
用法如下：

/^.$/.test(‘\n'); // false/^.$/s.test(‘\n');// true複製程式碼

RegExp Unicode 轉義

ES2018允許通過\p{Unicode字元屬性}來匹配字元。正規表示式要使用 /u (unicode)標誌 。用法如下： 

/^\p{White_Space}+$/u.test('\t \n\r’) //true/^\p{Script=Latin}+$/u.test('Grüße’) //true
複製程式碼

模板字面量的修訂

ES2015、ES2016 規範不允許使用轉義字元，如 "\u" (unicode), "\x" (十六進位制)，”\數字” (八進位制)
但是ES2018解除了這一限制：

function myTagFunc(str) {   return { "cooked": str, "raw": str.raw[0] }}const strTag = myTagFunc `hi \uemm123`; // call myTagFuncconsole.log(strTag.cooked, strTag.raw) //[undefined, raw[“hi \uemm123"]]
複製程式碼


相關文章