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

一:例如,一个二维数组 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. bzoj 3053: The Closest M Points【KD-tree】

    多维KDtree板子 左右儿子的估价用mn~mx当区间,假设区间里的数都存在:k维轮着做割点 #include<iostream> #include<cstdio> #incl ...

  2. poj 1733 Parity game【hash+带权并查集】

    hash一下然后用带权并查集做模2下的前缀和 #include<iostream> #include<cstdio> #include<map> #include& ...

  3. [MySQL] LIMIT 分页优化

    背景:LIMIT 0,20 这种分页方式,随着 offset 值的不断增大,当达到百万级时,一条查询就需要1秒以上,这时可以借助索引条件的查询来优化. SQL:select * from member ...

  4. jQuery 第九章 工具方法

    $.type() $.isArray() $.isFunction() $.isWindow()... $.trim() $.proxy() $.noConflict() $.each() $.map ...

  5. Java | 技术应用 | 利用Jsoup处理页面

    根据微信公众号的推文链接地址,对文章内容进行爬取,利用jsoup解析文章源代码,加上结合xpth提取文文章信息, 利用正则表达式读取文章发表时间. Jsoup <!-- jsoup HTML p ...

  6. JMeter配置JDBC测试SQL Server/MySQL

    一.配置SQL Server 1.下载sql驱动,将sqljdbc4.jar放到JMeter安装目录/lib下. 2.启动JMeter,右键添加->配置文件->JDBC Connectio ...

  7. Input对象2(貌似是独立标签)

    6.hidden隐藏域的样式表单:Hidden属性可以创建一个隐藏域,数据会被隐藏起来,因此用户是无法操作的.这样说来hidden好像没有什么用,事实上,正是出于安全的考虑,在多步操作数据的同时,用h ...

  8. D. Black Hills golden jewels 二分答案 + 二分判定

    http://codeforces.com/gym/101064/problem/D 题目是给定一个数组,如果两两组合,有C(n, 2)种结果,(找出第一个大于等于第k大的结果) 思路, 二分答案va ...

  9. AWK整理

    处理模式: awk的处理文本和数据的方式是这样的,它逐行扫描文件,从第一行到最后一行,寻找匹配的特定模式的行,并在这些行上进行你想要的操作.如果没有指定处理动作,则把匹配的行显示到标准输出(屏幕),如 ...

  10. 动手实现 Redux(六):Redux 总结

    不知不觉地,到这里大家不仅仅已经掌握了 Redux,而且还自己动手写了一个 Redux.我们从一个非常原始的代码开始,不停地在发现问题.解决问题.优化代码的过程中进行推演,最后把 Redux 模式自己 ...