ECMAScript 2020 (ES11) 中的 Array.prototype.flatMap 方法详解-FunTeaLearn Online Web Tutorials

在 ECMAScript 2020 (ES11) 中，新增了一个非常实用的方法：Array.prototype.flatMap。它可以让我们更方便地处理数组中的元素，避免了使用多个 map 和 flatten 的麻烦，同时也提高了代码的可读性和可维护性。

在本文中，我们将详细介绍 Array.prototype.flatMap 方法的使用方法、特性和示例，并给出一些指导意义，帮助读者更好地理解和运用这个方法。

什么是 Array.prototype.flatMap 方法

Array.prototype.flatMap 方法是 Array.prototype.map 和 Array.prototype.flat 的组合，它可以将数组中的每个元素映射为一个新的数组，并将所有新数组的元素合并成一个新的数组。这个方法可以接受两个参数：一个回调函数和一个可选的 this 值。

回调函数会被传入三个参数：当前元素、当前元素的索引和原始数组。它必须返回一个新的数组，这个数组将会被展开成一个新的数组。如果回调函数返回的是一个空数组，那么这个元素就会被忽略。

如果没有传入 this 值，那么回调函数中的 this 关键字会指向全局对象。否则，this 关键字会指向传入的 this 值。

下面是 Array.prototype.flatMap 方法的语法：

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

Array.prototype.flatMap 方法的使用方法

使用 Array.prototype.flatMap 方法非常简单，只需要按照下面的步骤进行即可：

定义一个数组；
使用 Array.prototype.flatMap 方法对数组进行操作；
处理返回的新数组。

下面是一个简单的示例代码：

const arr = [1, 2, 3, 4, 5];

const result = arr.flatMap(x => [x, x * 2]);

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

在这个示例中，我们定义了一个数组 arr，然后使用 Array.prototype.flatMap 方法将每个元素映射为一个新的数组。这个新的数组包含当前元素和当前元素的两倍，然后将所有新数组的元素合并成了一个新的数组。

Array.prototype.flatMap 方法的特性

Array.prototype.flatMap 方法有以下几个特性：

它会将回调函数返回的新数组展开成一个新的数组。
如果回调函数返回的是一个空数组，那么这个元素就会被忽略。
它可以接受一个可选的 this 值，用来指定回调函数中的 this 关键字。
如果原始数组中有空元素，那么它们会被忽略。
它可以嵌套使用，但是需要注意嵌套的层数，避免出现过深的嵌套。

Array.prototype.flatMap 方法的示例

下面是一些常见的使用 Array.prototype.flatMap 方法的示例：

1. 将二维数组展开成一维数组

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

const result = arr.flatMap(x => x);

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

在这个示例中，我们将一个二维数组展开成了一个一维数组。

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

const arr = ['1', '2', '3', '4', '5'];

const result = arr.flatMap(x => parseInt(x));

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

在这个示例中，我们将一个字符串数组转换成了一个数字数组。

3. 将多维数组展开成一维数组

const arr = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]];

const result = arr.flatMap(x => x).flatMap(x => x);

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

在这个示例中，我们将一个多维数组展开成了一个一维数组。

Array.prototype.flatMap 方法的指导意义

Array.prototype.flatMap 方法的出现，让我们在处理数组时变得更加方便和高效。它可以帮助我们避免使用多个 map 和 flatten 的麻烦，同时也提高了代码的可读性和可维护性。

在使用 Array.prototype.flatMap 方法时，需要注意以下几个问题：

回调函数必须返回一个新的数组。
如果回调函数返回的是一个空数组，那么这个元素就会被忽略。
如果原始数组中有空元素，那么它们会被忽略。
可以嵌套使用，但是需要注意嵌套的层数，避免出现过深的嵌套。

在实际开发中，我们可以根据具体的需求和场景，灵活运用 Array.prototype.flatMap 方法，提高代码的效率和质量。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d408f0a941bf71347a4fe2

ECMAScript 2020 (ES11) 中的 Array.prototype.flatMap 方法详解