JS数组扁平化_扁平化js

JS数组扁平化_扁平化jsJS 扁平化 (flatten) 数组

大家好,又见面了,我是你们的朋友全栈君。

前言

数组是 JS 中使用频率仅次于对象的数据结构,官方提供了众多的 API,谈谈如何扁平化(flatten)数组。

数组的扁平化,是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组

flat

flat(depth) 方法会递归到指定深度将所有子数组连接,并返回一个新数组, depth指定嵌套数组中的结构深度,默认值为1,不管多少层则可以用Infinity关键字作为参数

[1, 2, [3]].flat(1) // [1, 2, 3]

[1, 2, [3, [4]]].flat(2) // [1, 2, 3, 4]

[1, 2, [3, [4, [5]]]].flat(Infinity) // [1, 2, 3, 4, 5]
复制代码

flat()有兼容性问题, 不建议使用

reduce

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

// es6
const flatten = arr =>
  arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);


flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]
复制代码

toString

只适于数组的元素都是数字

function flatten(arr) {
  return arr.toString().split(",").map(item => +item);
};


flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]
复制代码

[].concat(…arr)

function flatten(arr) {
  return !Array.isArray(arr) ? arr : [].concat.apply([], arr.map(flatten));
}


flatten([1,[2,3],4,[[5,6],7]])  // [1, 2, 3, 4, 5, 6, 7]
复制代码

generator

function* flatten(arr) {
  if (!Array.isArray(arr)) yield arr;
  else for (let el of arr) yield* flatten(el);
}

let flattened = [...flatten([1,[2,[3,[4]]]])];  // [1, 2, 3, 4]
复制代码

字符串过滤

将输入数组转换为字符串并删除所有括号([])并将输出解析为数组

const flatten = arr => JSON.parse(`[${ 
     JSON.stringify(arr).replace(/\[|]/g,'')}]`);
复制代码

undercore or lodash 库

使用undercore库或者lodash的中_.flatten函数,具体用法查阅API文档

_.flatten([1, [2], [3, [[4]]]]);
=> [1, 2, 3, 4];
复制代码

参考文献

实现扁平化(flatten)数组的方法还有很多种,可以参考一下文献

  1. javascript-flattening-an-array-of-arrays-of-objects

  2. merge-flatten-an-array-of-arrays-in-javascript

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107000.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • mysql查询语句执行过程及运行原理命令_MySQL常用命令

    mysql查询语句执行过程及运行原理命令_MySQL常用命令Mysql查询语句执行原理数据库查询语句如何执行?DML语句首先进行语法分析,对使用sql表示的查询进行语法分析,生成查询语法分析树。 语义检查:检查sql中所涉及的对象以及是否在数据库中存在,用户是否具有操作权限等 视图转换:将语法分析树转换成关系代数表达式,称为逻辑查询计划; 查询优化:在选择逻辑查询计划时,会有多个不同的表达式,选择最佳的逻辑查询计划; 代码生成:必须将逻辑查…

    2025年6月9日
    2
  • 静态内部类和内部类的区别_内部类不能定义为抽象类

    静态内部类和内部类的区别_内部类不能定义为抽象类今天稍微复习一下静态内部类和内部类的相关知识,平常很少用静态内部类静态内部类,不能访问外部类的非静态成员静态内部类不需要创建外部类的对象就可访问(外部类名.内部类比如newMyMain.Person().display();就创建了静态内部类对象)静态内部类可以有public、protected、默认的、private等多种类型(这个功能我倒是从来没听说,通过实验的确ok…

    2022年10月11日
    1
  • mapboxgl中文文档_globalmapper输出

    mapboxgl中文文档_globalmapper输出原文链接:https://blog.csdn.net/supermapsupport/article/details/78343391作者:MR.MapboxGLJS是一个JavaScript

    2022年8月5日
    11
  • Windows Azure服务购买,收费,使用注意事项及学习资料推荐

    Windows Azure服务购买,收费,使用注意事项及学习资料推荐近来,QQ群里不少朋友比较关注WindowsAzure,然而又仿佛不知道怎么入手。怎么开始开发,部署这些是技术细节,相信难不倒大家,但是如何购买服务以及收费这些东西确实模模糊糊的。这一方面是因为中文资料太少,WindowsAzure的入口网站也比较模糊,很多人找不到,更重要的是微软还没有正式对大陆开放。据说,曾经微软准备在大陆建一个数据中心,由于某些原因最后选择…

    2022年10月5日
    1
  • 模糊数学基础_模糊数学及其应用

    模糊数学基础_模糊数学及其应用模糊数学基础文章目录模糊数学基础1.前言2.区分随机性和模糊性3.模糊数学的基本概念1.模糊集和隶属函数2.模糊集的表示3.确定隶属函数的方法4.与传统集合论的区分4.模糊数学的基本运算1.模糊集的运算2.模糊关系与运算1.关系与模糊关系2.模糊关系矩阵的运算3.python程序求解法1.前言1965年美国著名控制论专家发表了FuzzySets从而开创了模糊数学的基本概念用“隶属度”和“隶属函数”来描述差异的中间过渡,处理和刻画模糊现象.处理现实现象的数学模型可以分为三

    2025年8月4日
    4
  • rabbitmq集群搭建「建议收藏」

    rabbitmq集群搭建「建议收藏」一、基础安装前提:三个节点都主机映射,关防火墙网络,配好yum(后边出错,主机名和映射要对应)1.安装(三个节点)2.mq1启动rabbitmq服务查看状态3.配置界面访问4.使用界面查看(端口15672,默认帐户和密码guest)二、配置rabbitmq集群服务1.先构建erlang集群①复制cookie认证②配置节点加入集群(顺序很重要,解决报错看)123的顺序停止321的顺序启动rabbitmq服务

    2025年10月25日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号