ECMA
ES11
1. Nullish coalescing Operator ??
空值合并操作符（
??）是一个逻辑操作符，当左侧的操作数为null或者undefined时，返回其右侧操作数，否则返回左侧操作数
const foo = null ?? 'str'
console.log(foo) // str
const num = 0 ?? 42
const num1 = 0 || 42
console.log(num) // 0
console.log(num1) // 42
const str = '' ?? 'str'
const str1 = '' || 'str'
console.log(str) // ""
console.log(str1) // str
2. Optional chaining ?.
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined
// 以前
let a = {
dog: {
name: 'sss'
}
}
console.log(a.cat.name);
console.log(a.cat?.name); // undefined
const adventurer = {
name: 'Alice',
cat: {
name: 'Dinah'
}
};
const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined
console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined
3. Promise.allSettled
该Promise.allSettled() 方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。
当您有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个promise的结果时，通常使用它。
相比之下，Promise.all() 更适合彼此相互依赖或者在其中任何一个reject时立即结束。
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
Promise.allSettled(promises).
then((results) => results.forEach((result) => console.log(result.status)));
// expected output:
// "fulfilled"
// "rejected"
4. import()
按需导入
const routes = [
{
path: '/',
name: 'User',
component: User
}, {
path: '/upload',
name: 'Upload',
component: () => import('../views/Upload.vue')
}
]
5. 新基本数据类型BigInt
任意精度的整数
6. globalThis
全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object）
- 浏览器：window
- worker：self
- node：global
7.matchAll
matchAll-mdn
matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。
const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';
const array = [...str.matchAll(regexp)];
console.log(array[0]);
// Array ["test1", "e", "st1", "1"]
console.log(array[1]);
// Array ["test2", "e", "st2", "2"]
ES12
1. replaceAll
replaceAll() 方法返回一个新字符串，新字符串所有满足 pattern 的部分都已被replacement 替换。pattern可以是一个字符串或一个 RegExp， replacement可以是一个字符串或一个在每次匹配被调用的函数。
原始字符串保持不变。
replace()方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。
const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replaceAll('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"
// global flag required when calling replaceAll with regex
const regex = /Dog/ig;
console.log(p.replaceAll(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"
2. Promise.any
const p1 = new Promise((resolve, reject) => {
reject('失败1')
})
const p2 = new Promise((resolve, reject) => {
reject('失败2')
})
Promise.any([p1, p2]).then(res => {
console.log(res);
}).catch(e => {
console.log(e);
})
3. WeakRef
WeakRef对象允许您保留对另一个对象的弱引用，而不会阻止被弱引用对象被GC回收
4. 逻辑运算符和赋值表达式：||=、&&=、??=
逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式而JavaScript已存在的 复合赋值运算符有：
a ||= b
//等价于
a = a || (a = b)
a &&= b
//等价于
a = a && (a = b)
a ??= b
//等价于
a = a ?? (a = b)
var a = 0;
var b = 1;
console.log(a ||= b);
console.log('a', a);
var a = 'a';
var b = 1;
console.log(a &&= b); // a && a = b
console.log('a', a);
var a = '';
var b = 1;
console.log(a ??= b); // a ?? a = b ===> ''
console.log('a', a); // ''
5. 数字分隔符 _
数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性
const money = 1_000_000_000;
//等价于
const money = 1000000000;
1_000_000_000 === 1000000000; // true
