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 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
JQuery select标签操作代码段
May 16 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
React学习之JSX与react事件实例分析
Jan 06 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统计字符串中中英文字符的个数
2013/06/23 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
PHP中串行化用法示例
2016/11/16 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
python求crc32值的方法
2014/10/05 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
Python中文字符串截取问题
2015/06/15 Python
python开发之文件操作用法实例
2015/11/13 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python对切片命名的实现方法
2018/10/16 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
使用python实现kNN分类算法
2019/10/16 Python
Python序列类型的打包和解包实例
2019/12/21 Python
python deque模块简单使用代码实例
2020/03/12 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
Python如何实现机器人聊天
2020/09/10 Python
python zip()函数的使用示例
2020/09/23 Python
python打包生成so文件的实现
2020/10/30 Python
教师实习期自我鉴定
2013/10/06 职场文书
投资合作协议书范本
2014/04/17 职场文书
爱我中华演讲稿
2014/05/20 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS