JavaScript中动态重构和排序JSON对象

本文旨在深入探讨如何在javascript中高效且动态地重构和排序json对象。我们将介绍如何利用`object.keys()`和动态属性访问（即方括号表示法）来处理从api获取的原始数据，将其转换成适合图表渲染或进一步分析的结构。文章将提供两种常见的输出格式，并强调动态数据处理的关键技巧和注意事项。

在现代Web开发中，从后端API获取JSON数据是常见的操作。这些数据通常以数组包含多个对象的形式呈现，每个对象包含多个属性（例如日期、不同的测量值等）。然而，原始的JSON结构可能不直接适用于前端组件（如数据图表库）的需求。因此，将这些原始数据动态地重构为更易于消费的格式变得至关重要。

理解动态属性访问

当我们需要根据变量的值来访问对象的属性时，不能使用点表示法（object.property），因为点表示法期望一个字面量属性名。此时，我们必须使用方括号表示法（object[variableName]）。

例如，如果我们有一个对象 d = { MoyDate: ‘…’, ProductionPV: 100 }，并且我们想访问 ProductionPV 属性，但属性名存储在一个变量 key = “ProductionPV” 中，那么正确的做法是 d[key]，而不是 d.key。如果使用 d.key，JavaScript会尝试查找名为 “key” 的字面量属性，这通常不是我们想要的。

场景描述与挑战

假设我们通过AJAX请求获取了一个JSON数组 retour，其结构如下：

立即学习“Java免费学习笔记（深入）”；

[  { "MoyDate": "2023-01-01", "ProductionPV": "100", "EauDepart": "50", "EauRetour": "40" },  { "MoyDate": "2023-01-02", "ProductionPV": "120", "EauDepart": "55", "EauRetour": "45" },  // ... 更多数据]

我们的目标是将其转换为以下两种动态结构之一，其中 MoyDate 字段将作为所有测量值的日期轴，而其他字段（如 ProductionPV、EauDepart、EauRetour）则分别成为独立的“数据系列”。

小爱开放平台

小米旗下小爱开放平台

281 查看详情

解决方案一：重构为键值对对象

这种方法将生成一个对象，其中每个键对应原始数据中的一个测量类型（例如 ProductionPV），其值是一个包含 {date, measurement} 对象的数组。这种结构适用于需要按名称快速访问特定数据系列的场景。

/** * 将原始JSON数据重构为一个对象， * 其中键是测量类型，值是包含日期和测量值的数组。 * @param {Array