<返回更多

七个你可能还不知道的强大的 JavaScript 特性

2023-04-10  微信公众号  web前端开发
加入收藏

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 功能中的一小部分。通过跟上语言的最新更新,您可以编写更高效、更简洁的代码,并利用可以帮助您成为更好的开发人员的新工具和技术。

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>