二十二、ES9 新特性

（一）对象展开

• rest 参数与 spread 扩展运算符在 ES6 中已经引入，但是只针对数组
• ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符

1.rest 参数

// function connect({ host, port, username, password }) {
//   console.log(host);
//   console.log(port);
//   console.log(username);
//   console.log(password);
// }
// 127.0.0.1
// 3306
// root
// root

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

connect({
  host: "127.0.0.1",
  port: 3306,
  username: "root",
  password: "root",
  type: "master",
});

2.扩展运算符

const skillOne = {
  q: "天音波",
};
// ...skillOne => q: '天音波', w: '金钟罩'

const skillTwo = {
  w: "金钟罩",
};

const skillThree = {
  e: "天雷破",
};

const skillFour = {
  r: "猛龙摆尾",
};

const mangseng = { ...skillOne, ...skillTwo, ...skillThree, ...skillFour };
console.log(mangseng);
// {q: '天音波', w: '金钟罩', e: '天雷破', r: '猛龙摆尾'}

（二）正则表达式扩展

1.命名捕获分组

// 声明一个字符串
let str = '<a href="https://www.baidu.com">百度</a>';

需求：提取 url、标签文本

两种方式区别在于 groups 字段

1）方式一：通过下标获取

const reg1 = /<a href="(.*)">(.*)<\/a>/;
const res1 = reg1.exec(str);

console.log(res1);
// (3) ['<a href="https://www.baidu.com">百度</a>', 'https://www.baidu.com', '百度', index: 0, input: '<a href="https://www.baidu.com">百度</a>', groups: undefined]

console.log(res1[1], res1[2]);
// https://www.baidu.com 百度

2）方式二：通过正则分组获取

const reg2 = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const res2 = reg2.exec(str);

console.log(res2);
// (3) ['<a href="https://www.baidu.com">百度</a>', 'https://www.baidu.com', '百度', index: 0, input: '<a href="https://www.baidu.com">百度</a>', groups: {…}]

console.log(res2.groups.url);
// https://www.baidu.com

console.log(res2.groups.text);
// 百度

2.反向断言

• 断言：判断本次匹配结果正确与否
• 正向断言：根据所需字符串 后面 跟着的内容进行判断
• 反向断言：根据所需字符串 前面 跟着的内容进行判断

// 声明一个字符串
let str = "JS5211314你知道么555啦啦啦";

需求：提取第二段数字

1）方式一：正向断言(?=)

const reg1 = /\d+(?=啦)/;
const res1 = reg1.exec(str);
console.log(res1);
// ['555', index: 13, input: 'JS5211314你知道么555啦啦啦', groups: undefined]

2）方式二：反向断言(?<=)

const reg2 = /(?<=么)\d+/;
const res2 = reg2.exec(str);
console.log(res2);
// ['555', index: 13, input: 'JS5211314你知道么555啦啦啦', groups: undefined]

3.dotAll 模式

• dot: .
  • 在正则中表示元字符，代表除换行符外的任意单字符
• dotAll: . 代表任意字符
  • 在 html 代码字符串中查找有重要意义

// 声明一个字符串
let str = `
  <ul>
    <li>
      <a>肖生克的救赎</a>
      <p>上映日期: 1994-09-10</p>
    </li>
    <li>
      <a>阿甘正传</a>
      <p>上映日期: 1994-07-06</p>
    </li>
  </ul>`;

需求：提取电影名称和上映时间，存到对象中

1）方式一：需要添加多个\s

• 贪婪：表示最大匹配。

• (.*?) : ? 表示禁止贪婪。

• \s : 单个的空白字符，包括换行符。

const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;
const res = reg.exec(str);
console.log(res);

2）方式二：dotAll 模式

• s : 模式修正符
  • 使 . 可以匹配任意字符
• g : 模式修正符
  • 全局匹配

const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
let res;
let data = [];
while ((res = reg.exec(str))) {
  // console.log(res);
  data.push({
    title: res[1],
    time: res[2],
  });
}
console.log(data);
// 0: {title: '肖生克的救赎', time: '上映日期: 1994-09-10'}
// 1: {title: '阿甘正传', time: '上映日期: 1994-07-06'}