前言
ECMAScript（简称 ES）是指定 JavaScript 语言标准规范的官方文档，常常被称为 JavaScript 的著作权持有者。ECMAScript 受到广泛的应用，不仅在浏览器端开发中起着至关重要的作用，而且大量的 Node.js 应用也在使用 ECMAScript。近期，ECMAScript 再次发布了新的规范版本，其中最受欢迎的新增属性之一便是数组的 flatMap() 方法。该方法尤其在前端开发中有着重要的学习和使用价值。接下来，让我们详细了解一下 ECMAScript 2021 中的数组 flatMap() 方法，以及它在前端开发中的应用。
flatMap() 简介
flatMap() 方法是 JavaScript 中 Array 原型的一部分。它是一个可以将多维数组展平的高阶函数，它会遍历整个数组并返回一个新的展平后的数组。
该函数的基本语法如下：
array.flatMap(callback[, thisArg])
其中：
array：需要被展平的原始数组。callback：一个用来处理数组中每个元素的回调函数，可以有三个参数：currentValue、index、array。currentValue指每个元素的值，index指当前元素的索引位置，array指原始数组。该回调函数返回一个新数组，用于进行该元素的映射。thisArg：可选参数，使用该值以设定 this 的值。
flatMap() 的应用
flatMap() 通常用来对复杂数组进行简化，并返回一个展平后的新数组。也就是说，使用 flatMap() 可以将多维嵌套的数组中的各个元素展开成一个数组，并且这个新数组中不会出现 undefined 和 null。
下面是一个展示 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]
该示例中，我们创建了一个包含整数的数组，并使用 flatMap() 创建了一个新的数组，该数组中按照原始数组中的顺序包含了数组中每个元素及其对应的两倍。正如上面所述，通过 flatMap() 的处理，我们可以将多维嵌套的数组中的各个元素简化为一维数组，极大地简化了我们在日常开发中的编写代码的流程。
flatMap() 实例解析
下面将进一步详细说明 flatMap() 的应用以及展示具体的实例。
对数组中的字符串进行拆分
当我们需要对一个包含字符串的数组执行展开操作时，flatMap() 是很有用的：
const arr = ["Hello World!", "This is flatMap()!"]; const result = arr.flatMap(x => x.split(" ")); console.log(result); // ["Hello", "World!", "This", "is", "flatMap()!"]
在上述示例中，我们创建了一个包含两个字符串的数组，并使用 flatMap() 将这两个字符串中的单词分开，创建了一个包含所有单词的新数组。为了执行这个操作，我们传递了一个回调函数给 flatMap()，用于将每个字符串拆分成单词，并返回一个新的字符串数组。
对非数组元素使用 flatMap()
值得注意的是，flatMap() 不仅可以用于数组的展开，也可以用于某些对象类型的展开。具体的示例如下：
-- -------------------- ---- ------- ----- --- - ------- -------- ----- -- ------------ -- ----- ----- -- -- ----- ---- --- - ----- ----- ---- ----- ------ - ------------- -- - -- ------- - --- --------- - ------ --------- --- - -- ------- - --- --------- - ------ ----------- -- ------------------ - ------ ---- --- -------------------- -- --------- --------- ------- ----- ------------- ------ ----- ------展开代码
在这个示例中，我们创建了一个包含字符串和对象的数组，并将对象当做数组元素进行了展开。我们传递了一个回调函数给 flatMap()，这个回调函数被用于检查数组元素的类型。如果是字符串类型，我们将元素返回到新的单词数组中；如果是对象类型，我们继续对其使用 flatMap()，并返回元素值的数组；如果是其他类型，我们将该元素放回到新数组中。
对空元素的处理
对于原始数组中的包含字符串为空的元素，flatMap() 方法会将其过滤掉，并返回一个没有空元素的新数组。具体示例如下：
const arr = ["I am a programmer", "", "and I love coding", "I will always keep learning", ""]; const result = arr.flatMap(x => x.split(" ")); console.log(result); // ["I", "am", "a", "programmer", "and", "I", "love", "coding", "I", "will", "always", "keep", "learning"]
在这个示例中，我们使用 flatMap() 对字符串进行了展开操作，但是原始数组中包含有多余的空字符串元素。由于 flatMap() 过滤掉了空元素，因此在结果中仅仅只包含了字符串的非空元素。需要注意的是，如果对于不包含空元素的数组使用 flatMap()，它只会返回一个一维数组，与普通的 map() 函数没有任何区别。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d80e2aa941bf7134e63f29
