ES7-ES9新特性概述

708 阅读3分钟

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"]]