将JSON对象映射到具有不同键名的类属性-js教程-PHP中文网

将JSON对象映射到具有不同键名的类属性

霞舞

发布： 2025-10-04 11:15:39

原创

876人浏览过

将json对象映射到具有不同键名的类属性

本文将详细介绍如何在JavaScript中将具有非标准或任意键名的JSON对象映射到预定义类的特定属性。通过利用ES6的解构赋值与属性重命名功能，我们可以高效、清晰地实现数据转换，确保JSON数据能够准确填充到目标类的实例中，从而提高代码的可读性和可维护性。

1. 理解问题背景

在实际开发中，我们经常会从外部接口或文件接收到JSON格式的数据。这些数据的键名可能并不总是与我们内部定义的类结构完全匹配。例如，我们可能收到以下形式的JSON数组：

var inputJson = [{
    "HS": "   ",
    "__EMPTY": 1,
    "__EMPTY_1": "    Pcs."
},
{
    "HS": " RAS222PCAIBA",
    "__EMPTY": 1,
    "__EMPTY_1": "    Pcs."
},
{
    "HS": "     SRK20CSS-S6/A1.6T",
    "__EMPTY": -4,
    "__EMPTY_1": "    Pcs."
}];

登录后复制

而我们期望将其映射到一个名为 Stocks 的类实例数组中，该类的定义如下：

class Stocks {
  model;
  quantity;
  type;
  constructor(data) {
    Object.assign(this, data);
  }
}

登录后复制

我们希望将 inputJson 中的 HS 键映射到 Stocks 类的 model 属性，__EMPTY 键映射到 quantity 属性，__EMPTY_1 键映射到 type 属性。

如果直接使用 Object.assign(this, data)，如以下尝试：

var completeStock = [];
$.each(inputJson, function( index, value ) {
  completeStock.push(new Stocks(value));
});

登录后复制

这将导致 Stocks 实例直接拥有 HS、__EMPTY 和 __EMPTY_1 等属性，而不是我们期望的 model、quantity 和 type。这是因为 Object.assign 会将源对象的属性直接复制到目标对象，而不会进行键名转换。

Robovision AI

一个强大的视觉AI管理平台

查看详情

2. 解决方案：利用解构赋值进行属性重命名

为了解决上述问题，我们可以利用ES6的解构赋值（Destructuring Assignment）功能，结合属性重命名（Property Renaming）语法，在将JSON对象的值传递给类构造函数之前，先将其转换为符合类属性命名规范的对象。

核心思想： 在迭代 inputJson 数组时，对于每个JSON对象 value，我们使用解构赋值语法 const { oldKey: newKey, ... } = value; 来提取并重命名其属性。然后，将重命名后的属性组成一个新的对象，传递给 Stocks 类的构造函数。

2.1 示例代码

以下是实现这一目标的代码：

// 原始输入JSON数据
var inputJson = [{
    "HS": "   ",
    "__EMPTY": 1,
    "__EMPTY_1": "    Pcs."
},
{
    "HS": " RAS222PCAIBA",
    "__EMPTY": 1,
    "__EMPTY_1": "    Pcs."
},
{
    "HS": "     SRK20CSS-S6/A1.6T",
    "__EMPTY": -4,
    "__EMPTY_1": "    Pcs."
}];

// 目标类定义
class Stocks {
  model;
  quantity;
  type;
  constructor(data) {
    // 使用Object.assign将传入的数据映射到类实例
    // 前提是data对象的键名已与类属性匹配
    Object.assign(this, data);
  }
}

// 存储映射后的Stock对象数组
var completeStock = [];

// 遍历inputJson数组并进行映射
$.each(inputJson, function(index, value) {
  // 使用解构赋值并重命名属性
  // HS 键的值赋给 model 变量
  // __EMPTY 键的值赋给 quantity 变量
  // __EMPTY_1 键的值赋给 type 变量
  const { HS: model, __EMPTY: quantity, __EMPTY_1: type } = value;

  // 创建一个新的Stocks实例，传入重命名后的属性组成的字面量对象
  completeStock.push(new Stocks({ model, quantity, type }));
});

// 打印结果，查看映射是否成功
console.log(completeStock);

/*
预期输出 (类似):
[
  Stocks { model: '   ', quantity: 1, type: '    Pcs.' },
  Stocks { model: ' RAS222PCAIBA', quantity: 1, type: '    Pcs.' },
  Stocks { model: '     SRK20CSS-S6/A1.6T', quantity: -4, type: '    Pcs.' }
]
*/

登录后复制

2.2 代码解析

const { HS: model, __EMPTY: quantity, __EMPTY_1: type } = value;
- 这是解构赋值的关键部分。它从 value 对象中提取属性。
- HS: model 表示从 value 对象中查找名为 HS 的属性，并将其值赋给一个新声明的局部变量 model。
- __EMPTY: quantity 和 __EMPTY_1: type 同理，分别将 __EMPTY 的值赋给 quantity 变量，将 __EMPTY_1 的值赋给 type 变量。
- 通过这种方式，我们成功地将原始JSON中的非标准键名转换为了我们类中定义的标准属性名。
new Stocks({ model, quantity, type })
- 在完成属性重命名后，我们创建了一个新的对象字面量 { model, quantity, type }。这个对象包含了我们期望的键名和对应的值。
- 然后，这个新对象被作为参数传递给 Stocks 类的构造函数。
- 在 Stocks 类的构造函数中，Object.assign(this, data) 会将 data（即 { model, quantity, type }）的所有可枚举自有属性复制到新的 Stocks 实例上。由于此时 data 对象的键名已经与 Stocks 类的属性名完全匹配，因此 model、quantity 和 type 属性会正确地被设置到 Stocks 实例上。

3. 注意事项与最佳实践

明确的映射关系： 这种方法要求你明确知道JSON对象的哪些键对应到类中的哪些属性。对于固定格式的JSON数据，这是一种非常高效且可读性高的方法。
处理缺失属性： 如果原始JSON对象中可能缺少某个键，解构赋值会将其对应的变量设置为 undefined。这通常是可接受的行为，但如果需要默认值，可以在解构时指定：
```
const { HS: model = 'N/A', __EMPTY: quantity = 0, __EMPTY_1: type = 'Unknown' } = value;
```
登录后复制
代码可读性： 解构赋值使得数据转换逻辑非常清晰，一眼就能看出原始键名和目标属性名的对应关系。
性能： 对于大型数据集，这种方法通常比手动逐个赋值或使用复杂循环要高效且简洁。
替代方案（更复杂场景）：
- Array.prototype.map： 如果你使用的是原生JavaScript数组，map 方法通常比 $.each 更推荐用于转换数组元素：
```
const completeStock = inputJson.map(value => {
    const { HS: model, __EMPTY: quantity, __EMPTY_1: type } = value;
    return new Stocks({ model, quantity, type });
});
```
  登录后复制
- 第三方库： 对于更复杂或动态的键名转换场景（例如，需要根据配置动态决定映射关系），可以考虑使用如 Lodash 的 mapKeys 或其他数据转换工具库。