JavaScript数组扁平化的四种实现方式详解

作者:纸飞机

时间:2026-10-25

浏览:196

本文详细解析JavaScript中将多层嵌套数组转换为一维数组的四种常用方法。涵盖常规递归、reduce累加器、ES6扩展运算符以及toString与split组合技巧,通过具体代码示例对比各方案的实现逻辑与代码简洁度,帮助开发者根据实际需求选择最优方案。

文章目录

数组扁平化的核心目标是将一个可能包含任意层级嵌套的数组结构,转换为仅包含最底层元素的一维数组。

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

接下来将介绍多种实现 flatten 函数的具体方案。

1. 常规递归法

var a = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    let newArray = []
    for (let i of arr) {
        if (i.constructor === Array) {
            newArray = newArray.concat(flatten(i))
        } else {
            newArray.push(i)
        }
    }
    return newArray
}
console.log(flatten(a)); // [1, 2, 3, 4,5]

该方法的核心逻辑在于遍历过程中结合递归操作。当遍历发现当前元素仍为数组时,便对该元素执行递归调用,并通过 concat 方法将递归返回的结果拼接至最终结果数组 result 中,从而完成扁平化处理。

2. reduce方法

var a = [1, [2, [3, 4, 5]]];
function flatten(arr) {
    return arr.reduce((pre,next) => {
        return pre.concat(next instanceof Array ? flatten(next) : next)
    },[])
}
console.log(flatten(a)); //[ 1, 2, 3, 4, 5 ]

在此方案中,reduce 的第一个参数用于累积并返回最终结果。其基本思路与前一种递归方法一致,但借助 reduce 函数使得代码结构更为紧凑,同样能够有效解决数组扁平化问题。

3. 扩展运算符实现

// 方法3
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
console.log(flatten(arr)); //  [1, 2, 3, 4,5]

首先利用数组的 some 方法筛选出仍包含数组结构的元素,随后执行 concat 操作。借助 ES6 的展开运算符(spread operator),将这些元素拼接回原数组,循环直至所有嵌套层级被展开,最终返回处理后的原数组。

4. split和toString共同处理

// 方法4
var arr = [1, [2, [3, 4]]];
function flatten(arr) {
    return arr.toString().split(',');
}
console.log(flatten(arr)); //  [1, 2, 3, 4]

数组对象默认具备 toString 方法,可直接将数组转换为以逗号分隔的字符串。随后使用 split 方法将该字符串重新分割并转换为数组形式,以此实现扁平化。

本文关于JavaScript数组实现扁平化四种方法的介绍到此结束,更多相关JavaScript数组扁平化内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章