ES9：扩展运算符 rest参数正则扩展

你的名字 2022-12-30 13:33 178阅读 0赞

### 文章目录 ###

*   *   *  一、rest 参数
         *  二、扩展运算符 对象合并
         *  三、正则扩展——命名捕获分组
         *  四、正则扩展——正则断言
         *   *   *  1. 正向断言
                 *  2. 反向断言
         *  五、正则扩展——dotAll模式

### 一、rest 参数 ###

![在这里插入图片描述][20201225161113579.png]

### 二、扩展运算符 对象合并 ###

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

![在这里插入图片描述][20201225161221198.png]

### 三、正则扩展——命名捕获分组 ###

**提取 url 与 『标签文本』**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]  
**我们可以看到上面的groups是 undefined，如果改成下面代码，可以看到我们所想要提取的值都在groups里了。**

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

### 四、正则扩展——正则断言 ###

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

**提取 str 的555**

##### 1. 正向断言 #####

根据后面做判断。

//正向断言
    const reg = /\d+(?=啦)/;
    const result = reg.exec(str);
    console.log(result);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]

##### 2. 反向断言 #####

根据前面做判断。

const reg = /(?<=么)\d+/;
 const result = reg.exec(str);
 console.log(result);

![在这里插入图片描述][2020122516264947.png]

### 五、正则扩展——dotAll模式 ###

**dot： . 元字符 代表除换行符以外的任意单个字符**

let str = ` <ul> <li> <a>肖生克的救赎</a> 上映日期: 1994-09-10 </li> <li> <a>阿甘正传</a> 上映日期: 1994-07-06 </li> </ul>`;
 //声明正则
 const reg = /<li>.*?<a>(.*?)<\/a>.*?(.*?)<\/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);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]

[20201225161113579.png]: /images/20221120/3299c6ff940342778cae13c867016490.png
[20201225161221198.png]: https://img-blog.csdnimg.cn/20201225161221198.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201225161733317.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201225161923732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201225162624560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[2020122516264947.png]: https://img-blog.csdnimg.cn/2020122516264947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201225163633694.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70