理解直接映射的局限性
在JavaScript中，我们经常需要将从API或其他数据源获取的JSON对象转换为特定的类实例，以便于数据管理和业务逻辑处理。一个常见的模式是在类的构造函数中使用Object.assign(this, data)来快速将传入对象的所有属性复制到当前实例上。
考虑以下场景：我们有一个包含库存信息的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);
}
}如果直接按照以下方式尝试映射：
立即学习“Java免费学习笔记（深入）”；
var completeStock = [];
$.each(inputJson, function(index, value) {
completeStock.push(new Stocks(value));
});
// console.log(completeStock);
// 此时 completeStock 中的对象会是 { HS: "...", __EMPTY: ..., __EMPTY_1: "..." }
// 而不是我们期望的 { model: "...", quantity: ..., type: "..." }这种方法会导致Stocks实例直接继承了JSON对象的原始键名（如HS, __EMPTY, __EMPTY_1），而不是将其映射到我们定义的model, quantity, type属性上。这是因为Object.assign执行的是浅拷贝，它会根据源对象的键名来创建或覆盖目标对象的属性。当源对象键名与目标类属性名不一致时，就会出现这种不匹配的情况。
解决方案：利用解构赋值与重命名
为了解决上述问题，我们需要在将JSON数据传递给类构造函数之前，对数据进行预处理，将原始键名转换为目标类属性名。ES6的解构赋值（Destructuring Assignment）结合属性重命名功能，为我们提供了优雅且高效的解决方案。
其核心思想是：在从JSON对象中提取值时，同时为这些值指定新的变量名，这些变量名将与我们类的属性名相匹配。
var completeStock = [];
$.each(inputJson, function(index, value) {
// 使用解构赋值并重命名属性
// HS 的值赋给 model 变量
// __EMPTY 的值赋给 quantity 变量
// __EMPTY_1 的值赋给 type 变量
const { HS: model, __EMPTY: quantity, __EMPTY_1: type } = value;
// 然后创建一个新对象，其键名与 Stocks 类的属性名一致
// 并将这个新对象传递给 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.' }
]
*/通过const { HS: model, __EMPTY: quantity, __EMPTY_1: type } = value;这行代码，我们实现了以下目标：
- 从value（即当前的JSON对象）中提取了HS, __EMPTY, __EMPTY_1这三个属性的值。
- 同时，将HS的值赋给了名为model的新变量，__EMPTY的值赋给了quantity变量，__EMPTY_1的值赋给了type变量。
- 最终，我们创建了一个新的匿名对象{ model, quantity, type }，其键名与Stocks类的属性名完全匹配，然后将其传递给Stocks的构造函数。此时，Object.assign(this, data)就能正确地将这些匹配的属性赋给类实例。
完整示例代码
为了展示一个更现代的JavaScript实践，我们可以使用Array.prototype.map方法替代jQuery的$.each，以实现更简洁的代码：
// 输入的JSON数据
const 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) {
// 这里的 data 已经是经过重命名和整理的 { model, quantity, type } 对象
Object.assign(this, data);
}
// 可以在类中添加其他方法或数据清洗逻辑
cleanModel() {
this.model = this.model ? this.model.trim() : '';
}
}
// 使用 Array.prototype.map 进行数据转换
const completeStock = inputJson.map(value => {
// 解构赋值并重命名
const { HS: model, __EMPTY: quantity, __EMPTY_1: type } = value;
// 创建 Stocks 实例
const stockInstance = new Stocks({ model, quantity, type });
// 可以在这里或构造函数中进行额外的数据清洗或验证
stockInstance.cleanModel(); // 例如，清理 model 字段的空白字符
return stockInstance;
});
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.' }
]
*/扩展与注意事项
数据清洗与类型转换： 原始JSON数据中的值可能包含多余的空格（如HS和__EMPTY_1）或需要进行类型转换（如确保quantity是数字）。可以在类构造函数内部或映射逻辑中添加数据清洗和验证步骤。在上述示例中，我们添加了一个cleanModel方法来处理model字段的空格。
-
默认值与缺失属性： 如果原始JSON对象可能缺少某些键，解构赋值不会报错，但对应的变量将是undefined。为了健壮性，可以在解构时提供默认值，或在类构造函数中处理undefined值。
// 解构时提供默认值 const { HS: model = '', __EMPTY: quantity = 0, __EMPTY_1: type = 'Unknown' } = value; -
静态工厂方法： 对于更复杂的映射逻辑，可以考虑在Stocks类中定义一个静态工厂方法，负责从原始JSON对象创建Stocks实例。这可以使类的实例化逻辑更加封装和清晰。
class Stocks { // ... 属性和构造函数 ... static fromJson(jsonObj) { const { HS: model = '', __EMPTY: quantity = 0, __EMPTY_1: type = 'Unknown' } = jsonObj; const stock = new Stocks({ model, quantity, type }); stock.cleanModel(); // 也可以在这里调用清洗方法 return stock; } } const completeStock = inputJson.map(Stocks.fromJson); console.log(completeStock);这种方式将数据转换的职责从外部循环转移到了类内部，提高了代码的可维护性和可读性。
错误处理： 在实际应用中，数据可能不总是符合预期。考虑添加try-catch块或数据验证逻辑，以优雅地处理无效或缺失的数据。
总结
通过本文的讲解，我们了解了在JavaScript中将具有不匹配键名的JSON对象映射到类实例的挑战，以及如何利用ES6的解构赋值与属性重命名功能来克服这一挑战。这种方法不仅解决了键名不匹配的问题，还提供了一种清晰、简洁且易于维护的数据转换机制。结合Array.prototype.map和静态工厂方法等现代JavaScript特性，我们可以构建出更加健壮和可读的数据处理流程，有效提升代码质量。
