Array.prototype.flat()：ES9 带来的扁平化数组方法

在 JavaScript 中操作数组是开发中经常遇见的任务。然而在实际开发中，数据结构通常是层次化的嵌套结构，这让数组操作变得复杂。然而，ES9 中提供了一个新的方法，用于一次性扁平化嵌套数组。该方法为 Array.prototype.flat()，在本文中，我们将深入了解这个方法的使用和指导意义。

什么是扁平化数组

扁平化数组是指将多维嵌套数组变成一维数组。例如，考虑以下嵌套数组：

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

在扁平化该数组之后，得到的结果为：

const flattenedArr = [1, 2, 3, 4, 5, 6];

Array.prototype.flat() 方法

ES9 引入了一个新的数组方法 Array.prototype.flat()，用于扁平化数组。该方法的使用格式如下：

const flattenedArr = arr.flat([depth]);

其中 arr 是要扁平化的数组，depth 是一个可选的参数，用于指定扁平化的层次深度。默认值为 1，即扁平化一层。

例如，考虑下面的嵌套数组：

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

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

const deeperFlattenedArr = arr.flat(2);
console.log(deeperFlattenedArr); // [1, 2, 3, 4, 5, 6]

Array.prototype.flatMap() 方法

Array.prototype.flatMap() 方法是 Array.prototype.map() 方法和 Array.prototype.flat() 方法的结合体。该方法首先对数组中的每个元素执行 callback 函数，然后将得到的结果扁平化成一个新数组。该方法的使用格式如下：

const newFlattenedArr = arr.flatMap(callback);

例如，考虑下面的数组：

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

const doubledArr = arr.flatMap(x => [x, x * 2]);
console.log(doubledArr); // [1, 2, 2, 4, 3, 6, 4, 8]

在上面的例子中，对于数组中的每个元素，我们将它复制一遍，输出一个新的数组。然后使用 flatMap() 方法扁平化这个数组，生成一个新的数组。

指导意义

Array.prototype.flat() 方法和 Array.prototype.flatMap() 方法是 ES9 新增的强大方法，能够极大地简化数组的处理。尤其是在处理嵌套层次深的数组时，使用这两个方法能够极大地简化代码。同时，在处理异步操作时，flatMap() 方法可以更好地处理 Promise 数组，从而简化异步操作的代码。

async function fetchEntries() {
  const response = await Promise.all([fetch('/page1'), fetch('/page2')]);
  const textEntries = await response.flatMap(res => res.text());
  return textEntries;
}

结论

在本文中，我们深入了解了 ES9 的 Array.prototype.flat() 和 Array.prototype.flatMap() 方法的使用和指导意义。通过这些新的数组方法，我们可以轻松地将深层嵌套的数组转换成一维数组。同时，这些方法也提高了异步操作和 Promise 的处理能力。

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