ES9新特性、ES10新特性

最新推荐文章于 2023-02-13 16:26:15 发布

琳琳在哪

最新推荐文章于 2023-02-13 16:26:15 发布

阅读量234

点赞数

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

本文链接：https://blog.csdn.net/qq_63479468/article/details/124240907

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

ES9新特性

一、rest参数与spread扩展运算符

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

1.rest参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES9新特性</title>
</head>
<body>
    <script>
        //rest参数
        function TNT({
            name,
            age,
            ...sex
        }) {
            console.log(name);
            console.log(age);
            console.log(sex);
        }

        TNT({
            name:"宋亚轩",
            age:18,
            sex:"男",
            score:100,
            func:"唱歌"
        });
    </script>
</body>
</html>

2.对象合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES9新特性</title>
</head>
<body>
    <script>
        //对象合并
        const first = {
            a:'马嘉祺'
        }
        const second = {
            b:'丁程鑫'
        }
        const third = {
            c:'宋亚轩'
        }
        const fourth = {
            d:'刘耀文'
        }
        const fifth = {
            e:'张真源'
        }
        const sixth = {
            f:'严浩翔'
        }
        const seventh = {
            g:'贺峻霖'
        }

        const sdsnt = {
            ...first,
            ...second,
            ...third,
            ...fourth,
            ...fifth,
            ...sixth,
            ...seventh
        }

        console.log(sdsnt);
    </script>
</body>
</html>

二、正则扩展

1.命名捕获分组

es9允许命名捕获组使用符号 ? 这样获取捕获结果的可读性更强；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES9新特性</title>
</head>
<body>
    <script>
        //正则扩展：命名捕获分组
        //声明一个字符串
        let str = '<a href="http://www.baidu.com">百度</a>';

        //提取url和标签文本
        //之前写法
        const resu = /<a href"(.*)">(.*)<\/a>/;
            console.log(resu.exec(str));

        //命名捕获
        const result = /<a href"(?<url>.*)">(?<text>.*)<\/a>/;
            const s = result.exec(str);
            console.log(s);
            console.log(s.groups.url);
            console.log(s.groups.text);
    </script>
</body>
</html>

2.反向断言

//反向断言
        let str = "JavaScript20220420哟今天星期三哦哦哦2152啦";
        //获得“今天星期三”
        //正向
        const resu1 = /\d+(?=哦)/;
        console.log(resu1.exec(str));
        //反向
        const resu2 = /(?<=哟)\d+/;
        console.log(resu2.exec(str));

ES10新特性

一、Object.fromEntries

将二维数组或者map转换成对象；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES10新特性</title>
</head>
<body>
    <script>
        //对象 => 数组
        const TNT = {
            name: 'sdsnt',
            age:18
        }

        console.log(Object.entries(TNT));

        //数组orMap => 对象
        const resu = Object.fromEntries([
            ['name', 'sdsnt'],
            ['age', '18'],
        ]);
        console.log(resu);

        const TNT2 = new Map();
        TNT2.set('name','sdsnt');
        TNT2.set('age','18');

        const resu2 = Object.fromEntries(TNT2);
        console.log(resu2);
    </script>
</body>
</html>

二、trimStart和trimEnd

去除字符串前后的空白字符；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES10新特性</title>
</head>
<body>
    <script>
        //trimStart和trimEnd
        let str = "    sdsnt  ..  ";
        console.log(str.trimStart());
        console.log(str.trimEnd());
        console.log(str.trimLeft());
        console.log(str.trimRight());
    </script>
</body>
</html>

trimStart();效果等于trimLeft(); 同理，trimEnd();与trimRight();效果也一样

只能去除字符串首尾空白，中间的空白不行

三、Array.prototype.flat与flatMap

将多维数组降维；

1.flat

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES10新特性</title>
</head>
<body>
    <script>
        //Array.prototype.flat
        //二维数组=>一维数组
        const arr1 = [1,2,3,[4,5,6]];
        console.log(arr1.flat());
        //三维数组=>一维数组
        const arr2 = [7,8,9,[4,5,6,[1,0,3]]];
        console.log(arr2.flat(2));

     </script>
</body>
</html>

2.flatMap

//flatMap
        const arr3 = [1,2,3,4,5];
        console.log(arr3.map(item => item * 10));
        console.log(arr3.map(item => [item * 10]));
        console.log(arr3.flatMap(item => [item * 10]));

四、Symbol.prototype.description

获取Symbol的字符串描述；

 //获取Symbol的描述字符串
        let s = Symbol("宋亚轩");
        console.log(s.description);

琳琳在哪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES9新特性、ES10新特性

一、rest参数与spread扩展运算符rest参数与spread扩展运算符在es6中已经引入，不过es6中只针对于数组，在es9中为对象提供了像数组一样的rest参数和扩展运算符1.rest参数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
复制链接

扫一扫