js对象数组遍历

2023年7月23日 355次阅读 来源: 数据结构之图

前言：最近由于项目需求，新增了一个行程搜索结果页，搜索的关键字需要高亮。且从搜索结果页进入原来的行程详情页，原来详情页中的关键字也同样需要做高亮处理。由于详情页是之前做好的，页面渲染用的是underscore模板。一个页面中大大小小的模板有很多，为了避免麻烦和便于管理。我决定不对原有的模板结构进行修改，直接将从服务端的数据进行过滤一遍，然后对需要高亮的关键字进行数据替换。随意会增加页面初始渲染时间，可总体从后期页面维护和管理来说这样牺牲点性能也是可以接受的。

技术：主要是利用递归方法对后端的返回的json数据进行遍历。

我们都知道从后端返回的json数据是一个Object，Object里面有会对象和数组，数组里面可能还会有对象，数组里面的对象可能还会有对象和数组。总之就是像一棵树一样的可以无穷无尽的扩展下去。

代码：

var jojo=function(data){
    //技巧：用constructor 去判断数据类型比typeof 和instanceof 更好使
    if(data.constructor==Object){
        for(var i in data){
            if(data[i].constructor==String|| data[i].constructor==Number){
                console.log('对象值的输出：'+data[i]);
            }else{
                //递归调用
                jojo(data[i]);
            }
        }
    }else if(data.constructor==Array){
        for(var i= 0,max=data.length;i<max;i++){
            if(data[i].constructor==String|| data[i].constructor==Number){
                console.log('数组值的输出:'+JSON.stringify(data[i]));
            }else{
                //递归调用
                jojo(data[i]);
            }
        }
    }
}

//测试数据
var testData={
    "item1":'item1',
    "item2":[{
        "item21":'item21'
    },{
        "item22":'item22'
    },{
        "item23":'item23'
    }],
    "item3":[
        {
            "item31":[
                {
                    "item32":'item32'
                }
            ]
        }
    ],
    "item4":['item41','item42']
}
//输出
jojo(testData);

    原文作者：数据结构之图
    原文地址: https://blog.csdn.net/xiaotuwy/article/details/53364875
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