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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 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
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
Python 文件数据读写的具体实现
2020/01/24 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
自荐信格式
2013/12/01 职场文书
销售部主管岗位职责
2013/12/18 职场文书
《穷人》教学反思
2014/04/08 职场文书
拔河比赛口号
2014/06/10 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书