本文主要介绍ES2018 新出的一些特性

1.异步迭代

  允许 async/await 与 for-of 一起使用,以串行的方式运行异步操作,达到异步函数的迭代效果。

async function process(array) {
for await (let i of array) {
doSomething(i);
}
}

2.Promise.finally()

  在ES6中,一个Promise链要么成功进入最后一个then()要么失败触发catch()。而实际中,我们可能需要无论Promise无论成功还是失败,都运行相同的代码。例如清除,删除回话,关闭数据库连接等操作。

ES9中,允许使用finally()来指定最终的逻辑。

test().then((result)=>{})
.catch((err)=>{})
.finally(()=>{})

3.Rest/Spread属性

  该属性在ES6中是指展开运算符: ... 。在ES6中 只能适用于数组,但是在ES9中 对象也可以使用展开运算符。

  展开运算符的作用:

    1.函数使用 ... 接收未知数量的参数

//数组
restParam(1, 2, 3, 4, 5);
function restParam(p1, p2, ...p3) {
// p1 = 1
// p2 = 2
// p3 = [3, 4, 5]
} //对象
var obj = {
a: 1,
b: 2,
c: 3
}
foo(obj)
function foo({a, ...param}) {
console.log(a); //
console.log(param) //{b: 2, c: 3}
}

    2.展开运算

//数组:
const values = [99, 100, -1, 48, 16];
console.log( Math.max(...values) ); //
//对象:
var obj = {
a: 1,
b: 2,
c: 3
}
const { a, ...param } = obj;
console.log(a) //
console.log(param) //{b: 2, c: 3}

    对象的用法1---浅拷贝

         var obj = {
name: 'LinDaiDai',
looks: 'handsome',
foo() {
console.log('old');
},
set setLooks(newVal) {
this.looks = newVal
},
get getName() {
console.log(this.name)
}
} var cloneObj = {...obj};
cloneObj.foo = function() {
console.log('new')
};
console.log(obj)
// { name: 'LinDaiDai',looks: 'handsome', foo: f foo(), get getName:f getName(), set setLooks: f setLooks(newVal)}
console.log(cloneObj)
// { name: 'LinDaiDai',looks: 'handsome', foo: f foo(), getName: undefined, setLooks: undefined }
obj.foo()
// old
cloneObj.foo()
// new

    对象的用法2---合并对象

const obj1={a:1,b:2};
const obj2={c:3,d:4};
const obj3={...obj1,...obj2};
console.log(obj3) //{a: 1, b: 2, c: 3, d: 4}
//同:
const merged = Object.assign({}, obj1, obj2);

4.正则表达式---命名捕获组

  4.1 JavaScript正则表达式使用exec()匹配能够返回一个包含匹配的字符串的类数组。

  先上一个对比案例

//ES9使用了符号 ?<name>
const reDate = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
match = reDate.exec('2018-08-06')
console.log(match);
// [2018-08-06, 08, 06, 2018, groups: {day: 06, month: 08, year: 2018}] //此时可以使用groups对象来获取年月日
console.log(match.groups.year) //
console.log(match.groups.month) //
console.log(match.groups.day) //
//ES6命名捕获的方式:
const reDate = /(\d{4})-(\d{2})-(\d{2})/,
match = reDate.exec('2018-08-06');
console.log(match);
// [2018-08-06, 2018, 08, 06] // 这样就可以直接用索引来获取年月日:
match[0] //2018-08-06
match[1] //
match[2] //
match[3] //

  ES9的命名捕获组的写法相当于是给每个匹配项都添加了一个名字(?<name>),然后存储到返回值match中。match多了一个属性groups,但是match的长度没有变化。(是作为match的一个隐藏属性?)

  4.2 结合replace()

const reDate = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/,
d = '2018-08-06'
USADate = d.replace(reDate, '$<month>-$<day>-$<year>');
console.log(USADate);
// 08-06-2018

5.正则表达式---反向断言

  先行断言 VS 反向断言

6.正则表达式---新增标记 s

  i:不区分大小写;

  g:全局搜索;

  m:多行查找;

  s:允许终止符的出现---正则表达式中点 匹配除回车外的任何单字符,标记s改变这种行为;

// \n的换行
console.log(/hello.world/.test('hello\nworld')); // false console.log(/hello.world/s.test('hello\nworld')) // true
// \r的回车
console.log(/hello.world/.test('hello\rworld')) //false
console.log(/hello.world/s.test('hello\rworld')) //true
// . 匹配除回车外的任何字符
console.log(/hello.world/s.test(`hello
world`)) // true
console.log(/hello.world/.test(`hello
world`)) // false

7.正则表达式---Unicode转义

  形式为  \p{..} 和 \P{..} 。并在正则结尾使用 u 进行设置

    const reGreekSymbol = /\p{Script=Greek}/u;  //Greek 是希腊语
console.log(reGreekSymbol.test('π')); // true

参考地址:https://juejin.im/post/5b685ed1e51d4533f52859e8

05-04 09:12