ES11 中的 flat 和 flatMap 方法解决 JavaScript 中数组操作问题

ES11 中的 flat 和 flatMap 方法解决 JavaScript 中数组操作问题

JavaScript 中的数组操作向来是前端领域中的重要话题，而 ES11 的 flat 和 flatMap 方法则是解决数组操作问题的新利器。这两个方法提供了一种简单而高效的方式来扁平化和转换数组，通过对它们的深入学习，我们可以更好地理解这些方法的使用方法和指导意义。

flat 方法的使用

flat 方法提供了一种扁平化嵌套数组的方式。它可以将嵌套数组中的所有元素提取到一个新的数组中，从而简化操作并减少不必要的迭代。flat 方法的使用方法如下：

let arr = [1, 2, [3, 4, [5, 6]]];
let flatArr = arr.flat(2); // [1, 2, 3, 4, 5, 6]

上述代码通过 flat 方法将 arr 数组扁平化成一个只有数字的一维数组 flatArr。在 flat 方法中，参数可以是扁平化深度，也就是需要将嵌套数组展开的层级。如果没有提供此参数，则默认展开至 1 层。

值得注意的是，flat 方法返回的是一个新的数组，而不是原始数组，并且它不会改变原始数组。如果原始数组中的元素是对象，则返回的数组只是引用原对象的值。如果想要创建一个副本，需要手动使用 Object.assign、Array.prototype.slice 等方法来进行克隆。

flatMap 方法的使用

flatMap 方法则是结合了 map 和 flat 两个方法，提供了一种一步到位的数组转化方法。它可以将一个数组中的元素映射成一个或多个新的数组，并将它们扁平化到一个新的数组中。flatMap 方法的使用方法如下：

let arr = [1, 2, 3];
let flatMapArr = arr.flatMap((x) => [x * 2]); // [2, 4, 6]

上述代码使用 flatMap 方法将 arr 数组映射乘以 2 的新数组，并将它们扁平化成一个新数组 flatMapArr。值得注意的是，flatMap 方法内的返回值必须是数组，否则会报错。如果函数返回的是一个非数组的值，则 flatMap 方法将会将其转换为一个只包含该值的数组。

总结

ES11 中的 flat 和 flatMap 方法提供了一种简单而高效的方式来执行数组的扁平化和转换操作。通过对它们的学习和掌握，我们可以更好地应对数组操作中的各种情况，并提升代码的效率和可读性。需要注意的是，这两个方法都是新加入的，所以其浏览器兼容性值得重视。在使用时需根据具体情况进行判断和使用。

参考代码

let arr = [1, 2, [3, 4, [5, 6]]];
let flatArr = arr.flat(2); // [1, 2, 3, 4, 5, 6]

let arr = [1, 2, 3];
let flatMapArr = arr.flatMap((x) => [x * 2]); // [2, 4, 6]

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