在 2020 年的 ECMAScript(ES)新规范中,引入了很多新特性和更新,让前端开发变得更加方便和高效。其中最值得关注的是可空链式调用操作符和空值合并操作符这两个新的操作符,以及对 Promise 和 BigInt 的更新。下面我们将对这些新特性进行详细的解析和学习。
可空链式调用操作符
在编写代码的过程中,经常需要判断一个对象的属性是否存在,以避免出现 undefined
异常。不过,在 ES6 之前,这种判断比较麻烦,需要使用三元表达式或者一大堆的 if/else
语句。
在 ES2020 中,加入了可空链式调用操作符 ?.
,可以更加简单和直接地判断对象属性是否存在。例如下面代码中,如果 user
或其属性 address
或其属性 city
不存在,则不会抛出异常,而是直接返回 undefined
:
const city = user?.address?.city;
在上面的代码中,如果 user
存在,但是 address
或 city
不存在,则 city
变量的值为 undefined
。如果 user
不存在,则 city
变量也为 undefined
。
?.
操作符可以多次嵌套使用,以判断更深层次的属性是否存在。例如:
const city = user?.orders?.[0]?.products?.[0]?.city;
上面的代码中,如果 user
、orders
、products
数组不存在或为空,则会直接返回 undefined
,而不会引起异常。
空值合并操作符
在编写代码的过程中,常常需要给变量赋一个默认值,以免变量为 undefined
时造成异常。例如:
const name = username || "Unknown";
上面的代码中,如果 username
为 undefined
,则 name
将被赋值为 "Unknown"
。这种方式是在 ES5 中推荐的解决方式。
在 ES2020 中,引入了空值合并操作符 ??
,可以更加简单和直接地进行默认值的赋值。例如:
const name = username ?? "Unknown";
上面的代码中,如果 username
为 null
或 undefined
,则 name
将被赋值为 "Unknown"
。空值合并操作符可以处理 null
和 undefined
,而 ||
操作符只能处理 undefined
。
Promise.allSettled
在 ES2020 中,更新了 Promise 对象,引入了 Promise.allSettled()
方法。它和 Promise.all()
的作用类似,都是等待所有操作完成后返回结果。不同的是,Promise.allSettled()
不会像 Promise.all()
那样在有一个操作失败时就退出,而是等待所有操作完成,无论成功与否都会返回结果。
例如,下面的代码中,Promise.all()
会在第二个请求失败时就抛出异常,而 Promise.allSettled()
则会等待所有请求完成后返回一个结果数组:
-- -------------------- ---- ------- ----- -------- - - ---------------- ------------------- ---------------- -- --------------------- -------------- --------- -------- -- - -- --- -- ------------ -- - --------------------- --- ---------------------------- ------------- -- - ------------------------------- ------------------------------- ------------------------------- -- ------------ -- - --------------------- ---展开代码
BigInt
在 ES2020 中,更新了数字类型,引入了 BigInt
类型。它可以表示任意大的整数,而且不会丢失精度。使用 n
后缀可以将整数转换为 BigInt
类型。
例如:
const big = 123456789012345678901234567890n;
上面的代码中,big
的值为 123456789012345678901234567890
,它是一个 BigInt
类型的整数。
BigInt
类型的整数可以与普通类型的整数进行运算,但不能与浮点数进行运算。例如:
-- -------------------- ---- ------- ----- ------ - -------------------------------- ----- --- - --- ------------------ - ----- -- ------- ------------------------------- ------------------ -- --- -- ------- ------------------------ ---------------- - ---- -- ------- ---------- ------ --- ------ --- ----- -----展开代码
结语
以上就是 ECMAScript 2020 的核心新特性。可空链式调用操作符和空值合并操作符可以使代码更加简洁和易读,Promise.allSettled()
可以更好地处理 Promise 对象,BigInt
类型可以更好地处理大整数。学习和掌握这些新特性,可以让我们在前端开发中更加高效和轻松。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c51b0a6e1fc40e36e61e99