ES10 数组的新特性 Flatmap 详解-JavaScript中文网-JavaScript教程资源分享门户

在ES10中，有一个非常实用的数组新特性 Flatmap。Flatmap作为数组的一个新方法，可以帮助我们轻松地将一个嵌套的数组展开为一个扁平化的数组，简化数组操作，同时也增加了代码的可读性和可维护性。在本文中，我们将详细介绍Flatmap方法的用法，并给出一些实际的例子，帮助读者更好地理解和运用Flatmap。

Flatmap 的基础用法

Flatmap 方法可以理解为一个结合了Map和Flat方法的组合。它接收一个函数作为参数，该函数将每个数组元素映射为一组值，然后将这些值展开到方法的返回数组中。其语法如下：

let new_array = array.flatMap(function callback(currentValue[, index[, array]]) {
  // return element for new_array
}[, thisArg])

其中，callback 函数的返回值可以是单个值或一个数组，该值将自动添加到混合结果数组中，所以Flatmap返回的将是一个新的扁平化数组。

下面我们通过一个简单的例子来说明Flatmap的基本用法。假设我们有一个二维数组：

let arr = [[1, 2], [3, 4], [5, 6]];

我们可以使用Flatmap将该数组展开为一个扁平化的数组：

let newArr = arr.flatMap(x => x);
// [1, 2, 3, 4, 5, 6]

我们可以看到，通过Flatmap我们可以将一个二维数组展开为一个扁平化的数组，非常方便。下面我们将进一步介绍Flatmap的高级用法。

Flatmap 的进阶用法

我们可以使用Flatmap方法完成多种数组操作，下面我们将逐一介绍。

数组去重

我们可以使用Flatmap方法对数组去重。我们可以将原数组展开后去掉重复项即可，示例代码如下：

let arr = [1,1,2,2,3,3];
let newArr = arr.flatMap(x => Array.from(new Set(arr)))
console.log(newArr); //[1,2,3]

我们可以看到，Flatmap方法将数组展开后通过Set的帮助去除了重复项，得到了一个去重后的新数组。如果原数组有多个重复项，也可以同样地去掉。这种方法非常简洁有效，能够节省很多代码实现的复杂度。

数组拆分

对于一个由逗号分隔的字符串，我们可以使用Flatmap轻松地将其拆分为一个扁平化数组。示例代码如下：

let str = "hello,jack,my,name,is,tom.";
let strArr = str.split(',');
let newArray = strArr.flatMap(item => item);
console.log(newArray); // ["h","e","l","l","o","j","a","c","k","m","y","n","a","m","e","i","s","t","o","m","."]

我们先使用Split方法将字符串分割成一个数组，接着使用flatMap展开数组即可达到目的。这种方法能够增强代码的可读性，使得代码更加简洁明了。

数组展开与变形

在实际项目中，我们经常会遇到需要将一个数组展开、批量操作后再重新变形的需要。比如我们需要读取一个JSON数据列表并提取某个属性集合，再重新组合为一个数组。这时候，Flatmap方法就可以派上用场了。示例代码如下：

let data = [
  {id:1, name: 'Tom', city:'SZ'},
  {id:2, name: 'Bob', city:'HZ'},
  {id:3, name: 'Lisa', city:'BJ'}
];
let cityArr = data.flatMap(item => (item.city).split(''));//将城市名称转成字符数组
console.log(cityArr);//["S", "Z", "H", "Z", "B", "J"]

我们可以看到，我们使用Flatmap方法将数组展开后，并对特定属性进行批量处理，最后将重新生成了一个新的数组。这种方法能够极大地简化API操作的参数传递和处理，降低代码实现的复杂度。

总结

Flatmap方法是ES10中新增的一个非常实用的数组方法，它能够帮助我们快捷、简单地将多层数组转化为扁平化数组，并灵活运用于多种数组操作场景中。而且通过其优雅的操作方式，也能够增强代码的可读性和可维护性。当我们进行扁平化数组、数组变形、多重条件组合等操作时，Flatmap方法将是我们的得力助手。

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