ES10 中新增的 Array.flatMap() 方法详解及使用示例

在 ES10（ECMAScript 2019）中，新增了 Array.flatMap() 方法，它与 Array.map() 类似，但是它能够处理嵌套数组并将结果平展为一个新数组，很方便地解决了处理数组嵌套的问题，同时还能节省代码的编写和执行时间。

语法

Array.flatMap() 方法的语法如下：

array.flatMap(callback(currentValue[, index[, array]])[, thisArg])

其中，callback 表示要对数组中每个元素进行的处理函数，可以接受以下参数：

• currentValue：当前元素的值。
• index（可选）：当前元素在数组中的下标。
• array（可选）：原始数组。

而 thisArg 参数则表示 callback 函数中的 this 值（可选）。

函数功能

Array.flatMap() 方法对数组中每个元素进行处理，将结果平展为一个新数组。

使用示例

下面是一些示例，以帮助你更好地理解 Array.flatMap() 方法。

示例1：将字符串分割为单词

我们可以使用 Array.flatMap() 方法将字符串分割为单词，并返回一个新的平展数组。下面是一个简单的例子：

let string = "Hello world, how are you?";
let words = string.split(" ");

let flattenedWords = words.flatMap(word => {
  return word.split("");
});

console.log(flattenedWords); // ["H", "e", "l", "l", "o", "w", "o", "r", "l", "d", ",", "h", "o", "w", "a", "r", "e", "y", "o", "u", "?"]

示例2：二维数组乘法

假设我们有一个二维数组，我们需要将每个元素乘以 2 并返回一个新的平展数组。下面是一个例子：

let arr = [[1, 2], [3, 4], [5, 6]];
let result = arr.flatMap(x => x.map(y => y * 2));

console.log(result); // [2, 4, 6, 8, 10, 12]

示例3：移除空元素

我们可以使用 Array.flatMap() 方法轻松地将数组中的空元素移除。下面是一个简单的例子：

let arr = ["this", "is", "", "a", "", "test"];
let result = arr.flatMap(x => x ? x : []);

console.log(result); // ["this", "is", "a", "test"]

示例4：将嵌套数组平铺

我们可以使用 Array.flatMap() 方法将数组嵌套平展为一个新数组。下面是一个简单的例子：

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

let flattenedArr = arr.flatMap(x => Array.isArray(x) ? x : [x]);

console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

总结

Array.flatMap() 方法是 ES10 中新增的一个非常实用的方法，特别适合处理数组嵌套问题。使用 Array.flatMap() 方法能够让你的代码更加简洁、可读性更强，同时还能节省代码的编写和执行时间。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b110a0add4f0e0ffa5ff93