在前端开发中，经常需要对数组进行操作。ES7 中的 Array.prototype.flat 和 flatMap 方法为我们提供了一种更加简便的方式来处理数组，本文将详细介绍这两个方法的使用方法和技巧。
Array.prototype.flat 方法
Array.prototype.flat 方法用于将多维数组扁平化成一维数组。这个方法可以接收一个可选的参数，指定要扁平化的层数，默认是一层。下面是该方法的基本使用方式：
const arr1 = [1, 2, [3, 4]]; const arr2 = arr1.flat(); console.log(arr2);// [1, 2, 3, 4]
如果要扁平化的数组有多层嵌套，需要指定扁平化的层数：
const arr1 = [1, 2, [3, [4, 5]]]; const arr2 = arr1.flat(2); console.log(arr2);// [1, 2, 3, 4, 5]
这里指定了扁平化的层数为 2，即将数组中所有的元素都扁平化到二维数组中。
Array.prototype.flatMap 方法
Array.prototype.flatMap 方法可以实现将一个数组转换成一个新数组，同时支持在这个过程中对数组进行 flatMap 操作。该方法会遍历原数组的每一个元素，并将每个元素传递给回调函数，函数返回一个新的元素添加到扁平化后的新数组中。下面是该方法的基本使用方式：
const arr1 = [1, 2, 3, 4]; const arr2 = arr1.flatMap(x => [x, x * 2]); console.log(arr2);// [1, 2, 2, 4, 3, 6, 4, 8]
在这个例子中，回调函数简单地将每个元素扩展成两个元素，然后将这两个元素添加到新数组中。
配合使用 Array.prototype.flat 和 flatMap 方法
通过配合使用 Array.prototype.flat 和 flatMap 方法，我们可以实现更加灵活和高效的数组操作。下面是一个示例，将一个嵌套的数组扁平化并将其转换为一个新的对象数组：
-- -------------------- ---- -------
----- --------- - -
- ----- -------- ------- ------------ ---------- --
- ----- ------ ------- ----- ------ ---- --------- --
- ----- -------- ------- --------- -
--
----- ------ - ------------------------- -- -
------ ----------------------- -- -
------ -
-------- -------------
----- ----
--
---
----------
---------------------- -- -------- -------- ----- ---------- -- - -------- -------- ----- --------- -- - -------- ------ ----- ---- ----- -- - -------- ------ ----- ---- -------- -- - -------- -------- ----- ------- --在这个例子中，我们首先通过 flatMap 方法将嵌套的数组扁平化成一个数组，并将每个城市都转换为一个包含国家和城市的对象。然后通过 flat 方法将数组扁平化成一维数组。
总结
在本文中，我们介绍了 ES7 中的 Array.prototype.flat 和 flatMap 方法，它们都是在数组操作中非常有用的方法。配合使用这两个方法可以大大简化数组操作的代码，并提高处理效率。在日常开发中，我们应该熟练掌握这两个方法，并结合实际情况运用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64acf7e848841e9894915fd4