随着 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() 方法的示例代码：
-- -------------------- ---- ------- -- ----- --- ---- - --- -- --- ---- ------------ -- --- -- -- -- -- ---- --- ---- - --- -- --- --- ----- ------------ -- --- -- -- --- --- ------------- -- --- -- -- -- -- -- -- -------- ---------- --- ---- - --- --- --- --- -------- -------------------- -- --- -- -- -- --
Array.prototype.flat() 的使用指南
当我们需要对嵌套数组进行处理时，使用 Array.prototype.flat() 方法是一个不错的选择。下面是一些使用指南：
1. 将嵌套数组转成一维数组
通过 Array.prototype.flat() 方法，我们可以将嵌套数组转换成一维数组，便于我们处理和操作。
例如，我们有一个二维数组，需要将其转换成一维数组，可以使用下面的代码：
let arr = [[1, 2], [3, 4], [5, 6]]; let flatArr = arr.flat();
2. 处理异步操作返回的数据
在异步操作中，有时候我们会遇到嵌套数组的情况。例如：
-- -------------------- ---- -------
--- ---- - -
-
----- ------
------ --- -- --
--
-
----- -------
------ --- -- --
-
--如果我们需要将这个数据展开成一个一维数组，可以这样做：
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