在 ECMAScript 2016 (ES7) 中，新增了 Array.prototype.flatMap 方法，它提供了一种更简洁、更易用的方式来对数组进行操作和转换。
本文将详细介绍 Array.prototype.flatMap 方法的特性和用法，以及它在实际项目中的应用。
方法介绍
Array.prototype.flatMap 方法接受一个函数作为参数，该函数会被应用到数组中的每个元素上，并返回一个新的数组，该数组将所有元素连接成一个新的数组。与 Array.prototype.map 不同的是， flatMap 能够同时处理嵌套数组。
方法的使用格式如下：
arr.flatMap(callback[, thisArg])
其中 callback 是一个函数，它接受三个参数：
currentValue：当前元素的值index：当前元素的索引array：当前操作的原始数组
thisArg 可选参数，表示将要传入 callback 函数内部的 this 值。
例子
以下是一些使用 flatMap 的例子：
-- -------------------- ---- ------- -- ---------- - ----- ---- - --- -- -- -- --- ----- ------- - -------------- -- -- - ---- --------------------- -- --- -- -- -- --- -- ------------- ----- ---- - --- -- -- -- --- ----- ------- - -------------- -- ------------------------ --------------------- -- ----- ---- ---- ---- ---- -- ------ ----- ---- - ---- --- --- --- --- ---- ----- ------- - -------------- -- ------- -- - - ---- --------------------- -- --- -- -- -- --- ---
应用场景
1. 压平嵌套数组
一个常见的应用场景是处理嵌套数组。在原来的版本中，要将嵌套数组压平需要额外的代码和思考量。使用 flatMap 可以在一行代码中解决这个问题。
const arr = [[1, 2], [3, 4], [5, 6]]; const flattened = arr.flatMap(x => x); console.log(flattened); // [1, 2, 3, 4, 5, 6]
2. Map 迭代操作的简化
在早期的版本中，如果要对数组中的每个元素执行一个操作，比如将所有元素相加，我们可以使用 Array.prototype.map 和 Array.prototype.reduce 来解决。
const arr = [1, 2, 3, 4, 5]; const sum = arr.map(x => x * 2).reduce((acc, x) => acc + x, 0); console.log(sum); // 30
但是在 ES7 中，我们可以使用 flatMap 直接一次性完成这个操作。
const arr = [1, 2, 3, 4, 5]; const sum = arr.flatMap(x => x * 2).reduce((acc, x) => acc + x, 0); console.log(sum); // 30
3. 数据清洗
当我们需要清洗数据时，往往需要处理嵌套的信息，比如：
const data = [ ["john","male", 26], ["jane","female", 22], ["mike","male", 20], ["susan","female", 27], ];
要将它转化为一个数组对象，可以使用 map 函数加上一些解构来解决。
const result = data.map(([name, gender, age]) => ({ name, gender, age }));
console.log(result);
// [
// {name: "john", gender: "male", age: 26},
// {name: "jane", gender: "female", age: 22},
// {name: "mike", gender: "male", age: 20},
// {name: "susan", gender: "female", age: 27},
// ];但是这个代码仍然有点丑陋。使用 flatMap 可以将代码变得更加简洁和易读。
const result = data.flatMap(([name, gender, age]) => [{ name, gender, age }]);
console.log(result);
// [
// {name: "john", gender: "male", age: 26},
// {name: "jane", gender: "female", age: 22},
// {name: "mike", gender: "male", age: 20},
// {name: "susan", gender: "female", age: 27},
// ];总结
Array.prototype.flatMap 方法是一个很有用的数组操作方法，它能够压平嵌套数组、简化 Map 迭代操作、以及对数据进行清洗等。
使用 flatMap 不仅能够简化代码，还可以提高代码的可读性。需要注意的是，flatMap 是 ES7 的新方法，一些浏览器可能还不支持，所以在项目中需要进行相关兼容性的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c7150a10032fedd3906df3