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


相关推荐

  • 什么是java构造函数_什么是java构造函数

    什么是java构造函数_什么是java构造函数构造函数是面向对象中的一员,构造函数可以叫做构造器,它的函数名与类名相同,不用定义返回值类型,也没有具体的返回值。构造函数是在构建创造时对象时调用函数,作用是可以给对象进行初始化,创建对象都必须要通过构造函数初始化。一个类中如果没有定义过构造函数,那么该类会有一个默认的空参数构造函数。如果在类中定义了指定的构造函数,那么该类中的默认构造函数就没有了。我们人出生的时候,有些人一出生之后再起名字的,但…

    2022年7月8日
    22
  • 在Repeater中嵌套使用Repeater

    在Repeater中嵌套使用Repeater在一般的网站中浏览类别的用户控件通常都位于大多数ASP.NET页的左边,它使用户能够按类别快速的查找产品。最近遇到一个客户,因为在他网站上展示的产品并不多,所以要求在原有类别浏览的基础上将产品也加

    2022年7月1日
    21
  • acwing-1170. 排队布局(差分约束)[通俗易懂]

    acwing-1170. 排队布局(差分约束)[通俗易懂]当排队等候喂食时,奶牛喜欢和它们的朋友站得靠近些。农夫约翰有 N 头奶牛,编号从 1 到 N,沿一条直线站着等候喂食。奶牛排在队伍中的顺序和它们的编号是相同的。因为奶牛相当苗条,所以可能有两头或者更多奶牛站在同一位置上。如果我们想象奶牛是站在一条数轴上的话,允许有两头或更多奶牛拥有相同的横坐标。一些奶牛相互间存有好感,它们希望两者之间的距离不超过一个给定的数 L。另一方面,一些奶牛相互间非常反感,它们希望两者间的距离不小于一个给定的数 D。给出 ML 条关于两头奶牛间有好感的描述,再给出 MD

    2022年8月9日
    9
  • 蓝桥杯单片机必备知识—–(8)NE555测频

    蓝桥杯单片机必备知识—–(8)NE555测频

    2021年4月13日
    262
  • 纳兰诗词

    纳兰诗词“空负凌云万丈志,一生襟抱未曾开”,情雅成诗,爱淡成词,如果没有潋滟坦白的心思,是无法走进古人留在书册中的幻境的。凡心所向,皆是虚妄。——一个人吃饭,旅行,到处走走停停;也一个人看书,弹琴,自己对话谈心。自我收敛,内心沉静,是我希望获得的心境,对纳兰容若不熟的人,恐怕会比较熟悉另外一个名字,纳兰明珠。如果我再说一句《七剑下天山》,恐十白你已经在点头微笑了:你说的是这个人。纳兰容若诞于清顺治

    2022年5月4日
    44
  • Spidermonkey_gomonkey

    Spidermonkey_gomonkey参考如下:最近升级了系统到MacOSX10.10并且更新了XCode6.1和iOS8.1之前app用到的libmp3lame.a静态库,也要支持64位的模拟器(x86_64)和64位的真机(arm64)指令集。需要重新编译查阅了下资料,按照如下步骤,并做了些注释和改动1.http://sourceforge.net/projects/lame/files/lame/3.9…

    2022年10月16日
    3

发表回复

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

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