ECMAScript 2024(ES11) 的新特性总结

最新推荐文章于 2024-09-21 20:20:43 发布

2401_84153193

最新推荐文章于 2024-09-21 20:20:43 发布

阅读量736

点赞数 9

分类专栏：程序员文章标签： ecmascript 前端 javascript

本文链接：https://blog.csdn.net/2401_84153193/article/details/138682912

版权

程序员专栏收录该内容

173 篇文章 0 订阅

订阅专栏

// 当 a 不为 undefined 或 null 时，getDefaultValue 方法不会被执行

但需要注意一点，该运算符不能与 AND 或 OR 运算符共用，否则会抛出语法异常：

a && b ?? “default” // SyntaxError

这种代码的歧义比较严重，在不同人的理解中，可能有的人觉得按(a && b) ?? "default"运行是合理的，而另外一些人却觉得按a && (b ?? "default")运行才对，因此在设计该运算符时就干脆通过语法上的约束来避免了这种情况。如果确实需要在同一个表达式中同时使用它们，那么使用括号加以区分即可：

(a && b) ?? “default”

这个操作符的主要设计目的是为了给可选链操作符提供一个补充运算符，因此通常是和可选链操作符一起使用的：

const x = a?.b ?? 0;

下面介绍下ES11新增的可选链操作符（?.）

3、可选链接

当我们需要尝试访问某个对象中的属性或方法而又不确定该对象是否存在时，该语法可以极大的简化我们的代码，比如下面这种情况：

const el = document.querySelector(“.class-a”)

const height = el.clientHeight

当我们并不知道页面中是否真的有一个类名为 class-a 的元素，因此在访问clientHeight之前为了防止bug产生需要先进行一些判断：

const height = el ? el.clientHeight : undefined

上面的写法虽然可以实现，但是的确有人会觉得麻烦，而使用「可选链操作符」，就可以将代码简化成如下形式：

const height = el?.clientHeight

下面介绍常用的使用场景：

属性访问

需要获取某个对象中的属性，就都可以使用该语法：

a?.b

a?.[x]

上面的代码中，如果 a 为undefined或null，则表达式会立即返回undefined，否则返回所访问属性的值。也就是说，它们与下面这段代码是等价的：

a == null ? undefined : a.b

a == null ? undefined : a[x]

方法调用

在尝试调用某个方法时，也可以使用该语法：

a?.()

同样是如果 a 为undefined或null，则返回undefined，否则将调用该方法。不过需要额外注意的是，该操作符并不会判断 a 是否是函数类型，因此如果 a 是一个其它类型的值，那么这段代码依然会在运行时抛出异常。

访问深层次属性

在访问某个对象较深层级的属性时，也可以串联使用该操作符：

a?.b?.[0]?.()?.d

可能有人会懒得先去判断是否真的有必要，就给访问链路中的每个属性都加上该操作符。但类似上面代码中所展示的那样，这种代码可读性比较差。而且若真的有一个应当存在的对象因为某些 bug 导致它没有存在，那么在访问它时就应当是抛出异常，这样可以及时发现问题，而不是使它被隐藏起来。建议只在必要的时候才使用可选链操作符。

4、BigInt

在 ES 中，所有 Number 类型的值都使用 64 位浮点数格式存储，因此 Number 类型可以有效表示的最大整数为 2^53。而使用新的 BigInt 类型，可以操作任意精度的整数。

有两种使用方式：1、在数字字面量的后面添加后缀n；2、使用其构造函数BigInt

const bigInt = 9007199254740993n

const bigInt = BigInt(9007199254740992)

// 在超过 Number 最大整数限制时，我们也可以改为传入一个可能被正确解析的字符串

const bigInt = BigInt(‘9007199254740993’)

和 Number 类似，BigInt 也支持+、-、、**、%运算符：

3n + 2n // => 5n

3n 2n // => 6n

3n 2n // => 9n

3n % 2n // => 1n

但因为 BigInt 是纯粹的整数类型，无法表示小数位，因此 BigInt 的除法运算（/）的结果值依然还是一个整数，即向下取整：

const bigInt = 3n;

bigInt / 2n; // => 1n，而不是 1.5n

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

同样也位支持位运算符，除了无符号右移运算符：

1n & 3n // => 1n

1n | 3n // => 3n

1n ^ 3n // => 2n

~1n // => -2n

1n << 3n // => 8n

1n >> 3n // => 0n

1n >>> 3n // Uncaught TypeError: BigInts have no unsigned right shift, use >> instead

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

BigInt 可以和字符串之间使用+运算符连接

1n + ’ Number’ // => 1 Number

'Number ’ + 2n // => Number 2

下面这些场景不支持使用BigInt：

1、BigInt 无法和 Number 一起运算，会抛出类型异常

1n + 1

// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

2、一些内置模块如 Math 也不支持 BigInt，同样会抛出异常

Math.pow(2n, 64n)

// Uncaught TypeError: Cannot convert a BigInt value to a number

3、BigInt 和 Number 相等，但并不严格相等，但他们之间可以比较大小

1n 1 // => true

1n = 1 // => false

