ES10 中的新数组方法：Array.prototype.flat() 详解-JavaScript中文网-JavaScript教程资源分享门户

随着 web 技术的不断更新和迭代，前端领域的发展也越来越快速。随之而来的是各种新的技术和工具，其中 ES10 中的新数组方法 Array.prototype.flat() 就是一个很好的例子。本文将详细介绍这个新的方法，包括其作用、语法、示例代码以及使用指南。

什么是 Array.prototype.flat()？

Array.prototype.flat() 是 ES10 中新增加的一个数组方法，用于“将一个嵌套多层的数组（嵌套数组）转换为一个“扁平”的数组”。它可以将一个嵌套的数组 “压扁” 成为一个一维数组。这个方法在处理嵌套数组数据时，可以帮助我们更方便地进行数据处理。

Array.prototype.flat() 的语法

这个方法的语法如下：

array.flat([depth])

其中，array 表示要操作的数组。depth 表示要展开的嵌套层数，它是一个可选参数，默认值为 1（即只展开一层）。如果 depth 的值为 Infinity，则会展开所有嵌套层级。

Array.prototype.flat() 示例代码

下面是 Array.prototype.flat() 方法的示例代码：

// 只展开一层
let arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

// 展开多层
let arr2 = [1, 2, [3, [4, 5]]];
arr2.flat(); // [1, 2, 3, [4, 5]]
arr2.flat(2); // [1, 2, 3, 4, 5]

// 使用 Infinity 参数展开所有嵌套层级
let arr3 = [1, [2, [3, [4, [5]]]]];
arr3.flat(Infinity); // [1, 2, 3, 4, 5]

Array.prototype.flat() 的使用指南

当我们需要对嵌套数组进行处理时，使用 Array.prototype.flat() 方法是一个不错的选择。下面是一些使用指南：

1. 将嵌套数组转成一维数组

通过 Array.prototype.flat() 方法，我们可以将嵌套数组转换成一维数组，便于我们处理和操作。

例如，我们有一个二维数组，需要将其转换成一维数组，可以使用下面的代码：

let arr = [[1, 2], [3, 4], [5, 6]];
let flatArr = arr.flat();

2. 处理异步操作返回的数据

在异步操作中，有时候我们会遇到嵌套数组的情况。例如：

let data = [
  {
    name: 'Tom',
    items: [1, 2, 3]
  },
  {
    name: 'Mary',
    items: [4, 5, 6]
  }
];

如果我们需要将这个数据展开成一个一维数组，可以这样做：

let result = [];

data.forEach((item) => {
  result.push(...item.items);
});

console.log(result); // [1, 2, 3, 4, 5, 6]

或者使用 Array.prototype.flat() 方法，简化代码：

let result = data.flat().map((item) => item.items).flat();
console.log(result); // [1, 2, 3, 4, 5, 6]

3. 过滤数组中的空值

在实际开发中，我们有时需要对数组中的空值进行过滤。如果数组是嵌套的，过滤会变得更复杂。我们可以使用 Array.prototype.flat() 方法将嵌套数组展开，再进行过滤。

例如，我们有一个包含空值的二维数组，需要将其中的空值全部过滤掉，可以这样做：

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

let result = arr.flat().filter((item) => {
  return item !== undefined;
});

console.log(result); // [1, 2, 3, 4, 5, 6]

总结

Array.prototype.flat() 是一个很实用的方法，在开发中经常会用到。通过这篇文章的介绍，相信大家已经掌握了它的基本用法和相关示例代码，希望对大家的前端开发有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6593c16deb4cecbf2d864ad9

ES10 中的新数组方法：Array.prototype.flat() 详解