每天学点 ES2019-Flat 和 flatMap-JavaScript中文网-JavaScript教程资源分享门户

每天学点 ES2019-Flat 和 flatMap

ES2019-Flat 和 flatMap 是 ES6 中引入的两个数组方法。它们可以用于对数组进行操作和转换。在本篇文章中，我们将深入探索这两个方法的用法和功能。

ES2019-Flat

ES2019-Flat 是一个用于将多维数组转换为一维数组的方法。多维数组是指数组中包含其他数组的数组，我们可以用 ES2019-Flat 将这些数组转换为一维数组。让我们看一个实例：

const myArray = [1, [2, 3], [4, 5, [6, 7]]];
const flatArray = myArray.flat(); // [1, 2, 3, 4, 5, 6, 7]

ES2019-Flat 还可以接受一个可选参数，用于指定要展开的维度数。例如，如果我们只想展开一层嵌套数组，我们可以将参数设置为 1：

const myArray = [1, [2, 3], [4, 5, [6, 7]]];
const flatArray = myArray.flat(1); // [1, 2, 3, 4, 5, [6, 7]]

需要注意的是，ES2019-Flat 方法只会展开数组，对于其他类型的元素，它并不会做任何处理，表现也不同于循环操作。

flatMap

flatMap 方法是一个组合方法，它结合了 map 和 flat 方法的功能。它可以对数组中的每个元素执行一个映射操作，并返回一个新的扁平化数组。

让我们看一个实例，我们有一个包含员工姓名和对应语言技能组成的数组，我们希望将这些技能一一展开后合并：

const employees = [
    { name: 'Alice', skills: ['JavaScript', 'HTML', 'CSS'] },
    { name: 'Bob', skills: ['HTML', 'CSS'] },
    { name: 'Charlie', skills: ['JavaScript', 'React'] }
];

const mergedSkills = employees.flatMap(employee => employee.skills);
// ['JavaScript', 'HTML', 'CSS', 'HTML', 'CSS', 'JavaScript', 'React']

因为每个员工都有多个技能，所以通过 flatMap 的方式，我们可以将这些技能展开并合并为一个数组。

需要注意的是，flatMap 方法仍然可选一个参数，用于指定数组扁平化的深度。

在实现上，flatMap 方法与先调用 map 方法再调用 flat 一样。效率也类似。

结论

ES2019-Flat 和 flatMap 方法可以大大提高数组的操作效率以及照顾面向对象的需求。它们可以帮助我们将一维或多维数组转换为一维数组，并对数组中的每个元素进行映射操作，极大地丰富并简易化了 JavaScript 开发。

到这里，我想给大家推荐一个学习方式：每天花十分钟时间学习一些 JS 中的新功能和技巧，这将会在你的开发工作中大有裨益。

声明：本文大量参考了阮一峰老师的 es6.ruanyifeng.com 网站，特此感谢！

以上就是本文的全部内容，希望大家喜欢。

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