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


相关推荐

  • 七个免费邮件服务器软件「建议收藏」

    目前邮件是企业的工作要件之一,而很多企事业是没有这方面的大预算,所以好的免费邮箱服务器还是很必要的.以下就推荐几个不错的.(比较看好hmailserver|extmail)hMailServerhmailserver是一个免费的win下的邮件服务器,类似于国内的winmail的管理界面只是没有中文不过可以找到网上的中文包补丁,支持SMTP…

    2022年4月6日
    72
  • 苹果系统自带的计算机怎么恢复出厂设置,苹果电脑MacBook如何将系统恢复出厂设置…

    苹果系统自带的计算机怎么恢复出厂设置,苹果电脑MacBook如何将系统恢复出厂设置…‍有时候在使用电脑的过程中会出现问题,需要进行恢复出厂设置的操作。如果使用的是苹果电脑MacBookAir,那么具体应该怎么操作呢?大家不妨参考接下来介绍的具体方法。1、首先开启Mac的电源开关,同时按住command+R键进入恢复模式,就可以看到MacOSX实用工具;2、选择磁盘工具–然后选择上面一般是MacintoshHD这个选项,右侧选择抹掉,意思就是删除所有内容重新安装新的系统;…

    2022年6月29日
    38
  • ps磨皮插件portraiture「建议收藏」

    ps磨皮插件portraiture「建议收藏」相信大家在使用photoshop的时候经常会配合插件来进行修图,而ps磨皮插件portraiture也是大多数人的必备插件,因为当你需要处理人像照片的话,那么磨皮将是必不可少的一个步骤,而该插件正是一个功能强大的磨皮滤镜插件,不仅为用户们提供了强大的磨皮效果,还使用起来十分的简单,无需繁琐的使用步骤,只需要简简单单的设置下磨皮参数再随意的调整下即可快速的帮助用户进行磨皮处理啦,非常方便,所以如果你要用ps的话怎么可以缺少这款ps磨皮插件呢?另外,使用这款插件的时候,你会发现它直接为用户们提供了一个单独的面板

    2022年7月22日
    24
  • 7-1 正整数A+B > 题的目标很简单,就是求两个正整数A和B的和,其中A和B都在区间[1,1000]。稍微有点麻烦的是,输入并不保证是两个正整数。「建议收藏」

    7-1 正整数A+B > 题的目标很简单,就是求两个正整数A和B的和,其中A和B都在区间[1,1000]。稍微有点麻烦的是,输入并不保证是两个正整数。「建议收藏」7-1 正整数A+B题的目标很简单,就是求两个正整数A和B的和,其中A和B都在区间[1,1000]。稍微有点麻烦的是,输入并不保证是两个正整数。输入格式:输入在一行给出A和B,其间以空格分开。问题是A和B不一定是满足要求的正整数,有时候可能是超出范围的数字、负数、带小数点的实数、甚至是一堆乱码。注意:我们把输入中出现的第1个空格认为是A和B的分隔。题目保证至少存在一个空格,并且B不是一个…

    2022年8月18日
    8
  • 数据库ER图该怎么画

    数据库ER图该怎么画什么是ER图实体关系图,通过一张ER图,能够快速的了解数据库层面的表结构设计。目前做企业级应用系统,花费了大量的时间在数据库表结构的设计上,所以打算从源头梳理一下怎么样才能画好ER图,画好图是第一步,在这个过程中怎么样做好设计,然后来保证业务系统的功能实现以及扩展性的要求。 ER图的核心要素是什么实体:客观存在并可以相互区别的事物属性:实体所具有的一个属性关系:实…

    2022年6月21日
    106
  • 2021.5.1idea激活码(最新序列号破解)

    2021.5.1idea激活码(最新序列号破解),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月20日
    57

发表回复

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

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