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

水深无声 2023-02-13 05:39 4阅读 0赞

我们有时候处理数据，可能会遇到一些不规则，那么拿到这种数据我们如何进行遍历操作呢？举个栗子：

我们现在有这样的数据：

let arr = [
    			{ 
    				title: '一一级',
    				key: '一一级key',
    				children: [
    					{ 
    						title: '一二级',
    						key: '一二级key',
    						children: [
    							{ 
    								title: '一三级',
    								key: '一三级key',
    								children: [
    									{ 
    										title: '一四级',
    										key: '一四级key',
    										children: []
    									}
    								],
    							}
    						],
    					}
    				],
    			},
    			{ 
    				title: '二一级',
    				key: '二一级key',
    				children: [
    					{ 
    						title: '二二级',
    						key: '二二级key',
    						children: [
    							{ 
    								title: '二三级',
    								key: '二三级key',
    								children: [
    									{ 
    										title: '二四级',
    										key: '二四级key',
    										children: []
    									}
    								],
    							}
    						],
    					}
    				],
    			},
    		];
    		this.traverse(arr)

现在需要把所有的key都输出来，想到了使用递归来解决这个问题，上代码：

factoryArr(arr) { 
    	for(let val of arr){ 
    		if(val.children.length>0){ 
    			console.log("有子数组的时候" + val.key);
    			this.factoryArr(val.children); //递归遍历
    		}else{ 
    			console.log("没有子数组的时候" + val.key);
    		}
    	}
    },

我的方法是写在methods中的，所以需要加上this调用本身，上面调用的方法是写在声明周期里的，故而加上this；  
结果：  
![result][]  
对象也是一样的用法哈：比如

var data= { 
        a: {  one: 1, two: 2, three: { four:'2',five:'4'} },
        b: {  six: 4, seven: 5, eight: 6 },
        c: {  nine: 7, ten: 8}
    }
    function factoryObj(obj) { 
        for (var a in obj) { 
          if (typeof(obj[a]) == "object") { 
            traverse(obj[a]); //递归遍历
          } else { 
            console.log(a + "=" + obj[a]); //如果是值就显示
          }
        }
    }
    factoryObj(data)

顺便插 -----张图！哈哈哈哈  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70_pic_center]

[result]: https://img-blog.csdnimg.cn/20200527155950304.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200527160334899.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M=,size_16,color_FFFFFF,t_70#pic_center