多维数组降维成一维数组

reduce()

var arr1 = [[0, 1], [2, 3], [4, 5]];
var arr2 = arr1.reduce(function (a, b) { return a.concat(b)} );
// arr2 [0, 1, 2, 3, 4, 5]

回调

优点: 多维数组也可以

比如:var arr = [[1,2],3,[[[4], 5]]]

var arr1 = [[0, 1], [2, 3], [4, 5]];
function flatten(arr) { return [].concat( ...arr.map(x => Array.isArray(x) ? flatten(x) : x) ) }
var arr2 = flatten(arr1); // arr2 [0, 1, 2, 3, 4, 5]

flat()

利用 ES 的最新语法,Array.prototype.flat()。缺点是,有兼容性问题(例360浏览器不支持, Chrome支持)。优点是非常简单。

mdn 上是这么描述的:flat() 方法会递归到指定深度将所有子数组连接,并返回一个新数组。

语法:var newArray = arr.flat(depth),参数说明:depth,可选,指定嵌套数组中的结构深度,默认值为1。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4] var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]] var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6] //Infinity展开所有嵌套数组
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6] var arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

ES6 数组方法库的更多相关文章

  1. ES6数组扩展

    前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩 ...

  2. ES6数组及数组方法

    ES6数组可以支持下面的几种写法: (1)var [a,b,c] = [1,2,3]; (2)var [a,[[b],c]] = [1,[[2],3]]; (3)let [x,,y] = [1,2,3 ...

  3. 数组的复制及ES6数组的扩展

    一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...

  4. es6数组的扩展

    数组扩展运算符 ...(三个点) const demoArr=[0,1,2,3,4] console.log(...demoArr) // 0 1 2 3 4 // 他把一个数组用逗号分隔了出来 // ...

  5. ES6 数组方法拓展

    ES6 数组方法拓展 1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括E ...

  6. ES6数组相关

    ES6数组新增的几个方法: 1. forEach() //forEach()遍历数组,无返回值,不改变原数组 var arr=[1,2,3,4] arr.forEach((item,index,arr ...

  7. ES6数组新加 Buff

    欢迎关注本人公众号<迈向大前端>,里面有15本前端相关的电子书,送给在前端路上迷茫的同学们! 本章篇幅很长,分开来发,这一小篇主要讲ES6数组的Array.of()和Array.from( ...

  8. ES6数组的扩展--Array.from()和Array.of()

    一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...

  9. JavaScript ES6 数组新方法 学习随笔

    JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...

随机推荐

  1. 通过phpstudy安装wordpress、使用BP拦截POST型请求包

    使用BP拦截POST型请求包 一.安装phpstudy https://www.xp.cn/download.html 二.安装wordpress Step1:下载wordpress源码,https: ...

  2. firewall几个常用命令

    systemctl status firewalld firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --r ...

  3. 理解C#中的ConfigureAwait

    原文:https://devblogs.microsoft.com/dotnet/configureawait-faq/ 作者:Stephen 翻译:xiaoxiaotank 静下心来,你一定会有收获 ...

  4. java+opencv人脸识别程序2.0

    由于第一次写的太粗糙了,所以又修改了一下,详细的更改如下: @ 目录 更改 窗口问题 识别问题 相似度对比 仍然存在的问题 人脸信息显示 图片质量 更改 优化了一下界面风格 窗口问题 原来是在主界面外 ...

  5. Navicat15破解+网盘位置

    百度网盘Navicat.15位置 链接:https://pan.baidu.com/s/1Vn0Qnt8IUA37a-p4hAnk5g 提取码:clq3 1.百度网盘下载完后,点这个安装Navicat ...

  6. 虚拟化技术之kvm虚拟机创建工具qemu-kvm

    在前边的博客中我们介绍了如何创建kvm虚拟机,以及一些常用的工具的介绍和使用,今天我们来了解下kvm原始工具qemu-kvm:为什么说qemu-kvm是一个原始的工具呢,如果你用kvm虚拟机,心细的你 ...

  7. kernel 通知链

    原文链接: 深入理解linux网络技术内幕读书笔记(四)--通知链 概述 [注意] 通知链只在内核子系统之间使用. 大多数内核子系统都是相互独立的,因此某个子系统可能对其它子系统产生的事件感兴趣.为了 ...

  8. SuperSlide轮播切换

    <!-- 点击切换引入 --> <script type="text/javascript" src="js/jquery.js">&l ...

  9. 第5篇 Scrum冲刺博客

    1.站立式会议 1.1 会议图片 1.2 项目进展 成员 昨日任务 今日计划完成任务 陈忠明 歌曲信息的上传/下载包 歌曲批量下载压缩包 吴茂平 完善评论系统 新消息提醒功能设计 黄海钊 修改代码规范 ...

  10. Appium学习笔记

    1.创建Maven项目 2.POM文件添加java-client依赖坐标 3.修改脚本,执行脚本 UIAutomator2(自动装置引擎) 4723:Appium服务器端口,用来监听脚本发送过来的指令 ...