Array 数组扁平（ES10）

最新推荐文章于 2023-12-08 13:25:04 发布

原创最新推荐文章于 2023-12-08 13:25:04 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

ECMAScript 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了JavaScript中Array对象的扩展，重点讲解了`Array.prototype.flat()`和`Array.prototype.flatMap()`两个方法。`flat()`方法用于将多维数组扁平化，可指定深度，默认为1。而`flatMap()`则结合了`map`和`flat`的功能，先映射每个元素，再将其扁平化为单层数组。通过示例展示了两者在不同情况下的使用效果和区别。

Array 扩展

Array 扩展
- Array.prototype.flat()
- Array.prototype.flatMap()

Array 扩展

Array.prototype.flat()

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

语法

const newArray = arr.flat(depth)

解释

参数含义必选
depth 指定要提取嵌套数组的结构深度，默认值为 1 N
示例

const numbers = [1, 2, [3, 4, [5, 6]]]
console.log(numbers.flat())
// [1, 2, 3, 4, [5, 6]]

注意
此时 flat 的参数没有设置，取默认值 1，也就是说只扁平化向下一级，遇到 [3, 4, [5, 6]] 这个数组会扁平会处理，不会再继续遍历内部的元素是否还有数组

const numbers = [1, 2, [3, 4, [5, 6]]]
console.log(numbers.flat(2))
// [1, 2, 3, 4, 5, 6]

当 flat 的参数大于等于 2，返回值就是 [1, 2, 3, 4, 5, 6] 了。

Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。从方法的名字上也可以看出来它包含两部分功能一个是 map，一个是 flat（深度为1）。

语法

const new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {// 返回新数组的元素 }[, thisArg])

解释

参数含义必选
callback 可以生成一个新数组中的元素的函数，可以传入三个参数：currentValue、index、array Y
thisArg 遍历函数 this 的指向 N
示例

const numbers = [1, 2, 3]
numbers.map(x => [x * 2]) // [[2], [4], [6]]
numbers.flatMap(x => [x * 2]) // [2, 4, 6]

这个示例可以简单对比下 map 和 flatMap 的区别。当然还可以看下下面的示例：

let arr = ['今天天气不错', '', '早上好']
arr.map(s => s.split(''))
// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]
arr.flatMap(s => s.split(''))
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]