ECMAScript 2018 中的新方法 Array.prototype.flat() 和 Array.prototype.flatMap() 使用教程

在 ECMAScript 2018 中，JavaScript 新增了两个数组方法：Array.prototype.flat() 和 Array.prototype.flatMap()。这两个方法都可以方便地操作多维数组，提高开发效率。本篇文章将详细介绍这两个方法的使用方法和注意事项，帮助开发者更好地掌握它们的用法。

Array.prototype.flat()

Array.prototype.flat() 方法可以将多维数组展平成一维数组。该方法接受一个可选参数 depth，表示要展平的层数。默认值为 1，即只展开一层。如果要展开所有层，可以传入 Infinity。

语法

arr.flat([depth])

参数

• depth：可选。要展平的层数。默认为 1。

返回值

返回一个新的一维数组。

示例

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

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

上面的例子展示了如何使用 flat() 方法将多维数组展开成一维数组。在第二个例子中，我们传入了 depth 参数为 2，表示要展开两层。

需要注意的是，flat() 方法会移除数组中的空项（undefined、null、空字符串等）。如果不希望移除空项，可以使用 flatMap() 方法。

Array.prototype.flatMap()

Array.prototype.flatMap() 方法可以先使用 map() 方法处理数组中的每个元素，然后将处理后的结果展平成一个新数组。该方法接受一个回调函数，该函数返回一个数组，flatMap() 方法将返回一个展平后的数组。

语法

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

参数

• callback：必选。用于处理数组中每个元素的回调函数。该函数返回一个数组。
• thisArg：可选。执行回调函数时 this 对象的值。

返回值

返回一个新的一维数组。

示例

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

上面的例子展示了如何使用 flatMap() 方法将数组中的每个元素乘以 2，并展开成一个新数组。

需要注意的是，flatMap() 方法会移除数组中的空项。如果不希望移除空项，可以在回调函数中返回一个包含一个元素的数组。

总结

Array.prototype.flat() 和 Array.prototype.flatMap() 是 ECMAScript 2018 中新增的两个数组方法，它们可以方便地操作多维数组，提高开发效率。在使用这两个方法时，需要注意参数的传入和返回值的处理。希望本文的介绍能够帮助读者更好地掌握这两个方法的使用方法。

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