ECMAScript 2019（ES10）的 Array 的 flatMap() 方法的使用与实例详解
ECMAScript 2019（ES10）是 JavaScript 语言的最新标准，它引入了许多新的语言特性和 API。在 ES10 中，Array 对象新增了 flatMap() 方法，它可以将数组中的每个元素映射到一个新的数组，并将所有数组连接成一个新的数组。本文将详细介绍 flatMap() 方法的使用方法和实例，并探讨它的学习和指导意义。
一、flatMap() 方法的语法和参数
flatMap() 方法的语法如下：
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 是一个回调函数，它的参数如下：
- currentValue：当前元素的值。
- index（可选）：当前元素的下标。
- array（可选）：原始数组。
thisArg 是回调函数中 this 的值。
二、flatMap() 方法的使用方法
flatMap() 方法的作用是将数组中的每个元素映射到一个新的数组，并将所有数组连接成一个新的数组。具体来说，它会对数组中的每个元素调用回调函数，该回调函数返回一个数组，然后将所有数组连接到一个新的数组中。如果回调函数返回的是 undefined，则会忽略该元素。
下面是一个简单的示例，演示了如何使用 flatMap() 方法：
const arr = [1, 2, 3]; const result = arr.flatMap(x => [x, x * 2]); console.log(result); // [1, 2, 2, 4, 3, 6]
在这个例子中，flatMap() 方法对数组 [1, 2, 3] 中的每个元素调用回调函数 x => [x, x * 2]，该回调函数返回一个数组 [x, x * 2]，然后将所有数组连接到一个新的数组中，得到 [1, 2, 2, 4, 3, 6]。
三、flatMap() 方法的实例
接下来，我们将通过一些实例来深入了解 flatMap() 方法的使用和指导意义。
实例一：将多维数组转为一维数组
我们可以使用 flatMap() 方法将多维数组转为一维数组。例如，将数组 [[1, 2], [3, 4]] 转为 [1, 2, 3, 4]，可以使用以下代码：
const arr = [[1, 2], [3, 4]]; const result = arr.flatMap(x => x); console.log(result); // [1, 2, 3, 4]
在这个例子中，flatMap() 方法对数组 [[1, 2], [3, 4]] 中的每个元素调用回调函数 x => x，该回调函数返回原始数组本身，然后将所有数组连接到一个新的数组中，得到 [1, 2, 3, 4]。
实例二：将字符串转为数组
我们可以使用 flatMap() 方法将字符串转为数组。例如，将字符串 'Hello, world!' 转为 ['H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!']，可以使用以下代码：
const str = 'Hello, world!'; const result = Array.from(str).flatMap(x => x); console.log(result); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!']
在这个例子中，我们使用 Array.from() 方法将字符串转为数组，然后使用 flatMap() 方法将数组中的每个字符转为一个新的数组，最后将所有数组连接到一个新的数组中。
实例三：使用 flatMap() 方法实现数组去重
我们可以使用 flatMap() 方法实现数组去重。例如，将数组 [1, 2, 2, 3, 3, 3] 去重，可以使用以下代码：
const arr = [1, 2, 2, 3, 3, 3]; const result = arr.flatMap((x, i, a) => a.indexOf(x) === i ? x : []); console.log(result); // [1, 2, 3]
在这个例子中，我们使用 flatMap() 方法对数组 [1, 2, 2, 3, 3, 3] 中的每个元素调用回调函数 (x, i, a) => a.indexOf(x) === i ? x : []，该回调函数判断该元素在数组中的第一个位置是否等于当前位置，如果是，则返回该元素，否则返回一个空数组。最后，flatMap() 方法将所有数组连接到一个新的数组中，得到 [1, 2, 3]。
四、flatMap() 方法的学习和指导意义
flatMap() 方法是一个非常实用的方法，它可以将数组中的每个元素映射到一个新的数组，并将所有数组连接成一个新的数组。它不仅可以用于将多维数组转为一维数组和将字符串转为数组，还可以用于实现数组去重和其他一些高级操作。
学习 flatMap() 方法有助于我们更好地理解 JavaScript 语言中的数组操作，提高我们的编程能力。在实际开发中，我们可以使用 flatMap() 方法优化我们的代码，提高程序的性能和可读性。
总之，学习和掌握 flatMap() 方法对于我们成为一名优秀的前端工程师具有重要的意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d13c0ea941bf713429d2e4