JavaScript 使用 normalizr 处理深层嵌套 JSON 数据

作者：半夏时间：2026-10-25 16:40:56浏览：497

本文介绍如何利用 normalizr 库解决 JavaScript 中深层嵌套 JSON 数据的存储与分析难题。通过定义实体 Schema，将嵌套对象转换为扁平化的 entities 结构，从而优化云数据库存储并支持高效检索。文章涵盖基础用法、数组处理、反向解析及 Entity 配置，并探讨了该库的维护现状与替代方案。

笔者曾开发一款数据分享类小程序，其分享机制类似于百度网盘。该功能允许被分享者对数据进行加工后继续分享，同时支持设置数据过期时间、控制是否允许加工以及是否允许继续分享等权限。

分享的数据结构为深度嵌套的 JSON 对象。在用户读取分享数据时，系统会将其存入小程序云数据库（因分享数据与业务数据存在差异，未使用业务服务器进行维护）。若直接存储原始数据，云数据库体积会迅速膨胀，且难以对子数据进行分析和检索，从而无法有效服务于分享者。

为解决上述问题，需对数据进行转换以实现拆分和维护。此时可引入由 Redux 作者 Dan Abramov 开发的 normalizr 库来处理此类数据。

normalizr 库的设计初衷正是为了处理深层且复杂的嵌套对象。

如何使用

对官方示例进行微调，假设获取到如下书籍数据：

{
  id: "1",
  title: "JavaScript 从入门到放弃",
  // 作者
  author: {
    id: "1",
    name: "chc"
  },
  // 评论
  comments: [
    {
      id: "1",
      content: "作者写的太好了",
      commenter: {
        id: "1",
        name: "chc"
      }
    },
     {
      id: "2",
      content: "楼上造假数据哈",
      commenter: {
        id: "2",
        name: "dcd"
      }
    },
  ]
}

此时我们需要定义三个主体：书籍信息、评论以及用户。首先从基础数据出发构建模式：

import { normalize, schema } from 'normalizr';

// 构造第一个实体 用户信息
const user = new schema.Entity('users');

// 构造第二个实体 评论
const comment = new schema.Entity('comments', {
  // 评价者是用户
  commenter: user
});

// 构造第三个实体 书籍
const book = new schema.Entity('books', {
  // 作者
  author: user,
  // 评论
  comments: [comment]
});

// 传入数据以及当前最大的 schema 信息
const normalizedData = normalize(originalData, book);

先查看最终转换后的数据结构。

{
  "entities": {
    "users": {
      "1": {
        "id": "1",
        "name": "chc"
      },
      "2": {
        "id": "2",
        "name": "dcd"
      }
    },
    "comments": {
      "1": {
        "id": "1",
        "content": "作者写的太好了",
        "commenter": "1"
      },
      "2": {
        "id": "2",
        "content": "楼上造假数据哈",
        "commenter": "2"
      }
    },
    "books": {
      "1": {
        "id": "1",
        "title": "JavaScript 从入门到放弃",
        "author": "1",
        "comments": [
          "1",
          "2"
        ]
      }
    }
  },
  "result": "1"
}

去除冗余信息后，可以看到数据被解析为三个不同的实体对象：users、comments 和 books。这些对象的键为当前 ID，值为平铺后的数据结构。此时即可利用对象或数组（Object.values）来新增和更新数据。

解析逻辑

看到这里，读者可能会感到困惑。暂且不论代码实现，此处先分析库如何解析我们编写的 Schema，以便在实际场景中应用。请再次查看数据与 Schema 定义：

数据结构

{
  id: "1",
  title: "JavaScript 从入门到放弃",
  // 作者
  author: {
    id: "1",
    name: "chc"
  },
  // 评论
  comments: [
    {
      id: "1",
      content: "作者写的太好了",
      commenter: {
        id: "1",
        name: "chc"
      }
    },
     {
      id: "2",
      content: "楼上造假数据哈",
      commenter: {
        id: "2",
        name: "dcd"
      }
    },
  ]
}

书籍信息作为第一层对象，其数据包含 id、title、author 和 comments，对应的 Schema 定义如下：

const book = new schema.Entity('books', {
  // 作者
  author: user,
  // 一本书对应多个评论，所以这里使用数组
  comments: [comment]
});

