ES9 中 Array.prototype.{flatMap, flatten} 方法详解
ES9 (ECMAScript 2018) 是 JavaScript 编程语言的一个版本，它引入了一些新特性，其中最重要的特性就是 Array.prototype.{flatMap, flatten} 方法。
这两个方法可以帮助前端程序员更加方便地处理数组，尤其是嵌套的数组。下面将详细介绍这两个方法的运作方式，以及在前端开发中的使用场景。
flatMap 方法
ES9 引入的 flatMap 方法是对原有的 map 方法进行了改进，它可以让开发者在一个步骤中映射并且减少数组。flatMap 主要有两个用途：
将数组中的嵌套数组“扁平化”
在“扁平化”数组的基础上进行映射操作
其用法与 map 方法非常相似，但具有不同的行为。flatMap 方法不仅可以改变数组中的每一项，还可以“展开”其中的嵌套数组，得到一个扁平化的数组。
下面的例子展示了如何使用该方法：
const arr = [1, 2, 3, 4]; arr.flatMap(x => [x * 2]); //[2, 4, 6, 8]
在上面的示例中，flatMap 方法取原数组 arr 中的每个元素 x，接着将其乘以 2 并放回结果数组中。结果是一个扁平化数组，包含了原先数组中的所有元素的两倍。注意，我们直接返回了一个数组 [x * 2]，flatMap 会自动将其展开并加入到新生成的数组中。
嵌套数组的“扁平化”
当对嵌套数组使用 flatMap 方法时，它会自动展开内层嵌套数组，返回扁平化的数组，而非仅仅“扁平化”一层。例如：
const arr = [[1, 2], [3, 4]]; arr.flatMap(x => x); //[1, 2, 3, 4] arr.flatMap(x => [x, x * 2]); //[1, 2, 2, 4, 3, 6, 4, 8]
在上述例子中，我们对 arr 数组使用了 flatMap 方法，第一个例子将嵌套数组扁平成一个新的数组，而第二个例子直接使用嵌套数组中的元素生成一个新的数组。
flatten 方法
ES9 的 flatten 方法是用来将嵌套数组“扁平化”，它会递归地展开嵌套数组中的每一个元素，直到得到一个扁平化的一维数组，所有元素都在同一层级上。
例如，我们有一个被嵌套多层的数组 [1, 2, [3, 4, [5, 6]], 7, [8]]，flatten 方法可以将其转换为 [1, 2, 3, 4, 5, 6, 7, 8]。下面是一个示例：
const arr = [1, 2, [3, 4, [5, 6]], 7, [8]]; arr.flatten(); //[1, 2, 3, 4, 5, 6, 7, 8]
需要注意的是，flatten 方法直接对原数组进行操作，并且返回一个新的扁平化数组。由于该方法并非原生方法，因此需要使用一些工具库来实现。
应用场景举例
这两个方法的应用场景非常广泛，下面列举了一些常见的应用例子：
当对于数组对象进行映射时，需要对数组进行扁平化，只需使用 flatMap 方法即可。
在处理数据时，如果需要在多个嵌套的数组中查询或获取数据时，可以通过 flatten 方法进行扁平化操作，使数据更加易于处理。
flatten 方法可以非常方便地合并多个数组，例如 Array.concat() 可以整合多个数组，但是 flatten 方法可以将多维数组转换为一位数组。
总结
ES9 中的 flatMap 和 flatten 方法是数组操作中非常有用的新增特性，它可以大大提高数据操作的效率与方便性。熟练掌握这两个方法不仅能够帮助开发者更好地处理嵌套数组，也更方便地管理数据。需要注意的是 flatten 方法是不原生方法，因此需要使用工具库进行实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eab1a5f6b2d6eab358338b