简介
在 ES6 中，Array 增加了一个新的方法：flat，并针对数组中的每个元素提供了另一个方法：flatMap。这两个新方法都是为了简化 JavaScript 中的数组操作而设计的。本文会详细介绍这两个方法的用法及使用场景。
flat 方法
flat 方法用于将嵌套的数组“扁平化”，也就是将多维数组转化为一维数组。这个方法的返回值是一个新的一维数组，它包含原始数组中的所有元素。flat 方法接受一个可选参数depth，表示要“扁平化”的层数。如果不传入这个参数，flat 会将所有层级的嵌套数组转化为一维数组。
语法
array.flat([depth])
参数
depth：可选参数，表示要扁平化的层数，默认值为 1。
示例
-- -------------------- ---- ------- ----- --- - --- -- --- ---- ----- ------- - ----------- --------------------- -- --- -- -- -- ----- ------- - --- -- --- -- --- ----- ----- ----------- - ----------------------- ------------------------- -- --- -- -- -- -- --
flatMap 方法
flatMap 方法可以理解为对每个元素执行一个映射，最后再将它们“扁平化”到一起。在映射过程中，flatMap 方法会自动去除返回值是undefined 的项。同样地，flatMap 也接受一个可选参数depth。
语法
array.flatMap(callback(currentValue[, index[, array]])[, depth])
参数
callback：函数，为每个元素执行的函数，其中 currentValue 表示当前的元素，index 表示当前的索引，array 表示原数组。
depth：可选参数，表示要“扁平化”的层数。
示例
const arr = [1, 2, 3]; const mapArr = arr.map(x => [x * 2]); const flatMapArr = arr.flatMap(x => [x * 2]); console.log(mapArr); // [[2], [4], [6]] console.log(flatMapArr); // [2, 4, 6]
这个例子中，对于数组中的每个元素，map 方法都返回一个嵌套数组。而flatMap 方法则“扁平化”了这个数组，并返回了一个一维数组，去除了嵌套数组的层次。
使用场景
flat 方法
在实际开发中，我们经常会遇到需要对嵌套数组进行处理的场景。例如，我们需要将多个数组合并到一起，或者对一组数据进行展平，使其更加易于处理。在这些情况下，flat 方法可以帮助我们快速地完成这些操作。
下面是一个将多个数组合并到一起的例子：
const arr1 = [1, 2, [3, 4]]; const arr2 = [5, 6]; const arr3 = [7, 8, [9, 10]]; const newArr = arr1.concat(arr2, arr3).flat(); console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
flatMap 方法
flatMap 方法通常用于在数组中进行映射操作。例如，我们可以将数组中的每个元素都转化为一个新的值，并将这些值“扁平化”到一起。这个技巧在处理大量数据时非常有用，因为它允许我们快速地将一组数据转化为另一组数据。
另一个flatMap 的应用是将数组中的某些元素删除。例如，我们可能需要删除数组中的某些字符串，同时保留其他元素。在这种情况下，我们可以使用flatMap 方法将字符串映射到undefined上。
下面是一个使用flatMap 方法将数组中的部分元素删除的例子：
const arr = [1, 'remove', 2, 'remove', 3]; const newArr = arr.flatMap(x => typeof x === 'number' ? [x] : []); console.log(newArr); // [1, 2, 3]
在这个例子中，我们先判断每个数组元素的类型是否为数值类型。对于数值类型的元素，我们将它们放入一个新的数组中。对于其他类型的元素，则返回一个空数组。由于flatMap 方法会自动去除返回值为undefined的项，因此最后返回的数组中只包含数值类型的元素。
总结
flat 和flatMap 方法是 ES6 中新增的两个非常有用的数组方法。它们都可以将嵌套数组“扁平化”，使得数组操作更加简单。在实际开发中，我们可以使用这两个方法来处理各种 JavaScript 数组操作，提高代码效率，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65211dba95b1f8cacd893386