ES的那些新特性

这段时间看到很多的es新特性，很多其实使用起来很方便，所以将他们都记录下来，也便于项目报错的时候发现可能特性太过于新babel没有正确转换的问题

es12

1. String.prototype.replaceAll()

   返回一个新字符串，模式的所有匹配都会被替换，等价于全局正则表达式

   'abbaababab'.replaceAll('ab','ee') // 'eebaeeeeee'
   'abbaababab'.replace(/ab/g,'ee') // 'eebaeeeeee'
   

2. Promise.any()

   只要这个方法命中了 Promise 列表 / 数组中的第一个已解析的 Promise，就会短路并返回一个值。如果所有的 promise 都被拒绝，那么它将抛出一个汇总错误消息

   它返回的是第一个被resolve的值，Promise.race返回的是第一个结果值（可能reject也可能resolve）

3. 逻辑运算符和赋值表达式

   就是将逻辑运算符和赋值表达式奇奇怪怪的混合在一起，代码写的少了，要努力记

   let a = 5;
   let b = 10;
   let c;
   let d;
   a &&=b // 10
   // 这式子等于 a&&(a=b)，也就是 if(a) a=b
   c ||=b //10
   // 这式子等于 c||(c=b)，也就是if(!c) c=b
   
   d ??=b //10
   // 这式子等于d ?? (d=b) ??是空值合并运算符，判断是否为undefined或者null
   

4. 数值分隔符

   使用_（下划线）进行数值组之间的分隔，使数字更好读

   let num = 100_000_000;
   console.log(num) // 100000000
   

5. Intl.ListFormat

   Intl对象是国际化API的一个命名空间（孤陋寡闻了）

   let obj =new Intl.ListFormat([locales[, options]]) // 语言环境，具有样式和类型的选项对象
   let arr = ['aaa','bbb'];
   obj.format(arr) // 这个方法接收一个数组，返回基于语言环境的格式化
   
   

6. Intl.DateTimeFormat的dateStyle和timeStyle选项

   dateStyle 和 timeStyle 选项可用于请求给定长度的，特定于语言环境的日期和时间

es11

1. 动态import

   import('/modules/my-module.js')
     .then((module) => {
       // Do something with the module.
     });
    let module = await import('/modules/my-module.js'); 
   // 返回的是promise
   

2. 空值合并运算符

   // 用??来表示，和||有点像，但是判断的是null和undefined，
   // 再也不用判空的时候还要单独排除0了！！！
   const a = null;
   const b;
   const c = false;
   const d = 0;
   const e = '';
   console.log(a ?? 'hahahah') // 'hahahah'
   console.log(b ?? 'hahahah') // 'hahahah'
   console.log(c ?? 'hahahah') // false
   console.log(d ?? 'hahahah') // 0
   console.log(e ?? 'hahahah') // ''
   

3. 可选链接

   可选的链接运算符 ?. 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效

   const user={name:'lalala'};
   let city = user.address.city; // 这个时候是会报错的
   // 在引用为null或者undefined的时候会短路返回undefined而不是会报错
   // 在处理后端可能会突然冒出来的obj=null再也不用各种判断啦
   const city = user?.address?.city ?? "Not Set";
   

4. BigInt

   它提供了一种方法来表示大于 2⁵³-1 的整数，这是 JavaScript 可以可靠地用 number 原语表示的最大数，并由 number 表示。MAX_SAFE_INTEGER 常量。BigInt 可用于任意大整数

5. globalThis

   全局属性 globalThis 包含全局的 this 值，类似于全局对象

   globalThis 提供了一个标准的方式来获取不同环境下的全局 this 对象（也就是全局对象自身）。不像 window 或者 self 这些属性，它确保可以在有无窗口的各种环境下正常工作。所以，你可以安心的使用 globalThis，不必担心它的运行环境。为便于记忆，你只需要记住，全局作用域中的 this 就是 globalThis。

es10

1. Object.fromEntries

   方法把键值对列表转换为一个对象

2. trimLeft/trimRight

   去除字符串左边或者右边的空字符串（不会修改原字符串）

3. Array.prototype.flat()

   按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

   // 替换方案
   let arr = [1, 2, [3, 4]];
   arr.reduce((acc, val) => acc.concat(val), []);
   // [1, 2, 3, 4]
   
   // 使用扩展运算符 ...
   const flattened = arr => [].concat(...arr);
   
   // 无限嵌套
   function flatDeep(arr, d = 1) {
      return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
                   : arr.slice();
   };
   

4. Array.prototype.flatMap()

   flat()和map()的结合，扁平化数组之后可以进行数组的操作

5. 可选的捕获绑定

   将catch的参数变成可选

   // before
   try{
     // Do something
   }catch(e){ 
     // Do something
   }
   
   // now
   try{
     // Do something
   }catch{  // 可以不需要e啦～
     // Do something
   }
   

6. Symbol.description

   描述属性是只读的，可用于获取符号对象的描述，更好了解它的作用

   const symbol = Symbol('lalala');
   symbol;
   // Symbol(lalala)
   Symbol.description;
   // 'lalala'
   
   

7. JSON Superset

   提供了对分隔符(\u2028) 和段落分隔符(\u2029)的解析

8. JSON.stringify()加强格式转化

   可以转义字符代码，转义那些emoji啦

9. 更加稳定的Array.prototype.sort()

   不允许不稳定的排序算法（否则可能会出现结果不一致的情况）

es9

1. 异步迭代
2. Promise.finally()
3. Rest/Spread
4. 正则表达式命名捕获组