ES9 的 flatMap 方法怎么用？Array.prototype.flatMap 是个神器！

在 ES9 中，新增了一个 Array.prototype.flatMap 方法，它可以将一个数组映射为一个新数组，同时可以将映射后的数组展开成一个新的数组。这个方法非常实用，可以大大简化代码的编写。

flatMap 方法的用法

使用 flatMap 方法，可以将一个数组映射为一个新数组，同时可以将映射后的数组展开成一个新的数组。它的用法非常简单，只需要在数组对象上调用 flatMap 方法，传入一个回调函数即可。

let arr1 = [1, 2, 3];
let arr2 = arr1.flatMap((x) => [x * 2]);
console.log(arr2); // [2, 4, 6]

上面的代码中，我们首先定义了一个数组 arr1，然后调用了它的 flatMap 方法，并传入了一个回调函数。这个回调函数的作用是将数组中的每个元素乘以 2，然后返回一个新的数组。最后，我们将这个新数组赋值给了变量 arr2，并将它打印出来。

flatMap 方法的深度理解

flatMap 方法实际上是 map 和 flat 两个方法的结合体。在使用 flatMap 方法时，它会先调用 map 方法，然后再调用 flat 方法将映射后的数组展开成一个新的数组。

let arr1 = [1, 2, 3];
let arr2 = arr1.flatMap((x, index) => [[x * 2, index]]);
console.log(arr2); // [[2, 0], [4, 1], [6, 2]]

在上面的代码中，我们传入的回调函数返回了一个包含两个元素的数组，这个数组又被包含在一个数组中，所以最终得到的是一个二维数组。如果我们不使用 flatMap 方法，而是使用 map 方法，得到的将是一个包含三个元素的数组，每个元素都是一个包含两个元素的数组。

let arr1 = [1, 2, 3];
let arr2 = arr1.map((x, index) => [[x * 2, index]]);
console.log(arr2); // [[[2, 0]], [[4, 1]], [[6, 2]]]

flatMap 方法的学习意义

flatMap 方法的出现，让我们在处理数组数据时变得更加方便和简单。它可以将数组中每个元素映射为一个新的数组，并将这些新数组展开成一个新的数组。这样一来，我们就可以避免使用多个循环来处理数组数据，从而使代码变得更加简洁和易读。

flatMap 方法的指导意义

在实际开发中，我们可以使用 flatMap 方法来处理一些复杂的数据结构，例如多维数组和对象数组。使用 flatMap 方法，我们可以将这些数据结构映射为一个新的数组，并将这些新数组展开成一个新的数组。这样一来，我们就可以轻松地处理这些复杂的数据结构。

let arr1 = [[1, 2], [3, 4], [5, 6]];
let arr2 = arr1.flatMap((x) => x.map((y) => y * 2));
console.log(arr2); // [2, 4, 6, 8, 10, 12]

在上面的代码中，我们定义了一个包含多个子数组的二维数组，然后使用 flatMap 方法将它映射为一个新数组，并将新数组展开成一个一维数组。这样一来，我们就可以方便地处理这个复杂的数据结构了。

总结

ES9 的 flatMap 方法是一个非常实用的方法，它可以将一个数组映射为一个新数组，并将映射后的数组展开成一个新的数组。使用 flatMap 方法，我们可以轻松地处理一些复杂的数据结构，从而使代码变得更加简洁和易读。在实际开发中，我们可以使用 flatMap 方法来处理多维数组和对象数组等复杂的数据结构。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65841554d2f5e1655dede122