其中 id 和 title 是 book 本身的属性，无需特别关注，只需写出需要解析的数据结构。books 字符串与解析逻辑无关，它对应 entities 对象中的键名。

再看 user 实体

const user = new schema.Entity('users');

user 没有需要额外解析的信息，直接定义实体即可。

最后是评论信息

const comment = new schema.Entity('comments', {
  // 评价者是用户
  commenter: user
});

{
  id: "1",
  content: "作者写的太好了",
  commenter: {
    id: "1",
    name: "chc"
  }
}

将 comments 从原始数据结构中提取出来后，逻辑便清晰可见。

高阶用法

处理数组

normalizr 可以解析单个对象，若当前业务传递的是数组，可类似 comment 这样直接使用：

[
  {
    id: '1',
    title: "JavaScript 从入门到放弃"
    // ...
  },
  {
    id: '2',
    // ...
  }
]

const normalizedData = normalize(originalData, [book]);

反向解析

我们只需拿到之前 normalizedData 中的 result 以及 entities，即可还原之前的信息。

import { denormalize, schema } from 'normalizr';

//...

denormalize(normalizedData.result, book, normalizedData.entities);

Entity 配置

开发中可根据配置信息重新解析实体数据。

const book = new schema.Entity('books', {
  // 作者
  author: user,
  // 一本书对应多个评论，所以这里使用数组
  comments: [comment]
}， {
  // 默认主键为 id，否则使用 idAttribute 中的数据，如 cid，key 等
  idAttribute: 'id',
  // 预处理策略, 参数分别为 实体的输入值， 父对象
  processStrategy: (value, parent, key) => value,
  // 遇到两个id 相同数据的合并策略，默认如下所示，我们还可以继续修改
  mergeStrategy: (prev, prev) => ({
    ...prev,
    ...next,
    // 是否合并过，如果遇到相同的，就会添加该属性
    isMerge: true
  }),
});

// 看一下比较复杂的例子，以 user 为例子
const user = new schema.Entity('users', {
}, {
  processStrategy: (value, parent, key) => {
    // 增加父对象的属性
    // 例如 commenter: "1" => commenterId: "1" 或者 author: "2" => "authorId": "2"
    // 但是目前还无法通过 delete 删除 commenter 或者 author 属性
    parent[`${key}Id`] = value.id

    // 如果是从评论中获取的用户信息就增加 commentIds 属性
    if (key === 'commenter') { 
      return {
        ...value, 
        commentIds: [parent.id] 
      } 
    }
    // 不要忘记返回 value, 否则不会生成 user 数据
    return {
      ...value,
      bookIds: [parent.id]
    };
  }
  mergeStrategy: (prev, prev) => ({
    ...prev,
    ...next,
    // 该用户所有的评论归并到一起去
    commentIds: [...prev.commentIds, ...next.commentIds],
    // 该用户所有的书本归并到一起去
    bookIds: [...prev.bookIds, ...next.bookIds],
    isMerge: true
  }),
})

// 最终获取的用户信息为
{
  "1": {
    "id": "1",
    "name": "chc"
    // 用户 chc 写了评论和书籍，但是没有进行过合并
    "commentIds": ["1"],
    "bookIds": ["1"],
  },
  "2": {
    "id": "2",
    "name": "dcd",
    // 用户 dcd 写了 2 个评论，同时进行了合并处理
    "commentIds": [
      "2",
      "3"
    ],
    "isMerge": true
  }
}

当然，该库也能进行更复杂的数据格式化，读者可通过 API 文档进一步学习和使用。

其他

normalizr 的使用场景相对有限，开源负责人也已更换。目前主库已无人维护（Issue 也已关闭）。不过，normalizr 的代码本身依然足够稳定。

笔者也在考虑一些新场景的使用，并尝试为 normalizr 添加新功能（如 ID 转换）和优化（TS 重构）。如果您在使用 normalizr 过程中遇到问题，可以联系我，存储库目前在 normalizr-helper 中。

到此这篇关于 JavaScript 利用 normalizr 实现复杂数据转换的文章就介绍到这了，更多相关 JavaScript normalizr 复杂数据转换内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13