在开发前端项目时，经常会用到嵌套的数组来组织数据。但是当数组有多级嵌套时，操作变得复杂而繁琐。ES10 新增了两个数组方法 —— Array.flat 和 Array.flatMap。它们可以用来解决多级数组嵌套的问题。
Array.flat
Array.flat 方法可以将多级数组嵌套平铺成一维数组。该方法接收一个可选参数 depth，表示需要平铺的深度。例如：
const nestArr = [1, 2, [3, 4, [5, 6]]]; const flatArr = nestArr.flat(2); console.log(flatArr); // [1, 2, 3, 4, 5, 6]
上述代码中，nestArr 是一个多级嵌套的数组，使用 flat(2) 将其平铺成一维数组，结果为 [1, 2, 3, 4, 5, 6]。
如果不传入 depth 参数，则默认平铺一层。例如：
const nestArr = [1, 2, [3, 4, [5, 6]]]; const flatArr = nestArr.flat(); console.log(flatArr); // [1, 2, 3, 4, [5, 6]]
上述代码中，nestArr 是一个多级嵌套的数组，使用 flat() 将其平铺一层，结果为 [1, 2, 3, 4, [5, 6]]。
Array.flatMap
Array.flatMap 方法可以将原数组的每个元素映射成一个新的数组，并将所有数组拼接成一个新的数组。例如：
const arr = [1, 2, 3]; const newArr = arr.flatMap((item) => [item * 2]); console.log(newArr); // [2, 4, 6]
上述代码中，arr 是一个普通数组，使用 flatMap 将它的每个元素都乘以 2，结果为 [2, 4, 6]。
flatMap 方法还可以接受第二个可选参数，表示映射函数中this的指向。例如：
const arr = ["apple", "banana", "orange"];
const newArr = arr.flatMap(function (item) {
return this.basket.map((fruit) => `${fruit} ${item}`);
}, { basket: ["big", "small"] });
console.log(newArr);
// ['big apple', 'small apple', 'big banana', 'small banana', 'big orange', 'small orange']上述代码中，this 指向一个对象，该对象包含 basket 属性，其值为 ["big", "small"]。flatMap 方法将每个元素与 basket 数组拼接，最终结果为 ['big apple', 'small apple', 'big banana', 'small banana', 'big orange', 'small orange']。
示例代码
下面是一个有多级数组嵌套的示例代码，展示 Array.flat 和 Array.flatMap 的使用方法：
-- -------------------- ---- ------- ----- ----- - - - ----- ------ ---- --- -------- ----------- ----------- -- - ----- -------- ---- --- -------- ----------- -------- -- - ----- ------- ---- --- -------- --------- ---------- -- -- -- -- ---- - ------- --- ----- ----------- - ---------------- -- --------------------- ------------------------- -- ----------- ----------- ---------- -------- -------- ---------- -- -- ------- - ------- --- ----- -------------- - -------------------- -- -------------- ---------------------------- -- ----------- ----------- ---------- -------- -------- ----------
上述代码中，users 是一个多级数组嵌套，包含了一些用户信息。使用 map 方法和 flat 方法将用户的爱好扁平化成一维数组，结果为 ['reading', 'swimming', 'running', 'music', 'music', 'dancing']。使用 flatMap 方法也能达到相同的效果。
总结
ES10 提供了 Array.flat 和 Array.flatMap 两个方法，能够很方便地解决多级数组嵌套问题。使用这两个方法，可以让代码更加简洁，易于维护。在开发过程中，可以根据实际情况选择合适的方法来处理嵌套的数组。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64573092968c7c53b09fece8