数组扁平化,就是将多维数组碾平为一维数组,方便使用。

一:例如,一个二维数组 var arr = ['a', ['b', 2], ['c', 3, 'x']],将其扁平化:

1.  通过 apply 借用数组的 concat 方法:

[].concat.apply([], arr);

结果如下:

jQuery 中的 map 方法就用到了这个技巧。

但如果直接调用 concat 方法,[].concat(arr),就没有扁平化效果。

2扩展运算符...

[].concat(...arr)

3. reduce(ES5新增的数组方法):

[['a'], ['b', 2], ['c', 3, 'x']].reduce((a, b) => a.concat(b), []);

二:对于三维及以上的数组:

1. 数组每一项都是简单类型,如数字:

var arr = [[1], [[2, 3], [4]], 5, 6];
arr.toString().split(',').map(item => +item);

2. 递归:

 var flatten = function(arr) {
var isArray = function(arr) {
return Array.isArray(arr) || Object.prototype.toString.call(arr) === '[object Array]';
},
ret = [],
item; if (!isArray(arr)) {
return;
} for (var i = 0; i < arr.length; i++) {
item = arr[i];
if (isArray(item)) {
ret = ret.concat(flatten(item));
} else {
ret.push(item);
}
} return ret;
}; flatten( [ 'a', [[[['b', 2]]]], ['c', [3, 'x']] ] );

该方法对任意维数组都有效。

三:flat (ES6方法)

flat(Infinity) 可将任意维数组转成一维数组

js多维数组扁平化的更多相关文章

  1. js中数组扁平化处理

  2. js实现数组扁平化

    数组扁平化的方式 什么是数组扁平化? 数组扁平化:指将一个多维数组转化为一个一维数组. 例:将下面数组扁平化处理. const arr = [1, [2, 3, [4, 5]]] // ---> ...

  3. JavaScript数组常用方法解析和深层次js数组扁平化

    前言 数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等. 注:文章结尾处附深层次数组扁平化方法操作. 作为引用数据类型的一种,在处 ...

  4. JS: 数组扁平化

    数组扁平化 什么是数组扁平化? 数组扁平化就是将一个多层嵌套的数组 (Arrary) 转化为只有一层. // 多层嵌套 [1, 2, [3, 4]] // 一层 [1, 2, 3, 4] 递归实现 思 ...

  5. js技巧-使用reduce实现更简洁的数组对象去重和数组扁平化

    Array.prototype.reduce()方法介绍: 感性认识reduce累加器: const arr = [1, 2, 3, 4]; const reducer = (accumulator, ...

  6. JS数组专题1️⃣ ➖ 数组扁平化

    一.什么是数组扁平化 扁平化,顾名思义就是减少复杂性装饰,使其事物本身更简洁.简单,突出主题. 数组扁平化,对着上面意思套也知道了,就是将一个复杂的嵌套多层的数组,一层一层的转化为层级较少或者只有一层 ...

  7. javascrip的数组扁平化

    扁平化 数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组. 举个例子,假设有个名为 flatten 的函数可以做到数组扁平化,效果就会如下: var ar ...

  8. js 二维数组 for 循环重新赋值

    javascript 二维数组的重新 组装 var arr = [[1,2],[3,4],[5,6],[7,8]]; var temp = new Array(); for(var i= 0 ;i&l ...

  9. js二维数组定义和初始化的三种方法总结

    js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...

随机推荐

  1. zabbix网络发现主机

    1 功能介绍 默认情况下,当我在主机上安装agent,然后要在server上手动添加主机并连接到模板,加入一个主机组. 如果有很多主机,并且经常变动,手动操作就很麻烦. 网络发现就是主机上安装了age ...

  2. [洛谷P2417]课程

    题目链接: 点我 题目分析: 二分图最大匹配裸题,跑完匈牙利判断\(ans\)是否等于教室数即可 多组数据请注意初始化. 代码: #include<bits/stdc++.h> #defi ...

  3. SPFA/Dijkstra POJ 3013 Big Christmas Tree

    题目传送门 题意:找一棵树使得造价最少,造价为每个点的子节点造价和*边的造价和 分析:最短路跑出1根节点到每个点的最短边权值,然后每个点的权值*最短边距和就是答案,注意INF开足够大,n<=1特 ...

  4. OkHttp下载文件中途断网报Can't create handler inside thread that has not called Looper.prepare()异常的解决办法

    最近做项目时出现个问题. 在一个基类中,创建一个Handler对象用于主线程向子线程发送数据,代码如下: this.mThirdHandler = new Handler(){ @Override p ...

  5. 1049 - One Way Roads 观察 dfs

    http://lightoj.com/volume_showproblem.php?problem=1049 题意是,在一副有向图中,要使得它变成一个首尾相连的图,需要的最小代价. 就是本来是1--& ...

  6. android开发学习 ------- RecyclerView多类型实例

    实现RecyclerView多类型的实例:效果如下图所示 public class CarFragment extends Fragment{ private View view; private R ...

  7. springboot项目启动问题

    在调试项目的时候有遇到这样一个问题: 项目启动后访问不通,编译没有任何问题,启动也没有报错,日志在打,但是访问不通.而且之前一直可以正常访问,在没改任何代码的情况下不能访问了. 尝试很多次偶然发现,点 ...

  8. Web前端攻防,一不小心就中招了

    随着各浏览器安全功能的提高,前端防御面临的问题也没有之前那么复杂,但浏览器的防御措施并不能百分百的保证网站的安全. 浏览器的XSS Auditor,使得反射型xss几乎被废:CSP(Content-S ...

  9. android动画之通过子线程来实现动画

    android动画之通过子线程来实现动画 使用android动画机制,往往是相对于原始位置来进行参照. 这里通过子线程修改物体位置实现动画. 布局文件: <RelativeLayout xmln ...

  10. Jenkins+Ant+Jmeter搭建轻量级接口自动化

    软件准备 本文所用软件版本如下: Jenkins2.176.1 Tomcat9.0.21 Ant1.9.14 Jmeter5.1.1 我已经把相应的软件上传到我的网盘中,下载地址如下: 下载链接:ht ...