本文将详细介绍如何在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 或其他数据转换工具库。
4. 总结
通过结合ES6的解构赋值和属性重命名语法，我们可以优雅而高效地解决JSON对象键名与目标类属性名不匹配的问题。这种方法不仅提高了代码的可读性和简洁性，也使得数据转换过程更加直观和易于维护。在处理结构化但键名不一致的JSON数据时，这是一种非常推荐的实践。
以上就是将JSON对象映射到具有不同键名的类属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/28572.html
微信扫一扫 
支付宝扫一扫 
