JS:ES9新特性

小白目

已于 2022-03-20 14:40:42 修改

阅读量1.2k

点赞数 2

分类专栏： ES6 -- 11 文章标签： javascript 开发语言 ecmascript 前端

于 2021-12-29 15:33:21 首次发布

本文链接：https://blog.csdn.net/qq_37974755/article/details/122216862

版权

ES6 -- 11 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

概述：

1、Rest 参数与 spread 扩展运算符：Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符；
2、正则扩展：简化和增强正则匹配，如命名捕获分组、反向断言和dotAll 模式；

Rest 参数与 spread 扩展运算符代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rest参数与spread扩展运算符</title>
</head>
<body>
<script>
// Rest参数与spread扩展运算符
// Rest 参数与 spread 扩展运算符在 ES6 中已经引入，
// 不过 ES6 中只针对于数组，在 ES9 中为对象提供了像
// 数组一样的 rest 参数和扩展运算符；
//rest 参数
function connect({
host,
port,
...user
}) {
console.log(host);   //127.0.0.1
console.log(port);   //3306
console.log(user);   //
} c
onnect({
host: '127.0.0.1',
port: 3306,
username: 'root',
password: 'root',
type: 'master'
});
//对象合并
const skillOne = {
q: '冲天波'
} c
onst skillTwo = {
w: '威震天'
}
const skillThree = {
e: '霸天虎'
} c
onst skillFour = {
r: '擎天柱',
// 测试，可用
z: '汽车人'
} c
onst mangseng = {
...skillOne,
...skillTwo,
...skillThree,
...skillFour
};
console.log(mangseng)  //
// ...skillOne => q: '冲天波', w: '威震天'
</script>
</body>
</html>

正则扩展：命名捕获分组
ES9 允许命名捕获组使用符号『?』,这样获取捕获结果可读性更强；

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>正则扩展：命名捕获分组</title>
</head>

<body>
    <script>
        // 需求：提取url和标签内文本   之前的写法
        let str = '<a href="http://www.baidu.com">百里</a>';
        const reg = /<a href="(.*)">(.*)<\/a>/;
        const result = reg.exec(str);
        console.log(result);
        // 结果是一个数组，我们将此称之为捕获
        //第一个元素是所匹配的所有字符串
        // 第二个元素是第一个(.*)匹配到的字符串
        // 第三个元素是第二个(.*)匹配到的字符串
        console.log(result[1]);
        console.log(result[2]);

        // 命名捕获分组  ?<url>  ?<text>
        const reg1 = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
        const result1 = reg1.exec(str);
        console.log(result1);
        // 这里的结果多了一个groups:text: "百里" , url:"http://www.baidu.com"
        console.log(result1.groups.url);
        console.log(result1.groups.text);
    </script>
</body>

</html>

正则扩展：反向断言

ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则扩展：反向断言</title>
</head>
<body>
<script>
// 正则扩展：反向断言
// 字符串
let str = "JS5201314你知道么555啦啦啦";
// 需求：我们只想匹配到555
// 正向断言
const reg = /\d+(?=啦)/; // 前面是数字后面是啦
const result = reg.exec(str);
console.log(result);
// 反向断言
const reg1 = /(?<=么)\d+/; // 后面是数字前面是么
const result1 = reg.exec(str);
console.log(result1);
</script>
</body>
</html>

正则扩展：dotAll 模式
正则表达式中点.匹配除回车外的任何单字符，标记『s』改变这种行为，允许行终止符出现；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则扩展：dotAll 模式</title>
</head>
<body>
<script>
// 正则扩展：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>/;
// dotAll 模式
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
// const result = reg.exec(str);
// console.log(result);
let result;
let data = [];
while(result = reg.exec(str)){
console.log(result);
data.push({title:result[1],time:result[2]});
} 
console.log(data);
</script>
</body>
</html>

小白目

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS:ES9新特性

概述：1、Rest 参数与 spread 扩展运算符：Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符；2、正则扩展：简化和增强正则匹配，如命名捕获分组、反向断言和dotAll 模式；Rest 参数与 spread 扩展运算符代码示例：<!DOCTYPE html><html><head><meta charset="utf-..
复制链接

扫一扫