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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
easyui validatebox验证
Apr 29 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
vue使用监听实现全选反选功能
Jul 06 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
图书管理程序(一)
2006/10/09 PHP
php访问查询mysql数据的三种方法
2006/10/09 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
vue中使用codemirror的实例详解
2018/11/01 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python正则-re的用法详解
2019/07/28 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
爽歪歪广告词
2014/03/20 职场文书
《学棋》教后反思
2014/04/14 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
结婚纪念日感言
2015/08/01 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
深入理解 Golang 的字符串
2022/05/04 Golang