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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 钱包地址 私钥_eth私钥就是收款地址吗

    钱包地址 私钥_eth私钥就是收款地址吗网上看到一个对比,很形象,可以用来加强理解:地址=银行卡卡号密码=银行卡密码keystore=银行卡助记词=私钥=银行卡+银行卡密码Keystore+密码=银

    2022年8月1日
    14
  • pycharm最新激活码2021_在线激活「建议收藏」

    (pycharm最新激活码2021)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html65MJGLILER-eyJsaWN…

    2022年3月22日
    118
  • 什么是ER图?数据库ER图基础概念整理

    什么是ER图?数据库ER图基础概念整理前置知识概述:数据模型的基本概念模型就是对现实世界特征的模拟和抽象,数据模型是对现实世界数据特征的抽象。对于具体的模型人们并不陌生,如航模飞机、地图和建筑设计沙盘等都是具体的模型。最常用的数据模型分为概念数据模型和基本数据模型。1)概念数据模型概念数据模型也称为信息模型,是按用户的观点对数据和信息建模,是现实世界到信息世界的第一层抽象,强调其语义表达功能,易于用户理解,是用户和数据库设计人员交流的语言,主要用于数据库设计。这类模型中最著名的是实体联系模型,简称E-R模型。2)基本数据

    2022年6月21日
    43
  • Apache配置+php配置

    Apache配置+php配置一、apache配置首先下载apache安装包,下载地址:http://httpd.apache.org/download.cgi我的是win7系统,所以下载windows的安装包,点击我圈出的地方然后点击ApacheHaus根据自己的电脑选择64位还是32的安装包,进行下载然后解压文件,我解压到E:\Apache\Apache24然后打开文件夹找到conf文件夹…

    2022年7月14日
    17
  • 打印xls注意事项

    打印xls注意事项

    2021年9月9日
    55
  • 明日之后js免费脚本_超强免杀工具

    明日之后js免费脚本_超强免杀工具 js脚本免杀工具免杀经验以及简单的分析文章作者:虫虫信息来源:邪恶八进制信息安全团队(www.eviloctal.com)本文所做的实验是以ah.js(冰狐的一个变种,附件中名为”病毒样本.txt”)为病毒样本进行的,其他js恶意代码没有测试。由于卡巴斯基对js的查杀力度比较大,再者我本机就安装了卡巴斯基,所以对其有少量额外的分析。菜鸟作品,难登大雅之堂,高手多多指教!^-^常规的思路就是将

    2022年8月20日
    27

发表回复

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

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