ES10新特性

灰太狼 2022-12-30 13:35 234阅读 0赞

### 文章目录 ###

*   *   *  一、Object.fromEntries 和 Object.entries
         *   *   *   *  1. Object.fromEntries 将二维数组转换为对象
                     *  2. Object.entries 将对象转换为二维数组 ES8的语法
         *  二、字符串方法扩展 trimStart 与 trimEnd
         *  三、数组方法扩展 flat 与 flatMap
         *   *   *   *  1、flat ：将多维数组转化为低位数组
                     *  2、flatMap ：如果map返回的是一个多维数组，将多维数组转化为低维数组
         *  四、Symbol.prototype.description：获取Symbol的字符串描述

### 一、Object.fromEntries 和 Object.entries ###

###### 1. Object.fromEntries 将二维数组转换为对象 ######

//二维数组
    const result = Object.fromEntries([
        ['name','尚硅谷'],
        ['xueke', 'Java,大数据,前端,云计算']
    ]);
    console.log(result);

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

//Map
    const m = new Map();
    m.set('name','ATGUIGU');
    const result = Object.fromEntries(m);
    console.log(result);

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

###### 2. Object.entries 将对象转换为二维数组 ES8的语法 ######

const arr = Object.entries({ 
        name: "尚硅谷"
    })
    console.log(arr);

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

### 二、字符串方法扩展 trimStart 与 trimEnd ###

**trim用来清除字符串两边的字符**  
**trimStart 用来清除字符串左侧字符，trimEnd 清除右侧**

let str = ' iloveyou ';
    
    console.log(str);
    console.log(str.trimStart());
    console.log(str.trimEnd());

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

### 三、数组方法扩展 flat 与 flatMap ###

###### 1、flat ：将多维数组转化为低位数组 ######

const arr1 = [1,2,3,4,[5,6]];
    console.log(arr1.flat());

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

const arr2 = [1,2,3,4,[5,6,[7,8,9]]];
    console.log(arr2.flat());

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]  
**将3维数组变成一维数组：传入2**

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

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

###### 2、flatMap ：如果map返回的是一个多维数组，将多维数组转化为低维数组 ######

const arr = [1,2,3,4];
    const result = arr.flatMap(item => [item * 10]);
    console.log(result);

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

### 四、Symbol.prototype.description：获取Symbol的字符串描述 ###

//创建 Symbol
    let s = Symbol('aaa');
    
    console.log(s.description);

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

[20201225164448194.png]: /images/20221120/d23a1b310779451ebb22c533c6dd5098.png
[20201225164549211.png]: /images/20221120/1bd145be780e42e0affee3a1de02c6c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221120/b1475ef93e8f49fb979a708ebe7db55b.png
[20201225165253635.png]: /images/20221120/af68c8df76c646c4b8b41b9da286acd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201225165709471.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/20201225165722890.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 3]: https://img-blog.csdnimg.cn/20201225165735850.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[20201225170140620.png]: https://img-blog.csdnimg.cn/20201225170140620.png
[2020122517033399.png]: https://img-blog.csdnimg.cn/2020122517033399.png