ES9 新特性

ES9 新特性

对象展开

• rest 参数

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

  function connect({ host, port, ...user }) {
    console.log(host); // localhost
    console.log(port); // 3000
    console.log(user); // {userName: 'root', password: 'root', type: 'master'}
  }
  
  connect({
    host: "localhost",
    port: 3000,
    userName: "root",
    password: "root",
    type: "master",
  });
  

• 对象合并

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

正则扩展

命名捕获分组

• 匿名捕获分组 ()

  // 声明一个字符串
  let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
  
  // 提取URL与标签文本
  const reg = /<a href="(.*)">(.*).<\/a>/;
  
  const result = reg.exec(str);
  console.log(result[1]); // http://www.atguigu.com
  console.log(result[2]); // 尚硅谷
  

• 命名捕获分组 ?<url>

  // 声明一个字符串
  let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
  
  // 提取URL与标签文本
  const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
  
  const result = reg.exec(str);
  console.log(result.groups.url); // http://www.atguigu.com
  console.log(result.groups.text); // 尚硅谷
  

反向断言

• 正向断言

  // 声明字符串
  let str = "5211214你知道吗555啦啦啦";
  
  // 正向断言
  const reg = /\d+(?=啦)/;
  
  const result = reg.exec(str);
  console.log(result[0]); // 555
  

• 反向断言

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

dotAll 模式

• 普通模式 .匹配除换行字符以外的任意单个字符

  // dot . 元字符 匹配除换行字符以外的任意单个字符
  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>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/
  
  const result = reg.exec(str);
  console.log(result[1]); // 肖申克的救赎
  console.log(result[2]); // 上映日期：1994-09-10
  

• dotAll 模式 s .匹配任意字符

  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;
  
  let result;
  let data = [];
  
  while ((result = reg.exec(str))) {
    data.push({ title: result[1], time: result[2] });
  }
  console.log(data);