ES10 中的新数组方法：Array.prototype.flat() 和 flatMap() 详解

JavaScript 是一门非常灵活和强大的编程语言，也是前端开发应用最为广泛的语言之一。在过去的几年中，JavaScript 发生了很多重大变化，其中最重要的是 ES6 (ECMAScript 2015) 标准的发布。而在 ES10 中，也加入了不少新特性，尤其是在数组操作方面。本文将着重介绍 ES10 的两个新数组方法：Array.prototype.flat() 和 flatMap() 。

Array.prototype.flat()

Array.prototype.flat() 方法用于将一个多维数组转换为一个一维数组。该方法可以将数组扁平化，并且可以指定扁平化的深度。如果不指定深度，则默认为 1。

Syntax

const newArray = arr.flat([depth]);

• newArray: 扁平化后生成的新数组
• arr: 必需，要扁平化的多维数组
• depth: 可选，指定要扁平化的深度，默认值为 1

示例

// 不指定深度，默认为 1
const arr1 = [1, 2, [3, 4], 5];
const flatArr1 = arr1.flat();
console.log(flatArr1); // [1, 2, 3, 4, 5]

// 指定深度为 2
const arr2 = [1, 2, [3, 4, [5, 6]], 7];
const flatArr2 = arr2.flat(2);
console.log(flatArr2); // [1, 2, 3, 4, 5, 6, 7]

从上述示例可知，flat() 方法可以将一个多维数组转换成一个一维的数组，而且在使用时可以指定深度。

Array.prototype.flatMap()

Array.prototype.flatMap() 方法在 ES10 中也被引入，它的作用是对数组进行 map 操作之后，再将数组扁平化为一个新数组。该方法可以简单地理解为 flat() 和 map() 两个操作的组合。

Syntax

const newArray = arr.flatMap(callback(currentValue[, index[, array]])[, thisArg]);

• newArray: 扁平化后生成的新数组
• arr: 必需，要扁平化的数组
• callback: 对数组中的每个元素执行的函数
• currentValue: 数组中正在处理的当前元素
• index: 数组中正在处理的当前元素的索引
• array: 调用 flatMap() 方法的原数组
• thisArg: 可选，执行 callback 函数时使用的 this 值

示例

// 对数组中的每个元素乘以 2，再将数组扁平化为一个新数组
const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(x => [x * 2]);
console.log(flatMapArr); // [2, 4, 6]

从上述示例可知，flatMap() 方法可以对一个数组进行 map 操作，并将数组扁平化为一个新数组。

总结

以上是 ES10 中两个新数组方法：Array.prototype.flat() 和 flatMap() 的详解。这两个方法可以使用更简单、更方便的方式处理数组。在实际应用中，我们可以更快地解决问题，提高代码的效率和可维护性。

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