当前位置：首页 > article >正文

JavaScript实现一个函数，将数组扁平化（flatten），即把多维数组转为一维数组。

article 2025/3/22 16:17:17

大白话实现一个函数，将数组扁平化（flatten），即把多维数组转为一维数组。

思路

实现数组扁平化的基本思路是遍历数组中的每个元素，如果元素是数组，就递归地将其扁平化并添加到结果数组中；如果元素不是数组，就直接添加到结果数组中。

代码示例

function flatten(arr) {
    // 创建一个空数组，用于存储扁平化后的结果
    let flattened = [];
    // 遍历输入数组中的每个元素
    for (let i = 0; i < arr.length; i++) {
        // 检查当前元素是否为数组
        if (Array.isArray(arr[i])) {
            // 如果当前元素是数组，递归调用 flatten 函数对其进行扁平化
            // 并将扁平化后的结果添加到 flattened 数组中
            flattened = flattened.concat(flatten(arr[i]));
        } else {
            // 如果当前元素不是数组，直接将其添加到 flattened 数组中
            flattened.push(arr[i]);
        }
    }
    // 返回扁平化后的数组
    return flattened;
}

// 测试示例
const multiDimensionalArray = [1, [2, [3, 4], 5], 6, [7, 8]];
const flattenedArray = flatten(multiDimensionalArray);
console.log(flattenedArray);

代码解释

函数定义：
- function flatten(arr)：定义了一个名为 flatten 的函数，它接受一个数组 arr 作为参数。
初始化结果数组：
- let flattened = [];：创建一个空数组 flattened，用于存储扁平化后的结果。
遍历数组：
- for (let i = 0; i < arr.length; i++)：使用 for 循环遍历输入数组 arr 中的每个元素。
检查元素类型：
- if (Array.isArray(arr[i]))：使用 Array.isArray 方法检查当前元素是否为数组。
递归处理数组元素：
- flattened = flattened.concat(flatten(arr[i]));：如果当前元素是数组，递归调用 flatten 函数对其进行扁平化，并使用 concat 方法将扁平化后的结果添加到 flattened 数组中。
处理非数组元素：
- flattened.push(arr[i]);：如果当前元素不是数组，直接使用 push 方法将其添加到 flattened 数组中。
返回结果：
- return flattened;：返回扁平化后的数组。

除了递归，还有其他方法可以实现数组扁平化吗？

除了递归方法，还有几种不同的方式可以实现数组扁平化，下面为你详细介绍：

方法一：使用 `reduce` 和 `concat` 方法

reduce 方法可以对数组中的每个元素执行一个提供的函数，并将其结果汇总为单个值。结合 concat 方法可以有效实现数组扁平化。

function flatten(arr) {
    // 使用 reduce 方法遍历数组
    return arr.reduce((acc, val) => {
        // 如果当前元素是数组，使用 concat 方法将其扁平化后添加到累加器中
        // 如果不是数组，直接添加到累加器中
        return acc.concat(Array.isArray(val)? flatten(val) : val);
    }, []);
}

// 测试示例
const multiDimensionalArray = [1, [2, [3, 4], 5], 6, [7, 8]];
const flattenedArray = flatten(multiDimensionalArray);
console.log(flattenedArray);

此代码中，reduce 方法遍历数组的每个元素，若元素是数组，就递归调用 flatten 函数将其扁平化，再用 concat 方法添加到累加器；若不是数组则直接添加到累加器。

方法二：使用 `flat` 方法

flat 是 JavaScript 数组自带的方法，能直接实现数组扁平化。可以指定扁平化的深度，若要完全扁平化，可传入 Infinity。

const multiDimensionalArray = [1, [2, [3, 4], 5], 6, [7, 8]];
// 使用 flat 方法并传入 Infinity 实现完全扁平化
const flattenedArray = multiDimensionalArray.flat(Infinity);
console.log(flattenedArray);

这种方法简洁直观，直接调用 flat 方法并传入 Infinity 就能把多维数组完全扁平化为一维数组。

方法三：使用 `while` 循环和 `some` 方法

通过 some 方法检查数组中是否还有嵌套数组，若有就使用 concat 方法展开，借助 while 循环持续处理，直至没有嵌套数组。

function flatten(arr) {
    let isNested = true;
    // 当数组中还有嵌套数组时继续循环
    while (isNested) {
        isNested = false;
        let newArr = [];
        // 遍历数组
        for (let i = 0; i < arr.length; i++) {
            if (Array.isArray(arr[i])) {
                // 如果是数组，将其元素添加到新数组中
                newArr = newArr.concat(arr[i]);
                isNested = true;
            } else {
                // 不是数组则直接添加到新数组
                newArr.push(arr[i]);
            }
        }
        arr = newArr;
    }
    return arr;
}

// 测试示例
const multiDimensionalArray = [1, [2, [3, 4], 5], 6, [7, 8]];
const flattenedArray = flatten(multiDimensionalArray);
console.log(flattenedArray);

此代码利用 while 循环和 some 方法不断检查并展开嵌套数组，直到数组中不存在嵌套数组，最终得到一维数组。

哪种方法实现数组扁平化的效率更高？

递归方法

function flatten(arr) {
    let flattened = [];
    for (let i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            flattened = flattened.concat(flatten(arr[i]));
        } else {
            flattened.push(arr[i]);
        }
    }
    return flattened;
}

优点：代码逻辑直观，易于理解和实现，适合处理嵌套层级不深、数据规模较小的数组。
缺点：当数组嵌套层级很深时，递归调用会导致大量的函数调用栈，可能引发栈溢出错误，而且函数调用的开销也会使性能下降。

使用 `reduce` 和 `concat` 方法

function flatten(arr) {
    return arr.reduce((acc, val) => {
        return acc.concat(Array.isArray(val)? flatten(val) : val);
    }, []);
}

优点：代码简洁，同样基于递归思想，借助 reduce 方法实现数组遍历和结果累加，处理逻辑清晰。
缺点：和递归方法一样，在处理深度嵌套数组时，由于递归调用过多，会有栈溢出风险，性能也会受影响。

使用 `flat` 方法

const flattenedArray = multiDimensionalArray.flat(Infinity);

优点：这是 JavaScript 原生提供的方法，由浏览器引擎底层实现，经过高度优化，性能通常较好。使用 Infinity 作为参数能轻松处理任意嵌套深度的数组，代码简洁高效。
缺点：该方法是 ES2019 引入的新特性，对于一些较旧的浏览器版本可能不支持，需要做兼容性处理。

使用 `while` 循环和 `some` 方法

function flatten(arr) {
    let isNested = true;
    while (isNested) {
        isNested = false;
        let newArr = [];
        for (let i = 0; i < arr.length; i++) {
            if (Array.isArray(arr[i])) {
                newArr = newArr.concat(arr[i]);
                isNested = true;
            } else {
                newArr.push(arr[i]);
            }
        }
        arr = newArr;
    }
    return arr;
}