七个你可能还不知道的强大的 JavaScript 特性-51CTO.COM

1.可选链接

可选链接是 JavaScript 中的一项新功能，它允许开发人员编写更简洁、更易于阅读的代码。使用可选链接，您可以访问对象的嵌套属性，而不必担心这些属性是否存在。

const user = {
  name: 'John',
  address: {
    city: 'New York',
    state: 'NY'
  }
};


console.log(user?.address?.city); // Output: New York
console.log(user?.address?.zipCode); // Output: undefined

在上面的示例中，我们使用可选的链接运算符 (?.) 来访问地址对象的 city 属性。如果 address 对象不存在，或者它没有 city 属性，代码将简单地返回 undefined。

2. 无效合并运算符

nullish 合并运算符 (??) 是 JavaScript 中的另一个新功能，可用于为可能为 null 或未定义的变量提供默认值。

const name = null ?? 'John';


console.log(name); // Output: John

在上面的示例中，我们使用 nullish 合并运算符将默认值“John”分配给 name 变量，因为它的初始值为 null。

3.Promise.allSettled()

Promise.allSettled() 方法是 JavaScript 中 Promise API 的新增功能。它允许开发人员同时运行多个Promise并获得所有Promise的结果，无论它们是解决还是拒绝。

const promises = [
  Promise.resolve(1),
  Promise.reject('Error'),
  Promise.resolve(3)
];


Promise.allSettled(promises)
  .then(results => console.log(results));


// Output:
// [
//   { status: 'fulfilled', value: 1 },
//   { status: 'rejected', reason: 'Error' },
//   { status: 'fulfilled', value: 3 }
// ]

在上面的示例中，我们使用 Promise.allSettled() 方法同时运行三个Promise，然后记录所有承诺的结果，包括被拒绝的结果。

4. 对象.fromEntries()

Object.fromEntries() 方法是 JavaScript 中对象 API 的新增功能。它允许开发人员从键值对数组创建对象。

const entries = [
  ['name', 'John'],
  ['age', 30],
  ['city', 'New York']
];


const obj = Object.fromEntries(entries);


console.log(obj); // Output: { name: 'John', age: 30, city: 'New York' }

在上面的示例中，我们使用 Object.fromEntries() 方法从键值对数组创建对象。

5.BigInt

BigInt 数据类型是 JavaScript 的新增功能，它允许开发人员使用大于 Number 数据类型支持的最大值的整数。

const a = BigInt(9007199254740991);
const b = BigInt(9007199254740991);


console.log(a + b); // Output: 18014398509481982n

在上面的示例中，我们使用 BigInt 将两个非常大的数字相加。

6.可选的 Catch 绑定

可选的 catch 绑定是 JavaScript 中的一项新功能，它允许开发人员在不需要参数的情况下捕获错误。这可以使代码更简洁，更易于阅读。

try {
// some code that may throw an error
} catch {
// handle the error without a parameter
}

在上面的示例中，我们使用可选的 catch 绑定来捕获错误而不指定参数。如果您不需要在 catch 块中使用错误对象，这会很有用。

7.数组.prototype.flatMap()

Array.prototype.flatMap() 方法是 JavaScript 中 Array API 的新增功能。它允许开发人员在一个步骤中映射然后展平数组。

const arr = [1, 2, 3, 4];


const result = arr.flatMap(x => [x * 2]);


console.log(result); // Output: [2, 4, 6, 8]

在上面的示例中，我们使用 Array.prototype.flatMap() 方法将数组的每个元素乘以 2，然后将结果数组展平为单个数组。

结论

这些只是可供开发人员使用的许多很酷的现代 JavaScript 功能中的一小部分。通过跟上语言的最新更新，您可以编写更高效、更简洁的代码，并利用可以帮助您成为更好的开发人员的新工具和技术。