JS实现遍历不规则多维数组的方法


Posted in Javascript onMarch 21, 2018

本文实例讲述了JS实现遍历不规则多维数组的方法。分享给大家供大家参考,具体如下:

直接进入正文:

我们有时候处理数据,可能会遇到一些不规则(无法预料的数据结构),那么拿到这种数据我们如何进行遍历操作呢?举个例子:

var data= {
    a: { one: 1, two: 2, three: {four:'2',five:'4'} },
    b: { six: 4, seven: 5, eight: 6 },
    c: { nine: 7, ten: 8}
}

比如上边的数据(实际情况是这个数据会有各种不可预料的变化),如果想遍历这种数据,用单纯的for in就无法遍历了。

其实这种数据遍历也简单,使用递归的方法,就可以完美的解决这个问题

代码如下:

function traverse(obj) {
    for (var a in obj) {
      if (typeof(obj[a]) == "object") {
        traverse(obj[a]); //递归遍历
      } else {
        console.log(a + "=" + obj[a]); //如果是值就显示
      }
    }
}
traverse(data)

最后我们只要调用这个方法,把obj传入,就成功的遍历了整个data

本例运行结果如下:

JS实现遍历不规则多维数组的方法

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
vue项目关闭eslint校验
Mar 21 #Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 #Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 #Javascript
JS代码实现电脑配置检测功能
Mar 21 #Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 #Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 #Javascript
详解PHP后期静态绑定分析与应用
Mar 21 #Javascript
You might like
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
用javascript实现自定义标签
2007/05/08 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
jqTransform美化表单
2015/10/10 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
python通过post提交数据的方法
2015/05/06 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
JAVA软件工程师测试题
2014/07/25 面试题
思想专业自荐信范文
2013/12/25 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
公司外出活动方案
2014/08/14 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS