在 ES10 中，Array.prototype 中新增了两个方法 flat 和 flatMap。在本文中，我们将详细介绍这两个方法的应用场景以及作用。
Array.prototype.flat
Array.prototype.flat 方法用于将多维数组转换为一维数组，可以指定转换的维度，从而将任何维度的数组转换为一维数组。这个方法是在 ES2019 中引入的，但是很多前端开发人员并不了解它的用途，现在我们来详细介绍它。
下面是 flat 方法的语法：
var newArray = arr.flat([depth]);
它接收一个可选参数 depth，表示要展开的深度。如果不指定 depth 则默认为1。
示例代码
-- -------------------- ---- ------- --- ---- - --- -- --- ---- --- ---- - ------------ ------------------ -- ------- --- -- -- -- --- ---- - --- -- --- --- ----- --- ---- - ------------- ------------------ -- ------- --- -- -- -- --
应用场景
- 展开嵌套数组
在处理数据时，经常产生嵌套数组的情况。而 flat 方法就是一个很好的解决方案，可以将嵌套数组展开为一维数组。
- 用于字符串拆分
我们可以结合字符串方法进行应用，可以将字符串拆分为一维数组。
-- -------------------- ---- ------- --- --- - ------------ --- --- - --------------- ----------------- -- ------- ----- ---- ---- ---- ----- --- ------- - ----------- --------------------- -- ------- --- -- -- -- ---
Array.prototype.flatMap
Array.prototype.flatMap 方法将 flat 和 map 方法结合起来，即可以展开多维数组，同时操作每个元素。flatMap 可以返回一个新数组，不会改变原有的数组。
下面是 flatMap 方法的语法：
var newArray = arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
它接收一个 callback 函数，用来操作每个元素，并返回操作后的结果。然后再通过 flat 将结果展开成一维数组。
示例代码
var arr1 = ["One", "Two", "Three"];
var arr2 = arr1.flatMap((str) => str.split(""));
console.log(arr2);
// Output: ["O", "n", "e", "T", "w", "o", "T", "h", "r", "e", "e"]应用场景
- 将一个数组中的元素映射到另一个数组
我们经常需要将一个数组中的元素映射到另一个数组中。利用 flatMap 方法可以将处理后的元素返回一个新的数组。
var arr1 = [1, 2, 3, 4]; var arr2 = arr1.flatMap((n) => [n, n * 2]); console.log(arr2); // Output: [1,2,2,4,3,6,4,8]
- 移除数组中的空值
我们可以使用 flatMap 方法将空值移除，可以有效减少数组中的空元素。
var arr1 = ["One", null, "Two", "", "Three"];
var arr2 = arr1.flatMap((str) => (str ? str.split("") : []));
console.log(arr2);
// Output: ["O", "n", "e", "T", "w", "o", "T", "h", "r", "e", "e"]总结
在本文中，我们深入了解了 ES10 中新增的方法 flat 和 flatMap。它们分别用于将多维数组转换为一维数组，同时对每个元素进行操作。这些方法可以帮助我们更高效的处理数据，提高开发效率。在实际开发中，我们应该尝试利用它们来减少代码量，简化开发过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cdff2db5eee0b5255f3413