【JavaScript】flat()及其相关方法详解

在日常开发中，处理多维数组是一项非常常见的任务。ES6 引入的 flat() 方法让我们能够方便地“拍平”多维数组，从而简化数据操作流程。本文将从 flat() 的基本用法入手，深入解析其相关的实现和扩展，并讨论一些实际应用场景。

一、flat() 方法概述

1. 方法介绍

flat() 是 JavaScript Array 对象提供的一种方法，用于将嵌套数组“拍平”成指定深度的单层数组。它的出现极大地方便了开发者处理复杂的多维数组。

语法：

arr.flat([depth])

参数：

• depth（可选）：表示要拍平的深度。默认为 1。

返回值：

• 一个新的数组，包含了拍平后的元素。

2. 示例演示

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

从上述代码可以看出，flat() 可以通过调整深度参数灵活控制拍平的层数。如果不确定数组的嵌套深度，可以使用 Infinity 来完全拍平数组。

---

二、flatMap() 方法

1. 方法介绍

flatMap() 是 flat() 的一个衍生方法，它结合了 map() 和 flat() 的功能。使用时，先对数组中的每个元素执行映射函数，然后将结果数组拍平一层。

语法：

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

参数：

• callback：一个函数，用于生成新的数组元素。
• thisArg：可选，执行 callback 函数时的 this 值。

2. 示例演示

const arr = [1, 2, 3];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

相比于先使用 map() 再使用 flat() 的方法，flatMap() 更加简洁高效，适合处理简单的映射和拍平操作。

---

三、flat() 方法的内部实现

虽然现代浏览器已经支持 flat()，但理解其内部逻辑有助于我们在不支持此方法的环境中实现兼容性。

以下是一个简单的 flat() polyfill：

function customFlat(array, depth = 1) {
    if (depth < 1) return array.slice();
    return array.reduce((acc, val) => 
        acc.concat(Array.isArray(val) ? customFlat(val, depth - 1) : val), []);
}

// 测试
const arr = [1, [2, [3, [4]]]];
console.log(customFlat(arr, 2)); // [1, 2, 3, [4]]

核心逻辑是：

1. 使用递归处理嵌套数组。
2. 利用 reduce() 方法累积结果。
3. 检查当前元素是否为数组，决定是否递归调用。

---

四、实际应用场景

1. 多维数组处理

在处理多维数据（如 API 返回的嵌套 JSON 数据）时，flat() 可以快速将其转化为单层数组，便于操作。

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

2. 数据去重和排序

结合 flat() 和其他数组方法，可以轻松实现数据去重和排序。

const data = [1, [2, 2], [3, [4, 1]]];
const result = [...new Set(data.flat(Infinity))].sort((a, b) => a - b);
console.log(result); // [1, 2, 3, 4]

3. 复杂数据的映射与转换

flatMap() 在需要对数据进行映射操作时非常有用，比如处理分词和统计数据。

const sentences = ["hello world", "flat map"];
const words = sentences.flatMap(sentence => sentence.split(" "));
console.log(words); // ["hello", "world", "flat", "map"]

---

五、flat() 的注意事项

1. 不改变原数组

flat() 方法返回一个新数组，不会对原数组造成任何影响。

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

2. 空项的处理

flat() 会跳过数组中的空项（sparse items），并将其直接忽略。

const arr = [1, , 3];
console.log(arr.flat()); // [1, 3]

3. 性能考虑

在处理极大规模的嵌套数组时，flat() 的性能可能成为瓶颈。建议根据实际需求选择合适的深度，避免过度拍平。

推荐：

• JavaScript
• react
• vue

---