手把手教你实现json嵌套对象的范式化和反范式化

手把手教你实现json嵌套对象的范式化和反范式化

---

在json对象嵌套比较复杂的情况下，可以将复杂的嵌套对象转化成范式化的数据。比如后端返回的json对象比较复杂，前端需要从复杂的json对象中提取数据然后呈现在页面上，复杂的json嵌套，使得前端展示的逻辑比较混乱。

特别的，如果我们使用了flux或者redux等作为我们前端的状态管理机（state对象），通过控制state对象的变化，从而呈现不同的视图层的展示，如果我们在状态管理的时候，将state对象范式化，可以减小state对象操作的复杂性，从而可以清晰的展示视图更新的过程。

• 什么是数据范式化和反范式化
• 数据范式化的实现
• jest编写简单的单元测试

本文的源码地址为：https://github.com/forthealllight/normalize

本文原文在我的github主页中，如果喜欢，您的star是对我最好的鼓励～

---

1.什么是数据范式化

（1）数据范式化的定义

本文不会具体介绍在数据库中关于范式的定义，广义的数据范式化，就是除了最外层属性之外，其他关联的属性用外键来引用。

数据范式化的好处有：可以减少数据的冗余

（2）数据范式化举例

比如有一个person对象如下所示:

{
  'id':1,
  'name':'xiaoliang',
  'age':20,
  'hobby':[{
    id:30,
    desp:'足球'
  },{
    id:40,
    desp:'篮球'
  },{
    id:50,
    desp:'羽毛球'
  }]
}

在上述的对象中，hobby存在嵌套，我们将perosn的无嵌套的其他属性作为主属性，而hobby属性表示的是需要外键来引用的属性，我们将id作为外键的名称，将上述的嵌套对象经过范式化处理可以得到：

{
  person:{
     '1':{
         'id':1,
         'name':'xiaoliang',
         'age':20,
         'hobby':['30','40','50']
     }
  },
  hobby:{
    '30':{
      id:'30',
      desp:'足球'
    },
    '40':{
      id:'40',
      desp:'篮球',
    },
    '50':{
      id:'50',
      desp:'羽毛球'
    }
  }
}

上述对象就是范式化之后的结果，我们发现主对象person里面的hobby属性中，此时变成了id号组成的数组，通过id作为外键来索引另一个对象hobby中的具体值。

（3）数据范式化的优点

那么这样做到底有什么好处呢？

比如我们现在新增了一个人id为2：

{
  'id':2,
  'name':'xiaoyu',
  'age':20,
  'hobby':[{
    id:30,
    desp:'足球'
  }]
}

他的兴趣还好中同样包含了足球，那么如果有复杂嵌套对象的形式，对象变成如下的形式：

  [
    {
      'id':1,
      'name':'xiaoliang',
      'age':20,
      'hobby':[{
        id:30,
        desp:'足球'
      },{
        id:40,
        desp:'篮球'
      },{
        id:50,
        desp:'羽毛球'
      }]
    },
    {
      'id':2,
      'name':'xiaoyu',
      'age':2