在 JavaScript 中，数组是一种保存多个值的有序集合，它非常常见。ES6 引入了很多方便的 Array 新方法，例如 Array.map、Array.filter、Array.reduce 等等。而在 ES10 中，我们迎来了两个新的函数，它们分别是 Array.flat 和 Array.flatMap，它们可以让开发者方便地操作多维数组。
Array.flat 方法
Array.flat 方法可以将嵌套数组（多维数组）变成一维数组。该方法可以通过指定数组嵌套的深度来逐级剥离嵌套的数组，将其扁平化结构展示出来。
语法如下：
arr.flat([depth])
- arr: 表示当前数组
- depth: 如果不指定 depth，flat 默认会将嵌套数组全部展开，depth 不能小于 1，否则 flat 不起作用。
示例代码：
const arr = [1, [2, 3], [[4], [5, [6]]]]; console.log(arr.flat()) // [1, 2, 3, [4], 5, [6]] console.log(arr.flat(1)) // [1, 2, 3, [4], 5, [6]] console.log(arr.flat(2)) // [1, 2, 3, 4, 5, [6]] console.log(arr.flat(3)) // [1, 2, 3, 4, 5, 6]
Array.flatMap 方法
Array.flatMap 方法可以先使用 map 方法，然后使用 flat 将结果扁平化，也就是合并所有的映射结果成一个新数组。在某些场景下，它可以一步到位地实现 FlatMap 效果。
语法如下：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
- callback：生成新数组元素的函数，该函数可以接受三个参数：currentValue，index 和 array。
- currentValue：当前正在处理的元素。
- index：当前正在处理的元素位置，从 0 开始。
- array：调用 flatMap 的原数组。
- thisArg（可选）：执行 callback 函数时 this 的值。
示例代码：
const arr = ["Hello", "world"]
const newArr = arr.flatMap(x => x.split(""));
console.log(newArr) // ["H", "e", "l", "l", "o", "w", "o", "r", "l", "d"]引用时的错误处理
需要注意的是，虽然 Array.flat 和 Array.flatMap 是新方法，但是在旧的浏览器中无法使用。在使用时需要注意，需要先进行一下兼容性处理，避免出现错误。
一种处理方式是使用 polyfill：
if (!Array.prototype.flat) {
Array.prototype.flat = function() {
// Use the old technique instead
};
}另一种方式是使用 babel。在使用 babel 时，需要安装一个插件 @babel/plugin-proposal-optional-chaining，然后在 .babelrc 中编写以下内容：
{
"plugins": [
"@babel/plugin-proposal-optional-chaining"
]
}总结
这篇文章中，我们简要介绍了 ES10 中的两个新方法 Array.flat 和 Array.flatMap，并且提醒了在使用时需要进行一些错误处理。这两个新方法虽然不是很常见，但是它们在某些场景下非常有用，可以帮助开发者快速的搞定从多维数组搞到一维数组的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6592633ceb4cecbf2d732d9c