ES11 中与展开合并相关的改进-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，... 语法被引入用于展开操作，使我们可以方便地将一个数组或对象展开成多个元素或属性。ES11（也称为 ECMAScript 2020）进一步增强了这个语法，加入了一些新特性和用法，下面将详细介绍。

数组展开

1. `Array.prototype.at()`

Array.prototype.at() 方法是 ES11 新增的方法，它允许通过正负整数访问数组中指定位置的元素。比如，我们可以这样获取倒数第二个元素：

const arr = [1, 2, 3];
console.log(arr.at(-2)); // 2

使用 [index] 的形式无法实现这一点，因为它只能接受非负整数作为索引，而且如果越界还会返回 undefined。

2. `Array.prototype.filter()`

Array.prototype.filter() 方法的回调函数支持异步操作，这使得我们可以使用 async/await 语法进行筛选。

例如，我们可以使用 fetch 请求远程数据并根据条件筛选结果集：

const condition = /* ... */;
const result = await fetch('/data').then(response => response.json());
const filteredResult = await result.filter(async item => {
  const data = await fetchData(item.id);
  return condition(data);
});

3. `Array.prototype.flatMap()`

Array.prototype.flatMap() 方法和 Array.prototype.map() 类似，不同之处在于它的回调函数返回一个数组，并将这个数组展开到最终结果中。

例如，我们可以将一个含有嵌套数组的数组进行扁平化：

const arr = [[1, 2], [3], [], [4, 5, 6]];
const flattenedArr = arr.flatMap(item => item);
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

对象展开

1. 新增 `||` 运算符

ES11 加入了 || 运算符的新用法，允许我们使用对象展开来为对象指定默认值。

例如，我们可以使用对象展开来实现参数的默认值：

function fn(options = {}) {
  const { a = 1, b = 'hello', c = [] } = options;
  // ...
}

变成：

function fn(options = {}) {
  const { a = 1, b = 'hello', c = [] } = { ...options };
  // ...
}

这样做可以避免修改传入的参数对象。

2. 可选链操作符与对象展开结合

ES11 引进了可选链操作符 ?.，可以方便地处理对象属性不存在的情况。与对象展开结合可以使我们只复制存在的属性，而忽略不存在的属性。

例如，我们可以使用这个特性来合并多个对象：

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3 };
const mergedObj = {
  ...obj1,
  ...(obj2?.d && { d: obj2.d }),
};

这样做可以避免复制不存在的属性，从而使代码更加可靠。

总结

ES11 增强了数组和对象展开语法的功能，使得我们可以更加方便地处理数组和对象。其中 Array.prototype.at()、Array.prototype.filter() 和 Array.prototype.flatMap() 增加了对异步操作的支持，而新增的 || 运算符和可选链操作符与对象展开结合则让我们能够更好地处理默认值和缺失属性的情况。这些改进都将极大地提升 JavaScript 开发效率和代码可读性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/651bc82f95b1f8cacd366988

ES11 中与展开合并相关的改进

数组展开

1. Array.prototype.at()

2. Array.prototype.filter()

3. Array.prototype.flatMap()