ES10 新增 Array.flatMap 用法详解-JavaScript中文网-JavaScript教程资源分享门户

ES10 新增了一个非常实用的数组方法，即 Array.prototype.flatMap()。这个方法可以让我们更方便地处理多维数组，让代码更加简洁和易读。在本文中，我们将详细介绍 flatMap() 的用法，并提供一些示例代码来帮助读者更好地理解。

什么是 `flatMap()`？

在介绍 flatMap() 之前，我们先来看一下 map() 方法。map() 方法是 JavaScript 数组原型对象上的一个方法，它接受一个函数作为参数，该函数会被应用到数组的每个元素上，并返回一个新的数组。

const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8]

flatMap() 方法与 map() 方法类似，但是它额外提供了一个功能：可以将多维数组扁平化为一维数组。

`flatMap()` 的语法

flatMap() 方法的语法与 map() 方法类似，只是它的返回值是一个扁平化的一维数组。

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

callback：一个函数，用来操作数组中的每个元素。
currentValue：当前正在操作的元素。
index（可选）：当前元素的索引。
array（可选）：原数组。
thisArg（可选）：执行回调函数时使用的this值。

`flatMap()` 的用法

下面我们来看一下 flatMap() 方法的用法。

1. 将多维数组扁平化为一维数组

const numbers = [[1, 2], [3, 4], [5, 6]];
const flattenedNumbers = numbers.flatMap(arr => arr);
console.log(flattenedNumbers); // [1, 2, 3, 4, 5, 6]

2. 将数组中的每个元素映射为一个新的数组，并将这些数组合并为一个新的数组

const words = ["hello", "world", "goodbye"];
const letters = words.flatMap(word => word.split(""));
console.log(letters); // ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d", "g", "o", "o", "d", "b", "y", "e"]

3. 处理多维数组

const users = [
  { name: "Tom", hobbies: ["reading", "music"] },
  { name: "Jerry", hobbies: ["running", "swimming"] }
];
const hobbies = users.flatMap(user => user.hobbies);
console.log(hobbies); // ["reading", "music", "running", "swimming"]

总结

flatMap() 方法是一个非常实用的数组方法，它可以让我们更方便地处理多维数组。在实际开发中，我们可以使用 flatMap() 方法来简化代码，使其更加易读和可维护。希望本文能够帮助读者更好地理解 flatMap() 方法的用法，并在实际开发中得到应用。

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

ES10 新增 Array.flatMap 用法详解

什么是 flatMap()？

flatMap() 的语法