ES10 中新增的 .flatMap() 方法的使用详解

ES10 中新增的 .flatMap() 方法的使用详解

在 JavaScript 的最新版本 ES10 中，新增了一个名为 .flatMap() 的数组方法。相对于之前的 .map() 方法，它能够更加方便地对数组进行操作，且代码更加简洁。本文将详细介绍 .flatMap() 的用法和相关知识点，帮助读者更好地理解和使用该方法。

1、.flatMap() 方法的定义

在 ES10 中，.flatMap() 方法的定义如下：

Array.prototype.flatMap( \
    mapFunction(currentValue[, index[, array]]) { \
      ... \
    }[, thisArg] \
)

其中，.flatMap() 方法接收一个回调函数 mapFunction，该函数用于返回一个新的数组，该数组被拼接到之前的结果数组中。在函数中，可以使用 currentvalue、index 和 array 这三个参数来进行操作，同时也可以使用可选的 thisArg 参数指定 mapFunction 函数中 this 的指向。

2、.flatMap() 方法的使用

如果我们需要将数据中的多个数组进行合并，以形成一个单一的数组，就可以使用 .flatMap() 方法来实现：

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

在上述代码中，首先创建了一个包含六个数字的数组 arr，之后使用了 .flatMap() 方法，将 arr 中的元素遍历出来，并将每个元素与其自身的二倍组成新的数组。最后，将结果存储在 newArr 中并输出。

3、 .flatMap() 方法的应用场景

在实际的开发中，.flatMap() 方法可以被广泛应用，其主要的应用场景如下：

（1）将数组中的子元素进行展开，以得到符合条件的结果。

let arr = [1, 2, [3, 4, [5, 6]]]; 
let newArr = arr.flat(Infinity); 
console.log(newArr);

在上述代码中，.flat() 方法将 arr 数组中的所有嵌套子数组展开，并将展开后的元素与其自身的二倍组合成新的数组保存在 newArr 中。

（2）将数组中的的字母进行拆分，并统计每个字母在数组中出现的次数。

let arr = ["word", "html", "javaScript"]; 
let charList = arr.flatMap(x => [...x]); 
let count = charList.reduce((acc, cur) => { 
    acc[cur] = (acc[cur] || 0) + 1; 
    return acc; 
}, {}); 
console.log(count);

在上述代码中，.flatMap() 方法首先创建了一个字符列表 charList，将 arr 数组中的所有字母进行展开，并将展开后的元素组成新的数组。之后，使用 reduce() 方法统计了每个字母在数组中出现的次数，将结果存储在 count 变量中并输出。

总的来说，.flatMap() 方法是 ES10 新增的一个有用的数组方法，可以极大地简化数组操作的代码，并可以应用于各种实际的开发场景中。希望本文介绍的知识能够帮助读者更好地理解和应用该方法，提高开发效率。

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