JavaScript 数组 flat() 方法

JavaScript flat() 语法

flat() 是 JavaScript 数组的方法，它可以用来 “打平” 一个数组，也就是实现数组的扁平化。所谓的数组扁平化，指的是将多维数组转化为一维数组，比如将 [1, [2, [3]], 4, [5]] 转化为 [1, 2, 3, 4, 5]。

语法：

arr.flat(depth)

说明：

flat() 方法接收单个参数。

• depth（可选）：表示想要拉平的层数。这个参数可以是正整数或 Infinity，默认值是 1。

比如，flat(1) 表示拉平 1 层，flat(2) 表示拉平 2 层。flat(Infinity) 表示不管有多少层嵌套，都转化成一维数组。

除了 flat() 方法之外，还有一个 flatMap() 方法。对于这两个方法，小伙伴们应该放在一起对比学习。

JavaScript 数组 flatMap() 方法

JavaScript flat() 摘要

JavaScript flat() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript flat() 方法是如何使用的。

示例 1：flat() 基本用法

const arr = [1, [2, [3]], 4, 5];
console.log(arr.flat(1));
console.log(arr.flat(2));
console.log(arr.flat(Infinity));

运行结果如下。

[1, 2, [ 3 ], 4, 5]
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]

示例 2：不带参数的 flat() 方法

const arr = [1, [2, [3]], 4, 5];
console.log(arr.flat());

运行结果如下。

[ 1, 2, [ 3 ], 4, 5 ]

分析：

arr.flat() 等价于 arr.flat(1)，表示只会拉平一层。

示例 3：flat() 删除数组中的 “空槽元素”

const arr = [2, , 6, , 10];
const result = arr.flat();
console.log(arr);
console.log(result);

运行结果如下。

[ 2, <1 empty item>, 6, <1 empty item>, 10 ]
[ 2, 6, 10 ]

深入了解 flat()

在实际开发中，实现数组的扁平化只有在一些特殊的场景才会用到。但在前端面试中，很多面试官却很喜欢拿这个知识点来考，最常见的一个问题就是：请分别使用 ES5 和 ES6 来实现数组的扁平化。

ES6 的方式我们当然知道了，那就是使用 flat(Infinity)。接下来给大家介绍一下 ES5 是怎么实现的。当然，小伙伴也可以先自己尝试思考实现一下，这样更能锻炼自己的能力。

在 ES5 中，如果想要实现数组的扁平化，常见的有以下 3 种方式。

• 递归实现。
• toString() 方法。
• join() 方法。

示例 4：递归实现数组扁平化

function flatArr(arr) {
    var resultArr = [];
    arr.forEach(function (item) {
        if (Array.isArray(item)) {
            resultArr = resultArr.concat(flatArr(item));
        } else {
            resultArr = resultArr.concat(item)
        }
    });
    return resultArr;
}

var arr = [1, [2, [3]], 4, [5]];
console.log(flatArr(arr));

运行结果如下。

[1, 2, 3, 4, 5]

分析：

在这个例子中，我们定义了一个函数 flatArr() 用于实现数组的扁平化。在 flatArr() 中，我们首先定义了一个用于保存结果的空数组 resultArr，接下来使用 forEach() 方法对传进来的数组进行遍历。在遍历的过程中，如果是数组，则递归处理；如果不是数组，则添加到 resultArr 中。最后拿到的 resultArr，就是被扁平化的数组了。

示例 5：toString() 方法实现数组扁平化

var arr = [1, [2, [3]], 4, [5]];
var tempArr = arr.toString().split(",");
var resultArr = tempArr.map(function (item) {
    return parseInt(item);
});
console.log(resultArr);

运行结果如下。

[1, 2, 3, 4, 5]

分析：

在这个例子中，arr.toString() 的结果是这样一个字符串："1, 2, 3, 4, 5"。了解到这一点，接下来就好办了。上面这种方式不仅无法处理非数字类型（如对象、字符串），而且如果数组元素本身包含逗号，还会导致分割错误。因此仅适用于纯数字的简单数组。

示例 6：join() 方法实现数组扁平化

var arr = [1, [2, [3]], 4, [5]];
var tempArr = arr.join().split(",");
var resultArr = tempArr.map(function (item) {
    return parseInt(item);
});
console.log(resultArr);

运行结果如下。

[1, 2, 3, 4, 5]

分析：

在这个例子中，arr.join() 的结果是这样一个字符串："1, 2, 3, 4, 5"，接下来的实现方式就是和 toString() 那个例子一样了。

从上面可以看到，如果数组元素的类型不定，最好的办法还是使用递归实现。在前端面试中，递归这种方式是完全没有问题的，但另外两种方式是存在一定缺陷的。