ECMAScript 2017：使用 Array.prototype.flatMap 解决数组扁平化和映射问题

在前端开发中，我们经常需要对数组进行操作，比如扁平化和映射。ECMAScript 2017 新增的 Array.prototype.flatMap 方法可以帮助我们更简便地实现这些操作。

扁平化数组

扁平化数组是将嵌套的数组展开为一维数组的过程。在 ES6 之前，我们可以使用递归或者 reduce 方法来实现数组扁平化。例如，以下代码可以将一个嵌套数组扁平化：

const nestedArr = [1, [2, [3, 4]], 5];
const flattenArr = arr => arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenArr(val)) : acc.concat(val), []);
console.log(flattenArr(nestedArr)); // [1, 2, 3, 4, 5]

在 ES6 中，我们可以使用展开运算符和递归来实现数组扁平化：

const nestedArr = [1, [2, [3, 4]], 5];
const flattenArr = arr => [].concat(...arr.map(val => Array.isArray(val) ? flattenArr(val) : val));
console.log(flattenArr(nestedArr)); // [1, 2, 3, 4, 5]

在 ECMAScript 2019 中，我们可以使用 flat() 方法来实现数组扁平化：

const nestedArr = [1, [2, [3, 4]], 5];
console.log(nestedArr.flat(Infinity)); // [1, 2, 3, 4, 5]

在 ECMAScript 2017 中，我们可以使用 flatMap() 方法来实现数组扁平化。flatMap() 方法的作用是先对数组中的每个元素执行一个映射函数，然后将返回的结果压缩成一个新数组。与 map() 方法不同的是，flatMap() 方法会自动扁平化返回的数组。例如，以下代码可以将一个嵌套数组扁平化：

const nestedArr = [1, [2, [3, 4]], 5];
const flattenArr = arr => arr.flatMap(val => Array.isArray(val) ? flattenArr(val) : val);
console.log(flattenArr(nestedArr)); // [1, 2, 3, 4, 5]

映射数组

映射数组是将数组中的每个元素通过一个函数映射为一个新的元素的过程。在 ES6 之前，我们可以使用 map 方法来实现数组映射。例如，以下代码可以将一个数组中的每个元素加一：

const arr = [1, 2, 3];
const mapArr = arr.map(val => val + 1);
console.log(mapArr); // [2, 3, 4]

在 ECMAScript 2017 中，我们可以使用 flatMap() 方法来实现数组映射。与 map() 方法不同的是，flatMap() 方法会自动扁平化返回的数组。例如，以下代码可以将一个数组中的每个元素加一，并将结果扁平化：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(val => [val + 1, val + 2]);
console.log(flatMapArr); // [2, 3, 3, 4, 4, 5]

总结

ECMAScript 2017 新增的 Array.prototype.flatMap 方法可以帮助我们更简便地实现数组扁平化和映射操作。使用 flatMap() 方法可以避免手动实现扁平化和映射的复杂性，并提高代码的可读性和可维护性。但是需要注意的是，flatMap() 方法的兼容性并不是很好，在使用时需要进行兼容性检测或者使用 polyfill。

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