javascript数组拍平方法总结


Posted in Javascript onJanuary 20, 2018

在开发过程中有得时候总是碰一些共性的问题,比如将一个二维数组拍平成一维数组,或者三维数组拍平成一维数组。这些问题在遇到的时候总会重新思考,不如将其提炼出来,总结一下。

下面笔者将为大家演示一下,将一个多维数组拍平成一个一维数组的两种方法,算是抛砖引玉,大家有更好的方法可以在留言区发表。

首先是第一种方法,递归处理,代码如下:

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function product() {
 // 1、创建一个空数组,
 var newarr = [];
 ///2、并且返回一个函数,函数参数为要拍平的数组
 return function flatten(arr) {
  // 3、循环数组,判断每一项,不为输的话将其塞入newarr
  // 若为数组,递归调用 faltten,并将结果与newarr合并
  for (var t of arr) {
   if (!Array.isArray(t)) {
    newarr.push(t);
   } else {
    newarr.concat(flatten(t))
   }
  }
  return newarr
 }
}
var flatten = product();
console.log(flatten(arr))

执行结果为:

javascript数组拍平方法总结

上面这这种方法比较中规中矩,代码详解见注释,下面这种方法运用到了javascript语言的一些新特性,代码如下:

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function flatten(arr){
 return arr.reduce(function(pre,cur){
  if(!Array.isArray(cur)){
   return [...pre,cur];
  }else{
   return [...pre,...flatten(cur)]
  }
 },[])
}
console.log(flatten(arr))

上面代码中用了ES6的一个新特性扩展云算法 “...”,“[...abc,...fff]”其作用相当于abc.concat(fff),这种用法更加直观明了,还有就是运用了reduce方法。reduce是javascript语言中数组的一个方法。

数组调用recduce方法时,可以传递两个参数,第一个参数为回调函数,第二个参数为一个初始值。回调函数中需要传递两个参数,第一个参数为每次执行函数的返回值,第二个参数为当前索引对应数组的值。reduce的第二个参数是可以省略的,省略的话,回调函数第一次调用的参数为数组的第一项和第二项的值,如果没有省略,回调函数的第一个参数就是这个初始值。上面的例子,reduce的第二个参数设置了一个空数组。

reduce的文档地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

相比来说第一种比较好理解,第二种的难点在于对reduce函数的运用和理解。

Javascript 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 #Javascript
详解Node.js模板引擎Jade入门
Jan 19 #Javascript
JS实现碰撞检测的方法分析
Jan 19 #Javascript
angular1配合gulp和bower的使用教程
Jan 19 #Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 #Javascript
Angular实现搜索框及价格上下限功能
Jan 19 #Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 #Javascript
You might like
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
python redis存入字典序列化存储教程
2020/07/16 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
教师批评与自我批评材料
2014/10/16 职场文书
2014年施工员工作总结
2014/11/18 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
公司承诺书格式范文
2015/04/28 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android