本文将详细介绍如何在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 会将源对象的属性直接复制到目标对象，而不会进行键名转换。
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 或其他数据转换工具库。
-
Array.prototype.map： 如果你使用的是原生JavaScript数组，map 方法通常比 $.each 更推荐用于转换数组元素：
4. 总结
通过结合ES6的解构赋值和属性重命名语法，我们可以优雅而高效地解决JSON对象键名与目标类属性名不匹配的问题。这种方法不仅提高了代码的可读性和简洁性，也使得数据转换过程更加直观和易于维护。在处理结构化但键名不一致的JSON数据时，这是一种非常推荐的实践。
