在实际开发中，我们经常会遇到嵌套的数组结构，例如 API 返回的数据、复杂的配置对象等。然后很多时候，我们需要将这些嵌套的数组 “展平” 为一维数组的过程，这样可以使得数据更易于遍历和处理。
所谓的数组扁平化，指的是将多维数组转化为一维数组，比如将 [1,[2,[3]],4,[5]] 转化为 [1,2,3,4,5]。
在 JavaScript 中，如果想要实现数组的扁平化（也就是将多维数组变为一维数组），常用的方式有以下 2 种。
- 使用 flat() 方法。
- 使用递归函数。
使用 flat() 实现数组扁平化
在 ES6 中，我们可以使用 flat() 方法来 “打平” 一个数组，也就是实现数组的扁平化。
语法：
arr.flat(正整数或Infinity)说明：
flat() 方法接受一个参数，表示想要拉平的层数。这个参数可以是正整数或 Infinity，默认值是 1。
比如，flat(1) 表示拉平 1 层，flat(2) 表示拉平 2 层，flat(Infinity) 表示不管有多少层嵌套，都转化成一位数组。一般情况下我们只会用到 flat(Infinity)。
示例 1：flat() 扁平化一层嵌套数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const arr = [10, 20, [30, 40], 50];
const result = arr.flat(); // 默认深度为 1
console.log(result);
</script>
</body>
</html>运行结果如下。
[ 10, 20, 30, 40, 50 ]分析：
默认情况下，flat() 会将内嵌的 [30, 40] 数组提升了一层。
示例 2：flat() 扁平化多层嵌套数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const arr = [1,[2,[3]],4,5];
console.log(arr.flat(1));
console.log(arr.flat(2));
console.log(arr.flat(Infinity));
</script>
</body>
</html>运行结果如下。
[1, 2, [3], 4, 5]
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]分析：
对于 arr.flat(1) 来说，它会将数组扁平化一个层级，此时 [3] 仍然是一个嵌套数组，因为它原本位于第三层。
使用递归实现数组扁平化
除了使用 ES6 提供的 flat() 方法之外，我们也可以编写一个独立的 “递归函数” 来实现数组的深度扁平化。
示例 3：使用递归函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function flatArr(arr) {
let resultArr = [];
arr.forEach(function (item) {
// 判断是否数组
if (Array.isArray(item)) {
resultArr = resultArr.concat(flatArr(item));
} else {
resultArr = resultArr.concat(item);
}
});
return resultArr;
}
const arr = [1, [2, [3]], 4, [5]];
console.log(flatArr(arr));
</script>
</body>
</html>运行结果如下。
[ 1, 2, 3, 4, 5 ]分析：
在这个例子中，我们定义了一个函数 flatArr() 用于实现数组的扁平化。在 flatArr() 中，我们首先定义了一个用于保存结果的空数组 resultArr，接下来使用 forEach() 方法对传进来的数组进行遍历。在遍历的过程中，如果是数组，则递归处理；如果不是数组，则添加到 resultArr 中。最后拿到的 resultArr，就是被扁平化的数组了。
