如何通过数组实现高效的数组展开逻辑并实战将多维变量扁平化

在JavaScript开发中，多维嵌套数组是非常常见的数据结构，例如接口返回的多层级分类数据、动态生成的多维菜单配置等，都需要将嵌套结构转换为一维数组方便后续遍历、筛选、统计等操作，这就是数组展开与扁平化的核心需求。数组展开的本质是遍历嵌套数组的每一个元素，如果元素是数组则继续展开，直到所有元素都是非数组类型，最终拼接成新的一维数组。

原生flat方法实现数组展开

ES2019引入了原生的Array.prototype.flat方法，专门用于数组扁平化操作，该方法接受一个可选的深度参数，默认值为1，表示展开一层嵌套，传入Infinity可以展开任意深度的嵌套数组。

// 测试用的多维数组
const multiDimensionArr = [1, [2, [3, [4, 5]], 6], 7, [8, 9]];

// 展开一层，深度为1
const flatOneLevel = multiDimensionArr.flat(1);
console.log(flatOneLevel); // 输出：[1, 2, [3, [4, 5]], 6, 7, 8, 9]

// 展开任意深度，使用Infinity参数
const flatAll = multiDimensionArr.flat(Infinity);
console.log(flatAll); // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9]

原生flat方法的优势是语法简洁，无需手动编写遍历逻辑，浏览器兼容性方面现代浏览器都支持，如果需要兼容旧环境可以搭配polyfill使用。

递归遍历实现自定义展开逻辑

如果需要兼容不支持flat方法的环境，或者需要自定义展开规则（例如过滤特定值、转换元素类型），可以使用递归方式实现数组展开。核心思路是遍历数组每个元素，判断元素是否为数组，如果是则递归调用展开函数，否则将元素加入结果数组。

/**
 * 递归实现数组扁平化
 * @param {Array} arr 待展开的多维数组
 * @returns {Array} 扁平化后的一维数组
 */
function flattenByRecursion(arr) {
    const result = [];
    for (let i = 0; i < arr.length; i++) {
        const item = arr[i];
        // 判断当前元素是否为数组，这里使用Array.isArray更准确
        if (Array.isArray(item)) {
            // 递归展开子数组，将结果拼接到当前结果数组
            result.push(...flattenByRecursion(item));
        } else {
            result.push(item);
        }
    }
    return result;
}

// 测试递归方法
const testArr = ['a', ['b', ['c', 'd']], 'e', [['f']]];
const recursionResult = flattenByRecursion(testArr);
console.log(recursionResult); // 输出：['a', 'b', 'c', 'd', 'e', 'f']

递归实现的灵活性很高，可以在遍历过程中添加自定义逻辑，例如跳过空值、转换元素类型等，缺点是如果嵌套层级过深可能会出现栈溢出问题。

reduce方法实现扁平化

利用数组的reduce方法也可以实现高效的数组展开，reduce的累加器特性非常适合拼接数组结果，实现逻辑比递归更简洁，也不需要额外定义结果变量。

/**
 * 使用reduce方法实现数组扁平化
 * @param {Array} arr 待展开的多维数组
 * @returns {Array} 扁平化后的一维数组
 */
function flattenByReduce(arr) {
    return arr.reduce((acc, cur) => {
        // 如果当前元素是数组，递归展开后拼接到累加器，否则直接拼接当前元素
        return acc.concat(Array.isArray(cur) ? flattenByReduce(cur) : cur);
    }, []);
}

// 测试reduce方法
const reduceTestArr = [10, [20, [30, 40]], 50, [60]];
const reduceResult = flattenByReduce(reduceTestArr);
console.log(reduceResult); // 输出：[10, 20, 30, 40, 50, 60]

reduce实现的方式代码量少，逻辑清晰，同样支持自定义展开规则，性能和递归方式接近，是手写扁平化逻辑的常用方案。

实战：多维变量扁平化场景示例

实际开发中，多维变量往往不是纯数组结构，可能混合对象、其他数据类型，例如下面这种常见的分类数据结构，需要将所有的子分类id提取出来组成一维数组。

// 实战场景的多维分类数据
const categoryData = [
    {
        id: 1,
        name: '前端开发',
        children: [
            { id: 11, name: 'HTML', children: [{ id: 111, name: '语义化标签' }] },
            { id: 12, name: 'CSS', children: [{ id: 121, name: 'Flex布局' }, { id: 122, name: 'Grid布局' }] }
        ]
    },
    {
        id: 2,
        name: '后端开发',
        children: [
            { id: 21, name: 'Node.js', children: [{ id: 211, name: 'Express框架' }] },
            { id: 22, name: 'Java', children: [{ id: 221, name: 'Spring Boot' }] }
        ]
    }
];

/**
 * 提取多维分类数据中的所有id，实现扁平化
 * @param {Array} data 分类数据数组
 * @returns {Array} 所有id组成的一维数组
 */
function extractCategoryIds(data) {
    const ids = [];
    function traverse(list) {
        list.forEach(item => {
            ids.push(item.id);
            // 如果当前项有children属性且是数组，继续遍历
            if (Array.isArray(item.children) && item.children.length > 0) {
                traverse(item.children);
            }
        });
    }
    traverse(data);
    return ids;
}

const allIds = extractCategoryIds(categoryData);
console.log(allIds); // 输出：[1, 11, 111, 12, 121, 122, 2, 21, 211, 22, 221]

这种场景下原生flat方法无法直接处理，因为数据结构是对象数组，需要自定义遍历规则，递归遍历的方式就非常适用，只需要调整判断逻辑适配数据结构即可。

不同方案的性能与适用场景对比

不同的数组展开方案有各自的适用场景，下面是常见方案的对比：

在实际开发中，优先选择原生flat方法，如果需要兼容旧环境或者自定义规则，再选择递归或reduce方案，对于极深嵌套的场景，可以考虑将递归改为迭代遍历避免栈溢出问题。

数组展开多维数组扁平化flat方法递归展开reduce方法修改时间：2026-06-15 18:06:21