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
示例
-- -------------------- ---- ------- -- --------- - ----- ---- - --- -- --- --- --- ----- -------- - ------------ ---------------------- -- --- -- -- -- -- -- ----- - ----- ---- - --- -- --- -- --- ---- --- ----- -------- - ------------- ---------------------- -- --- -- -- -- -- -- --
从上述示例可知，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