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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
vue 自定义右键样式的实例代码
Nov 06 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
php经典趣味算法实例代码
2020/01/21 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
javascript 闭包详解
2015/02/15 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python的Django框架中的Context使用
2015/07/15 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Tesserocr库的正确安装方式
2018/10/19 Python
浅谈python中get pass用法
2019/03/19 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python pandas用法最全整理
2019/08/04 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
文明礼仪小标兵事迹
2014/01/12 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
mysql sock文件存储了什么信息
2022/07/15 MySQL