JavaScript 是一种高级编程语言，被广泛应用于 Web 开发、游戏开发、移动应用开发等多个领域。当我们编写 JavaScript 代码时，除了关注其功能实现外，还需要注意其可读性，因为代码的可读性决定着代码的可维护性、协作性和扩展性。
在 ES2021（ECMAScript 2021）中，有一些新的特性可以帮助我们提高 JavaScript 代码的可读性。本文将介绍这些特性，并提供一些示例代码，帮助读者更好地理解和使用这些特性。
1. Optional Chaining（可选链式调用）
在 JavaScript 中，我们经常需要对对象的链式属性进行访问。例如：
const name = data && data.user && data.user.name;
这段代码判断 data、data.user、data.user.name 是否存在，并将 name 赋值给变量。这种写法很繁琐，也容易写错。
ES2021 引入了 Optional Chaining，可以简化这种链式访问的写法。使用 Optional Chaining，上面的代码可以写成：
const name = data?.user?.name;
这段代码只有当 data、data.user、data.user.name 全部存在时，才会将 name 赋值给变量。如果其中任何一级属性不存在，直接返回 undefined。这种写法简单易懂，也容易调试。
2. Nullish Coalescing（为空合并）
JavaScript 语言规定，当一个变量为 falsy 值（如 false、0、''、null、undefined、NaN）时，会被视为 false。在一些场景下，我们需要判断一个值是否为 null 或 undefined。例如：
const name = data.name || 'default';
这段代码判断 data.name 是否存在，如果不存在则将 'default' 赋值给变量 name。但是当 data.name 的值为 '' 或 0 时，同样会被视为 false，导致 'default' 被赋值给变量。这种写法有些问题。
ES2021 引入了 Nullish Coalescing，可以解决上述问题。使用 Nullish Coalescing，上面的代码可以写成：
const name = data.name ?? 'default';
这段代码只有当 data.name 的值为 null 或 undefined 时，才会将 'default' 赋值给变量 name。当 data.name 的值为 '' 或 0 时，仍会被视为 true。
3. Top-level await（顶层 await）
在 JavaScript 中，通过 async/await 可以实现异步编程。但是在 ES2020 之前，await 只能在 async 函数内部使用，不能在全局作用域使用。这导致了一些限制，例如需要在 async 函数内部调用其他 async 函数时，需要使用 IIFE（Immediately Invoked Function Expression）或者自执行匿名 async 函数。
ES2021 引入了 Top-level await，可以在全局作用域内使用 await。例如，我们可以直接使用 await 调用异步函数：
const data = await fetch('https://api.example.com/data');这可以简化异步编程的写法，提高代码的可读性。
4. Record 和 Tuple
ES2021 引入了两个新的数据类型：Record 和 Tuple。这些新的数据类型可以帮助我们更好地定义和使用数据结构，提高代码的可读性。
Record 表示一个键值对集合，其中每个键都有一个固定的类型，每个值都有一个固定的类型。例如：
-- -------------------- ---- ------- ---- ---- - - --- ------- ----- ------- ------ ------- - ----- ------ -------------- ----- - - -- - --- -- ----- -------- ------ ------------------- -- -- - --- -- ----- ------ ------ ----------------- -- -- - --- -- ----- ---------- ------ --------------------- -- --
这段代码定义了一个 Record 类型的变量 users，其中键的类型为 number，值的类型为 User。
Tuple 表示一个元素集合，其中每个元素都有一个固定的类型和固定的数量。例如：
type Point = [number, number]; const pt: Point = [3, 5];
这段代码定义了一个 Tuple 类型的变量 pt，其中元素的类型为 number，数量为 2。
总结
ES2021 引入了许多新的特性，可以帮助我们提高 JavaScript 代码的可读性。本文介绍了四个特性：Optional Chaining、Nullish Coalescing、Top-level await 和新的数据类型 Record 和 Tuple。了解这些特性，不仅可以帮助我们写出更清晰易懂的代码，还能提高代码的可维护性、协作性和扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476df2e968c7c53b037a7ba