关于树状结构和数组扁平化数据的那些事...

扁平化是什么？

数据扁平化是为了把复杂结构的数据变为单层级的简单结构数据。为了对数据处理更便捷。

树状结构的扁平化

1.简单的数据扁平化

  const obj = {
   a: 1,
   b: { c: 2, g: 4 },
   d: { e: { f: 3 } }
 }
 
 // 新建一个空对象res，扁平化的结构都累加到res中
 function flat(item, preKey='', res = {}){
    Object.entries(item).forEach(([key, value]) => {
       if(value && typeof value === 'object'){
          flat(value, preKey + key + '.', res)
       }else{
         res[preKey + key] = value
       }
    })
    
    return res;
 
 }
 
 flat(obj)
 //结果: 
 // {
 //  a: 1, 
 //  b.c: 2, 
 //  b.g: 4, 
 //  d.e.f: 3
 // }

2.复杂的树结构扁平化

 const obj = {
  a: 1, 
  b: [1, 2, { c: true }, [3]], 
  d: { e: 2, f: 3 }, 
  g: null,
 }
 //与简单树结构转换比较，只是增加了对Array和Object生成key的不同表现形式，
 function flat(item, preKey='', res = {}){
    if(!obj) return;
    Object.entries(item).forEach(([key, value]) => {
      const temp = Array.isArray(item) ? `${preKey}[${key}]` : `${preKey}${key}`
      if(Array.isArray(value)){
           flat(value, temp, res)
      }
       if(value && typeof value === 'object'){
       let tempObj = Array.isArray(item) ? `${preKey}[${key}].` : `${preKey}${key}.`
          flat(value, tempObj, res)
       }else{
         res[temp] = value
       }
    })
    
    return res;
 
 }
 

 flat(obj)

运行结果如下

数组的扁平化

1.数组的原型方法

  arr.flat(Infinity)

2.自定义扁平化方法

// 以初始的空数组开始。不断累加扁平化的数据
 const flatten = (arr) => {
    return arr.reduce((prev,next) => prev.concat(Array.isArray(next) ? 
       flatten(next) : next),
       []                
    )
 }
 
 flatten([1,[2,3,[4,5]]]) // 转换结果: [1, 2, 3, 4, 5]