es6-es11系列5 ES7 – ES9的扩展

ES7(2016)新增了2个特性includes、幂运算 **

1 includes
includes是数组的实例方法而不是静态方法
基本用法,注意第2个参数,和数据类型

const arr = ['es6', 'es7', [1], 'es8']
console.log(arr.includes('es7', 1)) // 第2个参数可以声明从哪个索引位置开始查找,性能更好
console.log(arr.includes([1])) // false

2 幂运算 **
原来的方法

Math.pow(2,10) // 1024

新的语法

2**10 // 1024

ES8(2017)新增async / await

其实也是Generator的语法糖
太简单了,不做记录

ES8中对对象扩展 values、 entries

es8之前只能通过keys()获取对象的key
现在可以通过Object.values()直接获取valuse了
通过Object.entries()可以获取一个数组

for(let [key, val] of Object.entries(obj)){
    console.log(key)
    console.log(val)
}

ES8新增对象属性描述符 Object.getOwnPropertyDescriptors()

const obj = {
    name:'sam',
    age:18
}

let dest = Object.getOwnPropertyDescriptors(obj)
console.log(dest)

打印出来的对象展开之后每一项的值会得到下面的结果,例如age
age:

configurable: true // 是否可以用delete删除
enumerable: true // 是否可用for...in 循环
value: 18 // 值
writable: true // 是否可修改

设置对象的这些属性其实就是通过之前的defineProperty方法
通过第2个参数Object.getOwnPropertyDescriptors(obj,‘age’) 可以指定要获取哪个key

ES8对字符串扩展的2个方法padStart、padEnd

String.prototype.padStart(targetLength, padString)
padStart的第一参数是填充后的字符串长度,第2个参数是要填充的内容,如果不写会默认使用空格填充,例如

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
String.prototype.padEnd() 同理

最常用的使用场景就是日期或者价格补0

ES8新增的参数尾逗号支持

允许参数列表最后一行多写一个逗号
例如function(1, 2, ){} 这样的逗号结尾不会报错了

ES9(2018)新增异步迭代

for-await-of
Symbol.asyncIterator
适用于遍历一个由异步函数组成的对象,例如把3个接口请求封装成promise然后放到一个对象中去再按顺序遍历,参考下面的代码:

 const myAsyncIterable = new Object();
myAsyncIterable[Symbol.asyncIterator] = async function*() {
    yield "hello";
    yield "async";
    yield "iteration!";
};

(async () => {
    for await (const x of myAsyncIterable) {
        console.log(x);
        // expected output:
        //    "hello"
        //    "async"
        //    "iteration!"
    }
})();

ES9 正则的扩展

dotAll
以前正则/./ 不能匹配换行\n和unicode(\u{123})等特殊字符,ES9使用/./s 可以匹配所有字符了
复习一下正则的一些操作符
g global 全局
i ignore 忽略大小写
m mult line 多行匹配
y 粘性
u unicode
s dotAll 任意单字符

具名组匹配

const exec =/(\d{4})-(\d{2})-(\d{2})/.exec('2022-05-11')
const groups = /(?\d{4})-(?\d{2})-(?\d{2})/.exec('2022-05-11').groups
console.log(exec)
console.log(groups)

后行断言
先复习一下什么是先行断言

const str = 'ecmascript' // 这里如果是ecmaxxscript的话就不会符合下面的正则了
//  匹配一个字符串包含ecma但是后面必须是script
console.log(str.match(/ecma(?=script)/)) // ['ecma', index: 0, input: 'ecmascript', groups: undefined]

同样的例子,后行断言如下
// 匹配一个字符串包含script但是前面必须是ecma

console.log(str.match(/(?<=ecma)script/))

ES9 对象的扩展Rest & Spread

// 1 克隆
const obj2 = {
    ...obj1
}
// 2 合并
const obj3 = {...obj1, ...obj2}
// 3 剩余
const {name, age, ...rest} = obj1

ES9 对Promise的扩展 finally()

无论是成功then还是失败catch都会执行finally方法

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:353 次浏览