ES9语法特性对象展开（rest、扩展运算符）正则扩展

最新推荐文章于 2024-12-22 17:29:24 发布

sharp_wu

最新推荐文章于 2024-12-22 17:29:24 发布

阅读量521

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_38232003/article/details/110468207

版权

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了ES9中引入的两个新特性，即对象展开的rest参数和扩展运算符，以及正则表达式的命名捕获分组、反向断言和dotAll模式。对象展开使得在对象中也能使用rest参数和扩展运算符，增强了对象的操作灵活性。正则扩展则带来了更强大的匹配和处理能力，如命名捕获分组便于维护，反向断言用于实现特定条件的匹配，而dotAll模式则允许点号.匹配包括换行符在内的所有字符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES9

对象展开：rest参数、扩展运算符

rest参数与扩展运算符于ES6已经引入使用，但只针对数组

在ES9中，为对象提供了和数组一样的rest、扩展运算符

rest参数

之前的参数一一对应，剩余的参数全部储存在rest参数数组中。

      const connect = ({ host, port, ...userInfo }) => {
        console.log(host);
        console.log(port);
        console.log(userInfo);
      };
      connect({
        host: '127.0.0.1',
        port: 3306,
        username: 'root',
        password: 'root'
      });

在这里插入图片描述

扩展运算法 …

可以进行对象属性的合并

      const a = {
        a: 'a'
      };
      const b = {
        b: 'b'
      };
      const c = {
        c: 'c'
      };
      const d = {
        d: 'd'
      };
      const word = { ...a, ...b, ...c, ...d };
      console.log(word);

在这里插入图片描述

正则

命名捕获分组

捕获：对正则匹配的数据进行(.*)单独提取。

      let str = '<a href="httP://115.29.193.2">什么都没有</a>';
      const reg = /<a href="(.*)">(.*)<\/a>/;
      console.log(reg.exec(str));

在这里插入图片描述
使用索引获取url不易维护，如果之后修改规则，多了一个捕获。

      console.log(reg.exec(str)[1]);

捕获分组(?<xxx>.*) 对捕获的结果添加属性

      let str = '<a href="httP://115.29.193.2">什么都没有</a>';
      const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
      console.log(reg.exec(str));

在这里插入图片描述
有分组方便维护

      console.log(reg.exec(str).groups.url);

反向断言

断言：判断这次的匹配结果是否正确

正向断言/反向断言做一个唯一性的识别
正向断言（目标的后面）

      let num = 555;
      let str = `1323sfdsfsfd水电费水电费${num}哈哈哈哈sdasasds`;
      const reg = /\d+(?=哈)/;
      console.log(reg.exec(str));

在这里插入图片描述
反向断言（目标的前面）

      let num = 888;
      let str = `1323sfdsfsfd水电费水电费${num}哈哈哈哈sdasasds`;
      const reg = /(?<=费)\d+/;
      console.log(reg.exec(str));

在这里插入图片描述

dotAll模式

dot . 称之为：元字符 是除换行符以外的任意单个字符

      let str = `
        <ul>
          <li>
            <a href="#">a</a>
            <p>b</p>
          </li>
          <li>
            <a href="#">c</a>
            <p>d</p>
          </li>
        </ul>
      `;
      const reg = /<li>\s+<a href="#">(.*?)<\/a>\s+<p>(.*?)<\/p>/;
      console.log(reg.exec(str));

在这里插入图片描述
使用dotAll
.*?===> / /s (\s+)

      let str = `
        <ul>
          <li>
            <a href="#">a</a>
            <p>b</p>
          </li>
          <li>
            <a href="#">c</a>
            <p>d</p>
          </li>
        </ul>
      `;
      // const reg = /<li>\s+<a href="#">(.*?)<\/a>\s+<p>(.*?)<\/p>/g;
      const reg = /<li>.*?<a href="#">(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
      // console.log(reg.exec(str));
      let result;
      while ((result = reg.exec(str))) console.log(result);