05.ES9 06.ES10

5.1、对象拓展

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

5.1.1、Rest 参数

 <script>
      //rest 参数
      function connect({ name, sex, ...other }) {
        console.log(name); //孙悟空
        console.log(sex); //男
        console.log(other); //{age: 20, address: '花果山'}
      }


      connect({
        name: "孙悟空",
        sex: "男",
        age: 20,
        address: "花果山",
      });
    </script>

注意：

1：rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

function f(a, ...b, c) { ... } // 报错

2：函数的length属性，不包括 rest 参数。

(function(a) {}).length // 1

(function(...a) {}).length // 0

(function(a, ...b) {}).length // 1

5.1.2、spread 扩展运算符

 <script>
      // spread 扩展运算符    对象合并
      const nameOne = {
        q: "孙悟空",
        h:18
      };
      const nameTwo = {
        w: "猪八戒",
      };
      const nameThree = {
        e: "沙悟净",
      };
      const nameFour = {
        r: "白骨精",
      };
      //对象的合并
      const name = { ...nameOne, ...nameTwo, ...nameThree, ...nameFour };
      console.log(name);
      //{q: '孙悟空', h:18，w: '猪八戒', e: '沙悟净', r: '白骨精'}
    </script>

5.2、正则拓展

5.2.1、正则命名分组

JS正则表达式可以返回一个匹配的对象, 一个包含匹配字符串的类数组

ES9允许使用命名捕获 ? , 在打开捕获括号后立即命名

语法： ?<变量名>

  <script>
        //声明一个字符串
        // let str = '<a href="https://www.baidu.com/">百度</a>';
        //需求：提取 url 与 『标签文本』
        //第一种写法
        // const reg = /<a href="(.*)">(.*)<\/a>/;
        // //执行
        // const result = reg.exec(str);
        // console.log(result);
        // // console.log(result[1]);//url
        // // console.log(result[2]);//文本


        //第二种方式  ?<变量名>
      let str = '<a href="https://www.baidu.com/">百度</a>';
        //分组命名
        const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
        const result = reg.exec(str);
        console.log(result.groups.url);
        console.log(result.groups.text);
    </script>

5.2.2、反向断言

语法：(?<=y)x 如果想匹配x，x的前面必须是y

  <script>
        //声明字符串
        let str = 'LP5211314你知道么666啦啦啦';
        //正向断言  根据匹配结果666后面的内容‘啦啦’，判断匹配结果是否合法
        const reg = /\d+(?=啦)/;//如果想匹配数字，数字后面必须时啦
        const result = reg.exec(str);


        //反向断言  (?<=么)  根据匹配结果666前面的内容'么'，判断匹配结果是否合法
        const reg = /(?<=么)\d+/;//如果想匹配数字，数字前面必须时么
        const result = reg.exec(str);
        console.log(result);
    </script>

5.2.3、promise.finally()

无论是成功还是失败, 都运行同样的代码, 比如隐藏对话框, 关闭数据连接

 <script>
      function fun() {
        return new Promise((resolve, reject) => {
          // resolve("成功");
          reject(1111);
        });
      }
      fun()
        .then((res) => {
            console.log('成功');
        })
        .catch((err) => {
            console.log('失败');//失败
        })
        .finally(() => {
          console.log("关闭数据连接");//"关闭数据连接"
        });
    </script>

6.1、Object.fromEntries

将二维数组，转为对象，一般常用来将map对象，转为对象

 const res = Object.fromEntries([
        ["name", "bdqn"],
        ["xueke", "Java,大数据,前端,云计算"],
      ]);
      console.log(res, "result");
      //{name: 'bdqn', xueke: 'Java,大数据,前端,云计算'}
      
//Map  是一种数据结构，也是一个对象;
      const m = new Map();
      m.set("name", "bdqn");
      console.log(m); //Map(1) {'name' => 'bdqn'}
      const result = Object.fromEntries(m);
      console.log(result); //{name: 'bdqn'}

ES8 中学习的Object.entries 将对象转为二维数组，与Object.fromEntries互为逆运算

  const arr = Object.entries({
        name: "bdqn",
      });
      console.log(arr);

6.2、trimStart 和 trimEnd

trimStart 与 trimEnd 指定清楚左侧还是右侧空白字符

 <script>  
    /* trimStart 与 trimEnd 指定清楚左侧还是右侧空白字符 */   
        let str = '   爱老虎油   ';
        console.log(str.trim());//清除两侧空白
        console.log(str.trimStart());//清除左侧空白
        console.log(str.trimEnd());//清除右侧空白
    </script>

6.3、Array.flat 与 flatMap

    <script>
      //flat 平
      //将多维数组转化为低位数组
      const arr = [1, 2, [5, 6]];
      console.log(arr.flat(1), "arr"); //[1, 2, 5, 6]

      const arr2 = [1, 2, [5, 6, [7, 8, 9]]];
      //参数为深度 是一个数字,默认值是1
      console.log(arr2.flat(2), "arr2"); //[1, 2, 5, 6, 7, 8, 9]

      //flatMap  
      /* flatMap()方法对原数组的每个成员执行一个函数
      （相当于执行Array.map()），
      然后对返回值组成的数组执行flat()方法。
      该方法返回一个新数组，不改变原数组。 */
      const arr3 = [1, 2, 3, 4];
      const res1 = arr3.flatMap((item) => item*10);
      const res2 = arr3.flatMap((item) => [item*10]);

      console.log(res1, "res1"); //[10, 20, 30, 40] 'res1'
      console.log(res2, "res2"); //[10, 20, 30, 40] 'res2'

    </script>

6.4、Symbol.description

获取Symbol的描述字符串

 <script>
        //创建 Symbol
        let s = Symbol('bdqn');
        console.log(s.description);//bdqn
    </script>