但他们之间是可以比较大小的：

1n < 2 // => true

1n < 1 // => false

2n > 1 // => true

2n > 2 // => false

而且在转换为 Boolean 值时，也和 Number 一样，0n 转为 false，其它值转为 true：

!!0n // => false

!!1n // => true

另外两者之间只能使用对方的构造函数进行转换：

Number(1n) // => 1

BigInt(1) // => 1n

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

但两者之间的转换也都有一些边界问题：

// 当 BigInt 值的精度超出 Number 类型可表示的范围时，会出现精度丢失的问题

Number(9007199254740993n)

// => 9007199254740992

// 当 Number 值中有小数位时，BigInt 会抛出异常

BigInt(1.1)

// VM4854:1 Uncaught RangeError: The number 1.1 cannot be converted to a BigInt because it is not an integer

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

配套地，在类型化数组中也提供了与 BigInt 对应的两个数组类型：BigInt64Array和BigUint64Array：

const array = new BigInt64Array(4);

array[0] // => 0n

array[0] = 2n

array[0] // => 2n

但因为每个元素限定只有 64 位，因此即便使用无符号类型，最大也只能表示 2^64 - 1：

const array = new BigUint64Array(4);

array[0] = 2n 64n

array[0] // => 0n

array[0] = 2n ** 64n - 1n

array[0] // => 18446744073709551615n

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5、globalThis

浏览器：window、worker：self、node：global

在浏览器环境中，我们可以有多种方式访问到全局对象，最常用到的肯定是 window，但除此之外还有 self，以及在特殊场景下使用的 frames、paraent 以及 top。

我们通常不怎么需要关心 window 和 self 之间的区别，但如果使用 Web Worker，那就应当了解 window 是只在主线程中才有的全局属性，在 Worker 线程中，我们需要改为使用 self。

而在 node.js 环境中，我们需要使用 global，至于像 JSC.js 这种更小众的环境中，则需要使用 this。

在一般的开发工作中，可能很少需要访问全局环境，而且大多时候也只需要基于一种环境进行开发，所以不太需要处理这种麻烦的问题。但是对于 es6-shim 这种需要支持多种环境的基础库来说，它们需要解决这个问题。

早先，我们可以通过下面这段代码较为方便地拿到全局对象：

const globals = (new Function(‘return this;’))()

但受到 Chrome APP 内容安全策略的影响（为缓解跨站脚本攻击的问题，该政策要求禁止使用 eval 及相关的功能），上面这段代码将无法在 Chrome APP 的运行环境中正常执行。

无奈之下，像 es6-shim 这种库就只能穷举所有可能的全局属性：

var getGlobal = function () {

// the only reliable means to get the global object is

// Function('return this')()

// However, this causes CSP violations in Chrome apps.

if (typeof self ! ‘undefined’) { return self; }

if (typeof window ! ‘undefined’) { return window; }

if (typeof global ! ‘undefined’) { return global; }

throw new Error(‘unable to locate global object’);

};

var globals = getGlobal();

if (!globals.Reflect) {

defineProperty(globals, ‘Reflect’, {}, true);

}

这种问题等真的遇到了，每次处理起来也是很麻烦的。所以才有了这次提案中的 globalThis。

通过 globalThis，我们终于可以使用一种标准的方法拿到全局对象，而不用关心代码的运行环境。对于 es6-shim 这种库来说，这是一个极大的便利特性：

if (!globalThis.Reflect) {

defineProperty(globalThis, ‘Reflect’, {}, true);

}

另外，关于 globalThis 还有一些细节的问题，比如为满足 Secure ECMAScript 的要求，globalThis 是可写的。而在浏览器页面中，受到 outer window 特性的影响，globalThis 实际指向的是 WindowProxy，而不是当前页面内真实的全局对象（该对象不能被直接访问）。

6、Promise.allSettled

在 Promise上有提供一组组合方法（比如最常用到的 Promise.all），它们都是接收多个 promise 对象，并返回一个表示组合结果的新的 promise，依据所传入 promise 的结果状态，组合后的 promise 将切换为不同的状态。

目前为止这类方法一共有如下四个，这四个方法之间仅有判断逻辑上的区别，也都有各自所适用的场景：

Promise.all 返回一个组合后的 promise，当所有 promise 全部切换为 fulfilled 状态后，该 promise 切换为 fulfilled 状态；但若有任意一个 promise 切换为 rejected 状态，该 promise 将立即切换为 rejected 状态；
Promise.race 返回一个组合后的 promise，当 promise 中有任意一个切换为 fulfilled 或 rejected 状态时，该 promise 将立即切换为相同状态；
Promise.allSettled 返回一个组合后的 promise，当所有 promise 全部切换为 fulfilled 或 rejected 状态时，该 promise 将切换为 fulfilled 状态；
Promise.any 返回一个组合后的 promise，当 promise 中有任意一个切换为 fulfilled 状态时，该 promise 将立即切换为 fulfilled 状态，但只有所有 promise 全部切换为 rejected 状态时，该 promise 才切换为 rejected 状态。_（_ECMAScript2021 ）