ES7 中的 Array.prototype.flat 和 flatMap 方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，处理数组是一个非常常见的任务。在 ES7 中，新增了两个数组方法：Array.prototype.flat 和 Array.prototype.flatMap。这两个方法可以帮助我们更方便地操作数组，提高开发效率。本文将介绍这两个方法的使用方法和应用场景。

Array.prototype.flat

Array.prototype.flat 方法用于将嵌套的数组“扁平化”，即将多维数组转换为一维数组。这个方法接受一个可选的参数，用于指定要扁平化的层数。如果不传参数，则默认扁平化一层。

以下是一个示例代码：

const arr = [1, 2, [3, 4, [5, 6]]];
const flatArr = arr.flat(); // [1, 2, 3, 4, [5, 6]]
const deepFlatArr = arr.flat(2); // [1, 2, 3, 4, 5, 6]

在上面的代码中，我们定义了一个数组 arr，它包含了一些数字和一个嵌套的数组。调用 flat 方法后，我们得到了一个扁平化的数组 flatArr，它只扁平化了一层。如果我们传入参数 2，就会将数组完全扁平化，得到 deepFlatArr 数组。

这个方法在处理嵌套的数组时非常有用。比如，我们从后端接口获取到的数据可能是一个嵌套的数组，我们可以使用 flat 方法将其扁平化，方便我们进行后续的处理。

Array.prototype.flatMap 方法是 flat 方法的升级版，它可以在扁平化数组的同时，对每个元素执行一个函数，并返回一个新数组。这个方法接受一个参数，即要对每个元素执行的函数。

以下是一个示例代码：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

在上面的代码中，我们定义了一个数组 arr，它包含了一些数字。调用 flatMap 方法后，我们得到了一个扁平化的数组 flatMapArr，它对每个元素执行了一个函数，将每个元素和它的两倍放入了新的数组中。

这个方法在一些特定场景下非常有用。比如，我们有一个数组，里面包含了一些对象，每个对象都有一个数组属性。我们可以使用 flatMap 方法将这些数组属性扁平化，并且对每个元素执行一个函数，返回一个新的数组。

ES7 中的 Array.prototype.flat 和 flatMap 方法是非常实用的数组方法，可以帮助我们更方便地操作数组，提高开发效率。在实际开发中，我们可以根据具体的场景选择使用这两个方法。需要注意的是，这两个方法是 ES7 中新增的，可能不支持所有的浏览器，需要进行兼容性处理。

希望本文对大家有所帮助，如果有任何疑问或建议，欢迎留言讨论。

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