使用 ES7 的 Array.prototype.flat() 和 Array.prototype.flatMap() 扁平化数组和映射数组-JavaScript中文网-JavaScript教程资源分享门户

使用 ES7 的 Array.prototype.flat() 和 Array.prototype.flatMap() 扁平化数组和映射数组

在前端开发中，处理数据的能力是非常重要的，尤其是处理数组数据。在ES7中，Array增加了两个非常实用的方法：Array.prototype.flat() 和 Array.prototype.flatMap()，这两个方法大大简化了数组的扁平化和映射操作，使代码更加简洁和易读。让我们来一起学习一下这两个方法的详细用法。

Array.prototype.flat()

Array.prototype.flat() 方法用于将嵌套的数组层级降为一级，并返回一个新的扁平化后的数组。这个方法可以指定想要扁平化的层数，默认为 1。如果没有嵌套的数组，flat() 方法会返回原数组。

让我们来使用以下示例来说明这个方法的用法：

const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); //[1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat()); //[1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); //[1, 2, 3, 4, 5, 6]

Array.prototype.flatMap()

Array.prototype.flatMap() 方法结合了 map() 和 flat() 方法，它首先对数组中的每个元素执行一个 map() 方法，然后对返回的结果执行 flat() 方法。最终将结果扁平化为一个新数组。

让我们来使用以下示例来说明这个方法的用法：

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

const arr2 = ['hello', 'world'];
console.log(arr2.flatMap(x => x.split(''))); // ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

flatMap() 方法也可以像 flat() 方法一样指定要扁平化的层数。如果不指定层数，默认为1。

经验总结

ES7的 Array.prototype.flat() 和 Array.prototype.flatMap() 方法是很好用和实用的方法。使用这两个方法可以让我们更好的处理数组数据，简化了代码，提高了代码效率。但是在使用这两个方法时应该注意一些收获点：

flat() 和 flatMap() 已经被大多数现代浏览器所支持。
如果要兼容不支持这两种方法的老版本浏览器，可以使用 polyfill。
扁平化和映射操作会使用更多的内存，尤其是当扁平化或映射的原数组很大时。所以需要谨慎使用这两个方法。

在实际开发中，应根据需要来灵活运用这两个方法，以提高编码效率。

希望这篇文章对你有所帮助。如果有任何问题或建议，欢迎在评论区留言！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a5faa6add4f0e0ffe95f38

使用 ES7 的 Array.prototype.flat() 和 Array.prototype.flatMap() 扁平化数组和映射数组