使用 ES8 内置的 "flatMap()" 优化你的代码

在前端开发中，我们经常需要对数组进行操作，其中包括对数组中的每个元素进行操作，然后将结果合并为一个新的数组。在 ES8 中，新增了一个内置方法 "flatMap()"，可以帮助我们更方便地实现这个操作。

理解 "flatMap()"

在介绍 "flatMap()" 之前，我们先来看一下 "map()" 方法。"map()" 方法会对数组中的每个元素执行指定的操作，并返回一个新的数组，新数组中的元素是每个原始元素执行操作后的结果。

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

"flatMap()" 方法与 "map()" 类似，但是它会对数组中的每个元素执行指定的操作，并将结果合并为一个新的数组。如果操作返回的是一个数组，"flatMap()" 方法会将其展开，然后将展开后的结果合并到新的数组中。

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

在这个例子中，我们传递了一个函数，它返回一个数组，"flatMap()" 方法会将这个数组展开，然后将展开后的结果合并到新的数组中。

使用 "flatMap()" 优化你的代码

现在我们已经理解了 "flatMap()" 方法，让我们来看一些使用它的例子。

1. 将二维数组转换为一维数组

如果我们有一个二维数组，我们可以使用 "flatMap()" 方法将其转换为一个一维数组。

const arr = [[1, 2], [3, 4], [5, 6]];
const flatArr = arr.flatMap(x => x);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

在这个例子中，我们传递了一个函数，它返回每个子数组。"flatMap()" 方法会将这些子数组展开，然后将展开后的结果合并到新的数组中。

2. 将字符串数组转换为数字数组

如果我们有一个字符串数组，我们可以使用 "flatMap()" 方法将其转换为一个数字数组。

const arr = ['1', '2', '3'];
const numArr = arr.flatMap(x => parseInt(x));
console.log(numArr); // [1, 2, 3]

在这个例子中，我们传递了一个函数，它返回每个字符串的整数值。"flatMap()" 方法会将这些整数值合并到新的数组中。

3. 从对象数组中提取属性值

如果我们有一个对象数组，我们可以使用 "flatMap()" 方法从中提取属性值。

const arr = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 40 }, { name: 'Charlie', age: 50 }];
const nameArr = arr.flatMap(x => x.name);
console.log(nameArr); // ['Alice', 'Bob', 'Charlie']

在这个例子中，我们传递了一个函数，它返回每个对象的 "name" 属性。"flatMap()" 方法会将这些属性值合并到新的数组中。

总结

"flatMap()" 方法可以帮助我们更方便地对数组进行操作，并将结果合并为一个新的数组。它可以用于将二维数组转换为一维数组、将字符串数组转换为数字数组、从对象数组中提取属性值等操作。在实际开发中，我们可以使用 "flatMap()" 方法来优化我们的代码，使之更加简洁、高效。

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