JS数组打平的三种方法

关注

最新推荐文章于 2026-01-14 22:36:05 发布 · 3k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

WPS JS宏编程教程（从基础到进阶）-- 第五部分：JS数组与WPS结合应用本章深入探讨了 JavaScript 数组在 WPS 表格自动化中的高级应用，旨在帮助读者掌握数组操作的核心技巧，轻松处理复杂数据并提升工作效率。通过详细的代码示例和逐行解析，本章内容涵盖了数组的归并、打平、合并、切片、排序以及综合应用等多个方面。阅读详情

文章目录

1.用迭代或者递归打平数组
2.Array.prototype.flat(depth)打平数组
3.Array.prototype.flatMap()打平数组

1.用迭代或者递归打平数组

ECMAScript在Array.prototype上增加了：两个方法flat(),flatMap()。
在没有这两个方法之前，打平数组就要用迭代或者递归的方法
如下示例：

function flatten(sourceArray, flattenedArray = []){
    for (const element of sourceArray) {
        if (Array.isArray(element)) {
            flatten(element, flattenedArray);
        } else {
            flattenedArray.push(element);
        }
    }
    return flattenedArray;
}

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

但可选择打平到第几级就更好了（通过添加参数depth改写）

function flatten(sourceArray, depth, flattenedArray = []){
    for (const element of sourceArray) {
        if (Array.isArray(element) && depth > 0) {
            flatten(element, depth -1, flattenedArray);
        } else {
            flattenedArray.push(element);
        }
    }
    return flattenedArray;
}

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

2.Array.prototype.flat(depth)打平数组

为了更规范，增加的Array.prototype.flat(depth)就可以实现上述功能

Array.prototype.flat(depth)接受一个depth参数，返回一个要打平Array实例的浅复制本。

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

3.Array.prototype.flatMap()打平数组

Array.prototype.flatMap()打平数组会执行一次映射操作，比Array.prototype.flat(depth)高效，浏览器之用执行一次遍历.
flatMap()的函数签名与map相同。例子如下：

const arr = [[1], [3], [5]];
console.log(arr.map([x] => [x, x+1]));
//[[1, 2], [3, 4], [5, 6]]

console.log(arr.flatMap([x] => [x, x+1]));
//[0, 1, 2, 3, [4, 5], 6]