嵌套对象属性平铺实现

最近遇到一个需求大致的实现效果就是给一个object类型的数据里面有多层嵌套，

需要把每个属性以及对应的value 显示出来

为了函数的可复用性，封装该函数到js文件中

讲一下思路，根据需求来看就是说要到所有属性的值，如果有子对象就显示子对象中的所有属性。

博主小白比较愚钝一开始想着一层一层的标记起来，但是一写，发现如果是无限嵌套，就不行了。于是就想到递归来解决

对象也可以用for循环遍历所有属性，

然后对每一个属性进行判断是对象类型，遇到一个问题，数组在js中的类型也是object 所以加以判断

isNaN(data[key].length)

object.length 的值为undefined 就可以判断是否是子对象

如果不是子对象就push到一个一个保存属性以及值的list里，

如果是子对象，将这些子对象再重新调用该方法进行处理 将所有数据都保存到list里

export  function  haveChildren(data,list) {
  for (let key in data) {
    if (typeof  data[key] === 'object' &&isNaN(data[key].length)) {
      this.haveChildren(data[key],list)
    } else {
      list.push({name:key,value:data[key]})
    }
  }
  return list
}

export function getAllNode(data) {
  return this.haveChildren(data,[])
}

这样就完成了对数组的平铺，

但是这样写存在一个问题，这样写可以拿到最底层的所有属性，但是我们会不知道他是从哪里来，哪个对象下的子对象等等，

对于数据的直观展示造成的很大的影响于是改进代码

export  function  haveChildren(data,list,fatherKey) {
  for (let key in data) {
    let nowKey = fatherKey === '' ? key:fatherKey+'.'+key
    if (typeof  data[key] === 'object' ) {
      this.haveChildren( data[ key ],list,nowKey )
    } else {
      list.push({name:nowKey,value:data[key]})
    }
  }
  return list
}

export function getAllNode(data) {
  return this.haveChildren(data,[],'')

曾加一个参数叫做fatherKey 顾名思义就是父元素的标志。

判断当前是否有带有fatherKey 如果有就将其与.以及子属性进行拼接

这样就解决这个问题了,

上图为实现的效果图，以及调用了一个vue-json-viewer的组件实现的json数据显示

如果大佬们有更好的思路或者有什么问题，欢迎斧正