ES9 中的重要列表方法：Array.prototype.flat() 和 Array.prototype.flatMap() 的区别-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，数组是最常用的数据结构之一。在 ES9 中，有两个新的数组方法：Array.prototype.flat() 和 Array.prototype.flatMap()。它们作用于 JavaScript 数组，并提供了处理嵌套数组的更强大的方式。在本文中，我们将深入讨论这两个方法的用法，以及它们之间的重要区别。

Array.prototype.flat() 方法

Array.prototype.flat() 是一个非常有用的方法，它可以将多维的嵌套数组变成一维的数组。这个方法可以方便地展开嵌套的子数组，使得二维、三维、四维等等数组变成一个简单的数组。使用 flat() 方法可以将数组扁平化，以便更容易地进行遍历和操作。

下面是这个方法的语法和示例：

const arr = [1, 2, [3, 4], 5, [6, [7, 8]]];
const flattened = arr.flat();

console.log(flattened);
// Output: [1, 2, 3, 4, 5, 6, [7, 8]]

在这个例子中，我们有一个包含多个嵌套数组的数组。flat() 方法消除了这些嵌套，并返回一个新的一维数组 flattened。

可以通过指定要展开的嵌套级别来控制数组的扁平化。flat() 方法接受一个可选的参数 level，用于指定要扁平化的嵌套深度。例如，您可以使用 flat(2) 将一个包含嵌套数组的数组展开两层深度。

Array.prototype.flatMap() 方法

Array.prototype.flatMap() 方法首先映射每个元素，然后将结果压缩成一个新数组。就像 flat() 方法一样，flatMap() 也有一个可选的参数，用于指定映射的嵌套深度。

下面是示例：

// javascriptcn.com 代码示例
const arr = [1, 2, 3, 4, 5];

const mapped = arr.map(x => [x * 2]);

console.log(mapped);
// Output: [[2], [4], [6], [8], [10]]

const flattened = arr.flatMap(x => [x * 2]);

console.log(flattened);
// Output: [2, 4, 6, 8, 10]

在这个例子中，我们首先使用 map() 方法将数组中的每个元素映射为包含其两倍的一个新数组。然后，我们使用 flatMap() 方法将嵌套数组压缩为单个的扁平化数组。

需要注意的是，flatMap() 方法会首先映射每个元素，接着将它们扁平化成扁平化数组。因此，与 map() 和 flat() 方法相比，flatMap() 方法可以在一个数组操作中完成两个操作，这使得它成为一种更有效的方法。

Array.prototype.flatMap() 和 Array.prototype.flat() 的重要区别

尽管这两个方法看起来非常相似，但它们之间有一个重要的区别。Array.prototype.flatMap() 方法在映射后会执行一次展开操作，同时删除所有未定义内容，即使这个嵌套数组是由空数组 [] 组成。相反，Array.prototype.flat() 方法只是将数组中的嵌套数组展开成一个新数组，而不剔除数组中的空项。

以下是一个示例，说明它们之间的重要区别：

const arr = [1, 2, [3, 4, []], 5, [6, [7, 8]]];

const flattened = arr.flat();
console.log(flattened); // Output: [1, 2, 3, 4, 5, 6, [7, 8]]

const mapped = arr.flatMap((x) => x);
console.log(mapped); // Output: [1, 2, 3, 4, 5, 6, 7, 8]

在这个例子中，我们有一个包含空数组的嵌套数组。使用 flat() 方法，它们被保留在扁平化后的数组中。但是使用 flatMap() 方法，空数组被删除，只有非空元素被保留在扁平化后的数组中。

总结

在本文中，我们深入讨论了 ES9 中的两个重要列表方法 Array.prototype.flatMap() 和 Array.prototype.flat()，以及它们之间的区别。我们已经学习了这两个方法的用法，以及它们在处理嵌套数组时的区别。我们还看了一些示例代码，以便更好地理解它们的用法和优势。它们是十分重要的方法，可以帮助我们在 JavaScript 中更有效地处理复杂的多维数组。

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