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


相关推荐

  • springEL表达式_第二强度理论表达式

    springEL表达式_第二强度理论表达式本文带你玩转spring中强大的spel表达式!Spel概述Spring表达式语言全称为“SpringExpressionLanguage”,缩写为“SpEL”,类似于Struts2…

    2022年9月11日
    0
  • mysql日期格式转换_MySQL日期格式转换

    mysql日期格式转换_MySQL日期格式转换DATE_FORMAT(date,format):根据参数对date进行格式化。1234SELECTDATE_FORMAT(‘2016-01-1622:23:00′,’%W%M%Y’)SELECTDATE_FORMAT(‘2016-01-1622:23:00′,’%D%y%a%d%m%b%j’)SELECTDATE_FORMAT(‘2016-01-1622:23:00’…

    2022年6月15日
    24
  • 现代OpenGL教程 01 – 入门指南

    文章转载自:http://huangwei.pro/2015-05/modern-opengl1/以下是我学习opengl得到的启示最多的一篇文章,我强烈地建议大家去读一下这位大神的文章!译序早前学OpenGL的时候还是1.x版本,用的都是glVertex,glNormal等固定管线API。后来工作需要接触DirectX9,shader也只是可选项而已,跟固定管线一起混用着

    2022年4月6日
    43
  • java动态代理中的invoke方法是如何被自动调用的「建议收藏」

    java动态代理中的invoke方法是如何被自动调用的「建议收藏」Java中动态代理的实现,关键就是这两个东西:Proxy、InvocationHandler,下面从InvocationHandler接口中的invoke方法入手,简单说明一下Java如何实现动态代理的。        首先,invoke方法的完整形式如下: Java代码  public Object invoke(Object proxy, Method m

    2022年4月30日
    119
  • a卡eth挖矿教程_a卡挖eth用什么内核

    a卡eth挖矿教程_a卡挖eth用什么内核  对于ETH挖矿来说,A卡无疑是最合适的选择,性价比高。如果你只想挖ETH,那选择A卡无疑是最明智的。但是,在使用A卡挖矿的过程中,往往会出现很多难以解决的问题,影响挖矿的效率。其中很大一部分原因是由于A卡本身的特性导致的。很多人在使用A卡挖ETH的过程中会出现这样一种情况:开始一段时间还是正常的运行,但是运行一段时间后就开始报错,导致无法正常挖矿。这是由于A卡具有自动更新的特性。所以在使用A卡…

    2022年10月16日
    0
  • 30 个实例详解 TOP 命令!「建议收藏」

    30 个实例详解 TOP 命令!

    2022年2月13日
    37

发表回复

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

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