全面解析 ECMAScript 2020:可空链式调用操作符、空值合并操作符和其它新特性

阅读时长 5 分钟读完

在 2020 年的 ECMAScript(ES)新规范中,引入了很多新特性和更新,让前端开发变得更加方便和高效。其中最值得关注的是可空链式调用操作符和空值合并操作符这两个新的操作符,以及对 Promise 和 BigInt 的更新。下面我们将对这些新特性进行详细的解析和学习。

可空链式调用操作符

在编写代码的过程中,经常需要判断一个对象的属性是否存在,以避免出现 undefined 异常。不过,在 ES6 之前,这种判断比较麻烦,需要使用三元表达式或者一大堆的 if/else 语句。

在 ES2020 中,加入了可空链式调用操作符 ?.,可以更加简单和直接地判断对象属性是否存在。例如下面代码中,如果 user 或其属性 address 或其属性 city 不存在,则不会抛出异常,而是直接返回 undefined

在上面的代码中,如果 user 存在,但是 addresscity 不存在,则 city 变量的值为 undefined。如果 user 不存在,则 city 变量也为 undefined

?. 操作符可以多次嵌套使用,以判断更深层次的属性是否存在。例如:

上面的代码中,如果 userordersproducts 数组不存在或为空,则会直接返回 undefined,而不会引起异常。

空值合并操作符

在编写代码的过程中,常常需要给变量赋一个默认值,以免变量为 undefined 时造成异常。例如:

上面的代码中,如果 usernameundefined,则 name 将被赋值为 "Unknown"。这种方式是在 ES5 中推荐的解决方式。

在 ES2020 中,引入了空值合并操作符 ??,可以更加简单和直接地进行默认值的赋值。例如:

上面的代码中,如果 usernamenullundefined,则 name 将被赋值为 "Unknown"。空值合并操作符可以处理 nullundefined,而 || 操作符只能处理 undefined

Promise.allSettled

在 ES2020 中,更新了 Promise 对象,引入了 Promise.allSettled() 方法。它和 Promise.all() 的作用类似,都是等待所有操作完成后返回结果。不同的是,Promise.allSettled() 不会像 Promise.all() 那样在有一个操作失败时就退出,而是等待所有操作完成,无论成功与否都会返回结果。

例如,下面的代码中,Promise.all() 会在第二个请求失败时就抛出异常,而 Promise.allSettled() 则会等待所有请求完成后返回一个结果数组:

-- -------------------- ---- -------
----- -------- - -
  ----------------
  -------------------
  ----------------
--

---------------------
  -------------- --------- -------- -- -
    -- ---
  --
  ------------ -- -
    ---------------------
  ---

----------------------------
  ------------- -- -
    -------------------------------
    -------------------------------
    ------------------------------- 
  --
  ------------ -- -
    ---------------------
  ---
展开代码

BigInt

在 ES2020 中,更新了数字类型,引入了 BigInt 类型。它可以表示任意大的整数,而且不会丢失精度。使用 n 后缀可以将整数转换为 BigInt 类型。

例如:

上面的代码中,big 的值为 123456789012345678901234567890,它是一个 BigInt 类型的整数。

BigInt 类型的整数可以与普通类型的整数进行运算,但不能与浮点数进行运算。例如:

-- -------------------- ---- -------
----- ------ - --------------------------------
----- --- - ---

------------------ - -----
-- ------- -------------------------------

------------------ -- ---
-- ------- ------------------------

---------------- - ----
-- ------- ---------- ------ --- ------ --- ----- -----
展开代码

结语

以上就是 ECMAScript 2020 的核心新特性。可空链式调用操作符和空值合并操作符可以使代码更加简洁和易读,Promise.allSettled() 可以更好地处理 Promise 对象,BigInt 类型可以更好地处理大整数。学习和掌握这些新特性,可以让我们在前端开发中更加高效和轻松。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c51b0a6e1fc40e36e61e99

纠错
反馈

纠错反馈

程序员教程

精选优质教程,助你快速提升技术实力

程序员面试题库

海量优质面试题,助你轻松应对技术面试