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 相关文章推荐
JavaScript 拾漏补遗
Dec 27 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
js的回调函数详解
Jan 05 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 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
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
js实现拖拽效果
2015/02/12 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
python简单分割文件的方法
2015/07/30 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python出现segfault错误解决方法
2016/04/16 Python
带你了解python装饰器
2017/06/15 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
挂职思想汇报
2013/12/31 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
新农村建设标语
2014/06/24 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
MySQL优化及索引解析
2022/03/17 MySQL