将对象封装成树状结构(js)

164 阅读1分钟

原始数据:

  data() {
    return {
      originalData: {
        aaa: { name: 'aaa' },
        'aaa.bbb.ccc': { name: 'aaa.bbb.ccc' },
        'aaa.bbb.ddd': { name: 'aaa.bbb.ddd' },
        'aaa.bbb': { name: 'aaa.bbb' },
        'eee.fff': { name: 'eee.fff' },
        eee: { name: 'eee' },
      }
    }
  }

封装之后:

{
    aaa: {
      bbb: {
        ccc: {
          name: 'aaa.bbb.ccc'
        },
        ddd: {
          name: 'aaa.bbb.ddd'
        },
        name: 'aaa.bbb'
      },
      name: 'aaa'
    },
    eee: {
      fff: {
        name: 'eee.fff'
      },
      name: 'eee'
    }
}

代码:

formatModel() {
  const newData = {};
  Object.keys(this.originalData).sort((a, b) => {
    // 获取所有的键,并根据根据层级排序:一级、二级、三级
    return a.split('.').length - b.split('.').length;
  }).forEach(formKey => {
    const nameArr = formKey.split('.'); // 获取该键的层级名称
    const formValues = this.originalData[formKey];
    if (nameArr.length) {
      // 将该属性数据装在newData里
      this.addData(nameArr, formValues, 1, newData);
    }
  })
  return newData;
},

// nameArr:所有层级名称,values:最终要赋给的值,level:当前层级
addData(nameArr, values, level, newData){
  const currentName = nameArr[level - 1];
  if (level === nameArr.length) {
    // 若是最后一级,则赋值
    newData[currentName] = values;
    return newData;
  }
  // 不是最后一级,首先判断存不存在该级,不存在,则添加。
  if (!newData.hasOwnProperty(currentName)) {
    newData[currentName] = {}
  }
  level++
  this.addData(nameArr, values, level, newData[currentName]);
}