天天看点

ES7、ES8、ES9的一些新特性

ECMASript 7 新特性

Array.prototype.includes

​Includes​

​ 方法用来检测数组中是否包含某个元素,返回布尔类型值

指数操作符

在 ​

​ES7​

​​ 中引入指数运算符​

​「**」​

​,用来实现幂运算,功能与 ​

​Math.pow​

​结果相同

ECMASript 8 新特性

async 和 await

​async​

​​ 和 ​

​await​

​ 两种语法结合可以让异步代码像同步代码一样

async 函数

  1. ​async​

    ​​ 函数的返回值为 ​

    ​promise​

    ​ 对象,
  2. ​promise​

    ​​ 对象的结果由 ​

    ​async​

    ​ 函数执行的返回值决定

await 表达式

  1. ​await​

    ​​ 必须写在 ​

    ​async​

    ​ 函数中
  2. ​await​

    ​​ 右侧的表达式一般为 ​

    ​promise​

    ​ 对象
  3. ​await​

    ​​返回的是 ​

    ​promise​

    ​成功的值
  4. ​await​

    ​​ 的 ​

    ​promise​

    ​​失败了, 就会抛出异常, 需要通过 ​

    ​try...catch​

    ​ 捕获处理

Object.values 和 Object.entries

  1. ​Object.values()​

    ​方法返回一个给定对象的所有可枚举属性值的数组
  2. ​Object.entries()​

    ​方法返回一个给定对象自身可遍历属性 ​

    ​[key,value]​

    ​的数组

Object.getOwnPropertyDescriptors

该方法返回指定对象所有自身属性的描述对象

ECMASript 9 新特性

Rest/Spread 属性

​Rest​

​​ 参数与 ​

​spread​

​​ 扩展运算符在 ​

​ES6​

​​ 中已经引入,不过 ​

​ES6​

​​中只针对于数组,在​

​ES9​

​​中为对象提供了像数组一样的 ​

​rest​

​参数和扩展运算符。

function connect({host, port, ...user}) {
 console.log(host);
 console.log(port);
 console.log(user);
}
connect({
 host: '127.0.0.1',
 port: 3306,
 username: 'root',
 password: 'root',
 type: 'master'
});      

正则表达式命名捕获组

ES9 允许命名捕获组使用符号​

​『?<name>』​

​,这样获取捕获结果可读性更强

let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result.groups.url);
console.log(result.groups.text);      

正则表达式反向断言

//声明字符串
let str = 'JS5211314 你知道么 555 啦啦啦';
//正向断言
const reg = /\d+(?=啦)/;
const result = reg.exec(str);
//反向断言
const reg = /(?<=么)\d+/;
const result = reg.exec(str);
console.log(result);      

正则表达式 dotAll 模式

let str = `
<ul>
 <li>
 <a>肖生克的救赎</a>
 <p>上映日期: 1994-09-10</p>
 </li>
 <li>
 <a>阿甘正传</a>
 <p>上映日期: 1994-07-06</p>
 </li>
</ul>`;
//声明正则
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
//执行匹配
const result = reg.exec(str);
let result;
let data = [];
while(result = reg.exec(str)){
 data.push({title: result[1], time: result[2]});
}
//输出结果
console.log(data);