ECMAScript 2021 (ES12) 中加入了 Array.prototype.flatMap() 方法，它可以简化数组操作。本文将介绍这个方法的使用以及示例代码，帮助读者更好地理解它的深度以及学习和指导意义。
什么是 Array.prototype.flatMap() 方法
Array.prototype.flatMap() 方法在 ES8 中被引入，是一种数组变换的一种简便方式。该方法返回一个新的扁平化数组，它将每个元素映射为一个新元素，并且可以通过返回一个数组来将它们扁平化。
let arr = [1, 2, 3, 4, 5]; let result = arr.flatMap(item => [item, item * 2]); console.log(result); // Output: [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]
该方法接受一个回调函数作为参数，这个回调函数对于数组中的每个元素都会调用一次，返回一个新的数组，这些新的数组会被扁平化成一个新的数组来作为该方法的返回值。如果在回调函数中返回的是一个空数组，则会从结果数组中删除这个元素。
let arr = [1, 2, 3, 4, 5]; let result = arr.flatMap(item => item % 2 === 0 ? [] : [item]); console.log(result); // Output: [1, 3, 5]
Array.prototype.flatMap() 和 Array.prototype.map() 的比较
Array.prototype.flatMap() 和 Array.prototype.map() 方法的作用类似，但它们之间的区别在于，flatMap() 方法会将返回的数组扁平化成一个新的数组，而 map() 方法只会把它们放在一个新数组里，但不进行扁平化。
-- -------------------- ---- ------- -- ----- -- --- ---- - --- -- --- --- ------- - ------------- -- ------ ---- - ---- --------------------- -- ------- ---- --- --- --- --- --- -- --------- -- --- ---- - --- -- --- --- ------- - ----------------- -- ------ ---- - ---- --------------------- -- ------- --- -- -- -- -- --
flatMap() 方法也可应用于多维数组的扁平化，但 map() 方法不可以。
let arr = [[1, 2], [3, 4], [5, 6]]; let result = arr.flatMap(item => item); console.log(result); // Output: [1, 2, 3, 4, 5, 6]
ArrayBuffer 与 TypedArray
在 ES6 中，ArrayBuffer 和 TypedArray 需要通过一种特殊的构造函数分别进行创建，并且没有一个简单的方法可以将 ArrayBuffer 转换为 TypedArray 或将 TypedArray 转换为 ArrayBuffer。flatMap() 方法提供了一种便捷的方案来解决这个问题，我们可以使用该方法将 TypedArray 转换为数组并返回一个新的 TypedArray。
-- -------------------- ---- ------- --- ---- - --- -------------- -- ---- --- ---- - --- -------------- -- ---- --- ------ - ------ ------------------ -- ------ -------------------- -- ------- --- -- -- -- -- -- --- ------ - --- ---------------- --- ---- - --- ------------------- ------------- ---- - ----------------- -- ------ ---- - ---- ------------------ -- ------- --- -- -- -- -- -- -- --
使用 Array.prototype.flatMap() 简化代码
可以通过使用 Array.prototype.flatMap() 方法来简化代码。下面是一段使用 FlatMap 方法的代码，将多个类似表单的值连接起来，并用 jQuery 找到对应的输入元素：
var form_values = $.makeArray($(this).serializeArray())
.flatMap(function({name, value}) {
return [name, value];
});该代码可以使用 map() 方法来替换：
var form_values = $.makeArray($(this).serializeArray())
.map(function({name, value}) {
return [name, value];
}).flat();使用 Array.prototype.flatMap() 方法，可以将它进一步简化：
var form_values = $.makeArray($(this).serializeArray())
.flatMap(({name, value}) => [name, value]);总结
Array.prototype.flatMap() 是一个非常实用的方法，它能够将一个数组映射成一个新的扁平化数组。它可与其它数组方法配合使用，对于操作多维数组和 TypedArray 等方面有很大的帮助。使用该方法可以简化数组操作的许多代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9bf62f6b2d6eab34ed309