如何使用 ES7 中的 Array.prototype.flatMap 方法简化数组操作

在前端开发中，我们经常需要对数组进行操作，例如去重、过滤、转换等。ES6 中引入了很多对数组操作的方法，如 map、filter、reduce 等，可以简化代码，提高开发效率。而在 ES7 中，又引入了一个新的方法：Array.prototype.flatMap，今天我们来了解一下如何使用它来简化数组操作。

flatMap 简介

flatMap 方法对数组中的每个元素执行一个提供的函数，并将结果压缩成一个新数组。它首先将源数组映射成一个新数组，然后将所有嵌套的子数组压缩成一个新数组。例如，如果我们有一个数组[1, 2, 3, [4, 5], [6, 7]]，我们可以使用 flatMap 方法将其压缩为[1, 2, 3, 4, 5, 6, 7]。

使用 flatMap 简化数组操作

下面我们将介绍几种使用 flatMap 方法来简化数组操作的方法。

1. 数组中元素去重

对于一个数组，我们可以使用 filter 方法和 indexOf 方法来去重，代码如下：

const arr = [1, 2, 2, 3, 3, 4, 5, 5];
const uniqueArr = arr.filter((item, index) => {
  return arr.indexOf(item) === index;
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]

我们可以使用 flatMap 方法和 Set 数据结构来实现去重，代码如下：

const arr = [1, 2, 2, 3, 3, 4, 5, 5];
const uniqueArr = arr.flatMap(item => [item]).reduce((prev, next) => {
  return new Set([...prev, next]);
}, []);
console.log([...uniqueArr]); // [1, 2, 3, 4, 5]

2. 数组扁平化

对于一个深层嵌套的数组，我们可以使用递归和 reduce 方法来扁平化数组，代码如下：

const arr = [1, 2, [3, [4, 5]], 6, [7, 8]];
const flatArr = arr => arr.reduce((prev, next) =>
  Array.isArray(next) ? prev.concat(flatArr(next)) : prev.concat(next), []);
console.log(flatArr(arr)); // [1, 2, 3, 4, 5, 6, 7, 8]

我们可以使用 flatMap 方法来实现数组扁平化，代码如下：

const arr = [1, 2, [3, [4, 5]], 6, [7, 8]];
const flatArr = arr.flatMap(item => {
  return Array.isArray(item) ? flatArr(item) : item;
});
console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8]

3. 数组中元素转换

对于一个数组，我们可以使用 map 方法来进行元素转换，例如将数字转换成字符串，代码如下：

const arr = [1, 2, 3, 4, 5];
const strArr = arr.map(item => item.toString());
console.log(strArr); // ["1", "2", "3", "4", "5"]

我们可以使用 flatMap 方法来实现元素转换，代码如下：

const arr = [1, 2, 3, 4, 5];
const strArr = arr.flatMap(item => item.toString());
console.log(strArr); // ["1", "2", "3", "4", "5"]

总结

在使用 flatMap 方法时，需要注意其返回的是一个新数组，原数组不会发生改变。 flatMap 方法可以简化很多数组操作，例如去重、扁平化、元素转换等，可以大大提高开发效率。但是需要注意的是， flatMap 方法是 ES7 中引入的，需要在支持 ES7 的环境下使用。

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