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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 爬虫原理及应用

    https://www.cnblogs.com/luchun666/p/9394149.html链接:link…

  • spring dubbo集成(@autowired和构造器注入)

    一:运行spring容器的方式有三种1:使用tomcat、jetty等servlet容器运行2:自己写一个Main方法运行3:使用dubbo框架提供的Main方法运行前面两种有一定的局限性,很多缺点,具体就不一一列举,有兴趣的同学可以研究一下,今天就给大家讲如何实现第三种方式二:Main配置详讲spring路径存放路径 按照dubbo官网解说,要使得Main能正确的启

  • WebIDE的安装「建议收藏」

    WebIDE的安装「建议收藏」CreatedbyJerryWang,lastmodifiedonJun02,2015https://store.sap.com/下载安装文件:通过注册时维护的mail地址获得下载link:确保JDK或者JRE至少在1.7以上:2.所有下载的安装文件置于SAPWebIDEfolder下,hierarchy如下图所示:使用如下命令行进行安装:通过修改…

    2022年10月18日
  • plsqldev8.0下载和注册码「建议收藏」

    plsqldev8.0下载和注册码「建议收藏」[b]关键词:PL/SQL,下载,plsqldev,注册码,plsqldev711,汉化文件[/b]PL/SQLDeveloper是一种集成的开发环境,专门用于开发、测试、调试和优化OraclePL/SQL存储程序单元,比如触发器等。PL/SQLDeveloper功能十分全面,大大缩短了程序员的开发周期。[url]http://www.kutoku.info/software…

  • Java与C++的优劣:谁更胜一筹?零基础实习学C++还是java呢?

    Java与C++的优劣:谁更胜一筹?零基础实习学C++还是java呢?很多人都说会C++就能会快掌握Jave。C++是不好学,但是我告诉你java也不好学。C++难是难在语言本身,java难是难在各种框架和库。你单纯学个java语法,你什么玩意也做不了,java的东西都在java之外。上图仅供娱乐,不过今天我们主要探讨Java与C++间的优劣。基础介绍Java与C++都拥有相当长的历史,且语法相当类似,并被众多业界巨头所采用。事实上,Java本来就是从C++衍生出来的。不过尽管相似,二者之间仍然存在显著区别。很多人都说会C++就能会快掌…

  • JAVA中运算符的详讲

    JAVA中运算符的详讲

发表回复

您的电子邮箱地址不会被公开。

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