ES10 中的新增 Array.{flat,flatMap} 方法，打破你之前数组操作的认识-JavaScript中文网-JavaScript教程资源分享门户

ES10 中的新增 Array.{flat,flatMap} 方法，打破你之前数组操作的认识

在前端开发中，操作数组是不可避免的一部分。在 ES10 中，新增了两个数组方法：Array.flat 和 Array.flatMap。这两个方法可以帮助我们更方便地处理数组，打破我们以往对数组操作的认识。

Array.flat 方法

Array.flat 方法可以将多维数组转换为一维数组，同时可以传递一个参数，指定转换的深度。以下是一个示例：

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

在上面的代码中，传递 2 作为参数，表示将数组转换为最多两层嵌套的一维数组。

如果你使用的是旧版的 JavaScript，可以通过以下方式将多维数组转换为一维数组：

const arr = [1, 2, [3, [4, 5]]];
const flatArr = arr.reduce((prev, curr) => prev.concat(curr), []);
console.log(flatArr); // [1, 2, 3, 4, 5]

可以看到，Array.flat 方法让数组操作变得更加简便和高效。

Array.flatMap 方法

Array.flatMap 方法是 Array.map 方法和 Array.flat 方法的结合体。在使用 Array.map 方法时，我们需要手动将返回的数组转换为一维数组。但是，如果我们使用 Array.flatMap 方法，就可以在一次操作中完成这两个步骤。

以下是一个示例：

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

在上面的代码中，我们将数组中的每个元素乘以 2，并使用 Array.flatMap 方法将返回的多维数组转换为一维数组。由于 Array.flatMap 方法可以一次性处理多维数组，我们不需要手动使用 Array.flat 方法将返回的数组转换成一维数组。

值得注意的是，在使用 Array.flatMap 方法时，返回值必须是一个数组，否则会报错。

总结

在本文中，我们介绍了 ES10 中新增的 Array.flat 和 Array.flatMap 方法。这两个方法可以帮助我们更方便地处理数组。在操作数组时，我们应该考虑使用这些现代的、高效的方法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653724737d4982a6ebf8509a