场景
今天被项目反馈说,你的正则表达式在 Chrome 浏览器下可以,Firefox 下不行。
具体代码是这样:
额,其实功能是解析 url 的 query 参数。
后面就去看了下这个的兼容性,发现是 ES2018 的东西,忽然就觉得好像不兼容是正常的(我是说火狐),然后就看了看 ES2018 具体更新了什么,有没有啥是我平常漏掉的,整理了下面的这份清单,欢迎收藏下来。
清单
- 正则
- 异步迭代
- Promise 的 finally
- 展开运算符拓展
上面个人好像除了异步迭代没怎么用,其他还是比较常用的,才发现是因为平常都是使用 Stage-0 开发……
下面一一简要说明一下:
正则:
正则其实挺多东西的,这边有点亮点的(其他就是我没用过……)貌似就我用到那个,简单来说就是命名组(匹配到信息)。
我们知道之前可以使用 $1 $2... 来获取匹配到的分组信息,然后 $0 表示被匹配字符串本身,但是这种方式不大灵活,于是命名分组需求就出来了,并且被委员会采纳。
语法就是:(?<name1>reg1)...(?<name2>reg2)...
然后匹配到的就划分到 match 或 exec 结果的 groups 属性中,并且 groups是附带了 name1,name2...等属性的对象。用法就看上面的图片吧,exec 与 match 区别这里就不多说了,个人还是用 match 比较多……
异步迭代:
简单来说,就是在 async 函数中,可以使用 await 来等待异步函数执行,从而让代码结构更清晰,从而干掉回调地狱。
我知道你可能再说,这不是之前就有了嘛。
容我说完,这个 await 可以用在迭代器上,即 for await of。
现在假如我们有个返回了 promise 数组:
const ps = [ new Promise(res => res(0)), new Promise(res => res(1)), new Promise(res => res(2)) ]然后需要对其循环调用:
for await(const p of ps) { con(p) } // 1, 2, 3事情就是这么个事情,不难,不过我个人是没用过,看来后面需要恶补一下。
finally:
显然不是 ajax 里面的那个,这个是在 then、catch 后出现的必然执行函数,允许我这么叫他吧。
因为解决最直接最实际的问题就是,如果某个事情不论在 then 中还是在 catch 中都需要操作一下,那么就请放到 finally 中处理吧。
实际场景,比如菊花转……请求成功或失败都要给隐藏了。
事实上,跟 try——catch——finally 很像啦。
展开运算符拓展:
这个就很简单了,实际开发很容易就想到这么用,只是不知道这玩意儿是 ES2018 的规范而已,如下:
const obj = { a: 1, b: 2, c: 3 } const {a, ...x} = obj con(a) // 1 con(x) // {b: 2, c: 3}就说你有没有这么用过……理解应该没啥问题。
ES2018 总结
大体上就这些,当然,内容肯定比这里丰富的多,个人只是把感觉非常有实用价值(或感觉非常有价值)的列出来,仅供学习参考,不做学术讨论……