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 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
原生JS实现九宫格抽奖
Sep 13 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/06/19 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
javascript基础知识
2016/06/07 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
大学生简历求职信
2014/06/24 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
小学生思想品德评语
2014/12/31 职场文书
留学推荐信中文范文
2015/03/26 职场文书
整脏治乱工作简报
2015/07/21 职场文书
2016年教师节感言
2015/12/09 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
CentOS MySql8 远程连接实战
2022/04/19 MySQL
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL