JavaScript新特性

JavaScript新特性总结(部分)

1. String.prototype.replaceAll

replaceAll() 返回一个新字符串，其中模式的所有匹配都会被替代项替换。模式可以是字符串或正则表达式，而替换项可以是字符串或针对每次匹配执行的函数。

let str = 'I like apple ,I eat apple sometimes';
let newStr = str.replaceAll('apple','orange');

console.log(newStr);

/**** Output ****/
//I like orange ,I eat orange sometimes

2. Promise.any

/** 区别 */
 1. Promise.all 只有当传入的每个 Promise 实例(p1,p2,p3)的状态都变成 fulfilled 时，p 才fulfilled，只要(p1,p2,p3)有一个被 rejected，p 的状态就变成 rejected。
 2. Promise.race 当传入的 Promise 实例(p1,p2,p3)中有一个率先改变状态，那么 p 的状态就跟着改变，也就是说返回最先改变的 Promise 实例的返回值。
 3. Promise.allSettled 只有等到所有传入的 Promise 实例(p1,p2,p3)都返回结果，不管是 fulfilled 还是 rejected，包装实例才会结束。
 4. Promise.any 当其中任何一个 Promise 完成(fulfilled)时，就返回那个已经有完成值的 Promise。如果所有的 Promise 都拒绝 (rejected), 那么返回一个拒绝的 Promise

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

a ||= b
//等价于
a = a || (a = b)

a &&= b
//等价于
a = a && (a = b)

a ??= b
//等价于
a = a ?? (a = b)

/** 小结
 * 新的提案让我们将能把逻辑运算符和赋值运算符结合起来
 * a ||= b：当a值不存在时，将b变量赋值给a
 * a &&= b：当a值存在时，将b变量赋值给a
 * a ??= b：当a值为null或者undefined时，将b变量赋值给a
 */

4. 数值分隔符

新引入的数值分隔符使用 _（下划线）字符，在数值组之间提供分隔，使数值读起来更容易

let count = 1_000;
let number = 1_000_000;
let account = 1_000.0_001;

5. String.prototype.trimStart() / String.prototype.trimEnd()

String.prototype.trim()被用于去除头尾上的空格、换行符等，现在通过trimStart()，trimEnd()来头和尾进行单独控制。trimLeft()、trimRight()是他们的别名。

let str = '  Hello JavaScript  ';
str.trimLeft();
//'Hello JavaScript  '
str.trimRight();
//'  Hello JavaScript'

6. Array.prototype.flat() / Array.prototype.flatMap()

把数组展平是Array原型的新特性，通过传入层级深度参数（默认为1），来为下层数组提升层级。如果想提升所有层级可以写一个比较大的数字,不推荐这么做。 flatMap()方法首先使用映射函数映射每个元素，然后将结果展平为新数组。

[1, 2, [3, 4]].flat();
// [1, 2, 3, 4]
[1, 2, [3, 4, [5, 6]]].flat(2);
// [1, 2, 3, 4, 5, 6]

[1,2,3,4].flatMap(v => [v, v * 2]);
// [1, 2, 2, 4, 3, 6, 4, 8]

7. catch 的参数改为可选

在进行try…catch错误处理过程中，如果没有给catch传参数的话，代码就会报错。在新规范中，可以省略catch绑定的参数和括号。

try{
	return true;
}catch{
	return false;
}

8. 空值合并运算符（??）

当左侧操作数为 null 或 undefined 时，其返回右侧的操作数。否则返回左侧的操作数

const str = null ?? 'default string';
console.log(str);
// expected output: "default string"

const num = 0 ?? 42;
console.log(num);
// expected output: 0

/**  注意
 * 与逻辑或（||）操作符不同，逻辑或会在左操作数为 假值 时返回右侧操作数,例如'' 或者 0
 */

9. 可选链式操作符（?.）

如果访问对象上不存在的属性上的属性，使用.操作符会直接报错，使用?.返回undefined

let obj = {};
console.log(obj.person.name)
// Cannot read properties of undefined (reading 'name')

console.log(obj.?person?.name)
// expected output:undefine

10. Object.fromEntries()

Object.entries把一个对象转为[key, value]键值对的形式。Object.fromEntries()用于把键值对还原成对象结构

const entries = [ ['name', 'zyx'] ];
const object = Object.fromEntries(entries);
// { name: 'zyx' }