ECMAScript 2020 中的 Array.prototype.flatMap 方法
在 ECMAScript 2020 中，新加入了 Array.prototype.flatMap 方法。它的作用非常强大，可以帮助我们轻松实现一些常见的数组操作。本文将深入探讨这个方法的用法和学习意义，并提供一些实用的示例代码。
Array.prototype.flatMap 方法的用法
Array.prototype.flatMap 方法可以看作是 Array.prototype.map 方法和 Array.prototype.flat 方法的组合。它的作用是，先对数组中的每个元素调用一个函数进行映射，然后将映射后的数组压平成一个新的数组。
这个过程比较抽象，下面来看一个示例，以便更好地理解。
const arr = [1, 2, 3]; const result = arr.flatMap(x => [x, x * 2]); // result: [1, 2, 2, 4, 3, 6]
在上面的例子中，我们首先定义了一个输入数组 arr，然后通过 flatmap 方法对每个元素进行了映射。映射函数 x => [x, x * 2] 的作用是将每个元素转化为长度为 2 的数组，第一个元素是原来的值，第二个元素是原来的值乘 2。最后，flatMap 方法将所有映射后的数组压成一个新的数组，其中每个元素都被映射了两次。
需要注意的是，flatMap 方法会自动过滤掉映射后的数组中的空元素，这个特性在一些场景下非常有用。例如：
const arr = ['hello', 'world', '', 'goodbye'];
const result = arr.flatMap(x => x.split(' '));
// result: ['hello', 'world', 'goodbye']在上面的例子中，我们使用 flatMap 方法对一个字符串数组进行映射，将每个字符串拆分成单词，并将所有单词放到一个新的数组中。由于第三个元素是一个空字符串，所以它被自动过滤掉了。
Array.prototype.flatMap 方法的学习意义
Array.prototype.flatMap 方法的出现，彰显了 ECMAScript 2020 新增语言特性的实用性和创新性。这个方法将两个常见的数组操作组合在一起，大大简化了数组操作的代码量。
通过学习 Array.prototype.flatMap 方法，可以发现在日常开发中经常使用的技术手段之间也有很多联系，只需要善于归纳总结，就能将它们组合起来形成更加强大、灵活、高效的工具。
实用示例代码
下面是一些实用的示例代码，可以在实际开发中使用。
- 展开深度为 1 的二维数组
const arr = [[1, 2], [3, 4], [5, 6]]; const result = arr.flatMap(x => x); // result: [1, 2, 3, 4, 5, 6]
- 生成一个具有长度为 n 的填充值数组
const n = 5;
const result = new Array(n).fill('').flatMap((_, i) => `item ${i + 1}`);
// result: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']- 将字符串数组中的所有元素转化为大写字母
const arr = ['hello', 'world', 'goodbye']; const result = arr.flatMap(x => x.toUpperCase()); // result: ['H', 'E', 'L', 'L', 'O', 'W', 'O', 'R', 'L', 'D', 'G', 'O', 'O', 'D', 'B', 'Y', 'E']
总结
Array.prototype.flatMap 方法是 ECMAScript 2020 中新增的一个实用方法。它的作用是先对数组中的每个元素调用一个函数进行映射，然后将映射后的数组压平成一个新的数组。通过学习 flatMap 方法的用法和学习意义，我们可以更好地理解数组操作的方法和技巧，以便在实际开发中更加灵活和高效地应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64992b1a48841e989461fc0a