JavaScript实现数组降维详解


Posted in Javascript onJanuary 05, 2017

二维数组降维

二维数组只有两个维度,降维比较简单,也不用考虑太复杂的算法逻辑,我们看一下二维数组降维的几种方法;

遍历降维

var arr = [
  ['h', 'e', 'l', 'l', 'o'],
  ['m', 'y'],
  ['w', 'o', 'r', 'l', 'd'],
  ['!']
];
var result = [];
for (var r = 0; r < arr.length; r++) {
  for (var c = 0; c < arr[r].length; c++) {
    result.push(arr[r][c]);
  }
}
console.log(result); //=>[ 'h', 'e', 'l', 'l', 'o', 'm', 'y', 'w', 'o', 'r', 'l', 'd', '!' ]

此方法思路简单,利用双重循环遍历二维数组中的每个元素并放到新数组中。

使用concat

利用concat方法,可以将双重循环简化为单重循环:

var arr = [
  ['h', 'e', 'l', 'l', 'o'],
  ['m', 'y'],
  ['w', 'o', 'r', 'l', 'd'],
  ['!']
];
var result = [];
for (var r = 0, result = []; r < arr.length; r++) {
  result = result.concat(arr[r]);
}
console.log(result); //=>[ 'h', 'e', 'l', 'l', 'o', 'm', 'y', 'w', 'o', 'r', 'l', 'd', '!' ]

arr的每一个元素都是一个数组或参数,作为concat方法的参数,数组中的参数或每一个子元素又都会被独立插入进新数组。

使用apply+concat

apply方法会调用一个函数,apply方法的第一个参数会作为被调用函数的this值,apply方法的第二个参数(一个数组,或类数组的对象)会作为被调用对象的arguments值,也就是说该数组的各个元素将会依次成为被调用函数的各个参数;

var arr = [
  ['h', 'e', 'l', 'l', 'o'],
  ['m', 'y'],
  ['w', 'o', 'r', 'l', 'd'],
  ['!']
];
var result = Array.prototype.concat.apply([], arr);
console.log(result); //=>[ 'h', 'e', 'l', 'l', 'o', 'm', 'y', 'w', 'o', 'r', 'l', 'd', '!' ]

利用apply方法,只需要一行代码就可以完成二维数组降维了。

多维数组降维

多维数组就没二维数组那么简单了,因为不确定数组的深度,所以也不能进行遍历来降维,只能通过递归或者栈方法来实现。

递归

Array.prototype.deepFlatten = function() {
  var result = []; //定义保存结果的数组
  this.forEach(function(val, idx) { //遍历数组
    if (Array.isArray(val)) { //判断是否为子数组
      val.forEach(arguments.callee); //为子数组则递归执行
    } else {
      result.push(val); //不为子数组则将值存入结果数组中
    }
  });
  return result; //返回result数组
}
var arr = [2, 3, [2, 2],
  [3, 'f', ['w', 3]], { "name": 'Tom' }
];
console.log(arr.deepFlatten()); //=>[ 2, 3, 2, 2, 3, 'f', 'w', 3, { name: 'Tom' } ]

这是通过递归的方法实现了多维数组的降维,在这里面,我有使用了原型链将方法封装进了Array原型中,可以直接在数组方法中调用。

栈方法

Array.prototype.deepFlatten = function() {
  var result = []; //定义保存结果的数组
  var stack = this; //将数组放入栈中
  while (stack.length !== 0) { //如果栈不为空,则循环遍历
    var val = stack.pop(); //取出最后一个值
    if (Array.isArray(val)) { //判断是不是数组
      stack = stack.concat(val); //如果是数组就将拼接入栈中
    } else {
      result.unshift(val); //如果不是数组就将其取出来放入结果数组中
    }
  }
  return result;
}
var arr = [2, 3, [2, 2],
  [3, 'f', ['w', 3]], { "name": 'Tom' }
];
console.log(arr.deepFlatten()); //=>[ 2, 3, 2, 2, 3, 'f', 'w', 3, { name: 'Tom' } ]

这是通过栈方法,建立了一个栈,将数组的内容存进去,然后逐个取出来,如果取出来的是个数组,就将这个数组打散拼接进栈中,在出栈一个,这样循环。

多维数组降维的方法也可以降维二维数组,但是有点大材小用,还是用对的方法做对的事才是最好的!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
vue实现评价星星功能
Jun 30 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 #Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 #Javascript
jQuery实现动态文字搜索功能
Jan 05 #Javascript
JS实现HTML标签转义及反转义
Apr 14 #Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 #Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 #Javascript
如何提高Dom访问速度
Jan 05 #Javascript
You might like
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python基础知识点 初识Python.md
2019/05/14 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
专升本个人自我评价
2013/12/22 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
2014年档案室工作总结
2014/12/01 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers