ECMAScript 2020 中的数组 flatMap() 方法详解及示例-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020 标准中，新增了一个数组方法 flatMap()，该方法可以将嵌套的数组结构扁平化，并对每个元素应用一个映射函数，最终返回一个新的一维数组。

语法

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

callback：需要应用到每个元素的函数，该函数可以返回一个数组或一个值。
currentValue：当前正在处理的元素。
index（可选）：当前正在处理的元素的索引。
array（可选）：调用 flatMap() 的数组。
thisArg（可选）：执行 callback 函数时使用的 this 对象。

用法

我们先来看一个简单的例子，将一个嵌套数组扁平化：

const arr1 = [1, 2, 3, 4, [5, 6]];
const flatArr1 = arr1.flatMap(item => item);
console.log(flatArr1); // [1, 2, 3, 4, 5, 6]

在这个例子中，我们将嵌套的数组 [5, 6] 扁平化为了两个独立的元素 5 和 6，最终得到了一个新的一维数组。

接下来，我们再看一个例子，假设我们有一个含有多个单词的字符串数组，我们要将每个单词都转化为大写字母，并返回一个扁平的字符串数组：

const arr2 = ['hello world', 'hi', 'country road'];
const flatArr2 = arr2.flatMap(item => item.toUpperCase().split(' '));
console.log(flatArr2); // ['HELLO', 'WORLD', 'HI', 'COUNTRY', 'ROAD']

在这个例子中，我们将每个字符串先转化为大写字母，然后再通过 split(' ') 方法将每个单词拆分成一个独立的元素，并最终返回一个扁平的字符串数组。

需要注意的是，flatMap() 方法会忽略所有返回值为 null 或 undefined 的元素。

实现原理

实现 flatMap() 方法的原理大致如下：

将原数组中的每个元素应用映射函数，得到一个新的二维数组。
遍历新的二维数组，将其中的每个元素都添加到一个新的一维数组中。
返回新的一维数组。

兼容性

由于 flatMap() 方法是在 ECMAScript 2020 标准中新增的，所以并不是所有的浏览器都支持该方法。需要使用该方法的话，可以通过使用 polyfill 库来实现兼容。

总结

通过本文的详细介绍，我们了解到了在 ECMAScript 2020 标准中新增的数组方法 flatMap() 的语法、用法、实现原理以及兼容性。该方法可以大大简化代码的编写，提高开发效率，同时可以让我们更方便地处理各种多维数据结构，提升程序的可读性和可维护性。建议大家多加练习，熟悉该方法的使用，为自己的前端开发技能加码。

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