在处理从外部源获取或动态生成的数据时，我们经常会遇到对象数组的键名带有不规则或动态后缀的情况。例如，firstnamefield-0、contacttypefield-1等。为了后续的数据处理和统一接口，通常需要将这些键名标准化，移除其后的动态后缀（如-0, -1）。本教程将展示一种利用es6+特性实现这一目标的高效方法。
1. 问题场景描述
假设我们有一个包含多个对象的数组，每个对象内部的键名都可能包含一个形如-数字的后缀，如下所示：
const originalArray = [
{ "contactTypeField-0": "Index0", "firstNameField-0": "0", "uniqueRowField-0": 0 },
{ "contactTypeField-1": "Index1", "firstNameField-1": "1", "uniqueRowField-1": 0 }
];我们的目标是将这些键名清理为contactTypeField、firstNameField和uniqueRowField，得到以下期望输出：
[
{ contactTypeField: "Index0", firstNameField: "0", uniqueRowField: 0 },
{ contactTypeField: "Index1", firstNameField: "1", uniqueRowField: 0 }
]2. ES6+解决方案核心思路
解决此问题的关键在于对数组中的每个对象进行转换，并且在转换过程中，修改每个对象的键名。我们将利用以下几个ES6+特性：
- Array.prototype.map(): 用于遍历数组中的每个元素，并返回一个新数组，新数组的元素是原数组元素经过回调函数处理后的结果。这确保了原始数组的不可变性。
- Object.entries(): 将一个对象转换为一个由其自身可枚举的字符串键属性的[key, value]对组成的数组。
- String.prototype.replace(): 用于在字符串中查找匹配的模式，并用替换字符串替换该模式。这里我们将使用正则表达式来匹配并移除键名后缀。
- Object.fromEntries(): 作为Object.entries()的逆操作，它将一个[key, value]对的数组转换回一个新对象。
3. 实现步骤与示例代码
下面是具体的实现步骤和相应的JavaScript代码：
立即学习“Java免费学习笔记（深入）”；
步骤一：遍历对象数组
使用Array.prototype.map()方法遍历originalArray中的每一个对象。
const res = originalArray.map(o => {
// 对每个对象 'o' 进行处理
// ...
});步骤二：获取对象的键值对
对于map回调函数中的每一个对象o，使用Object.entries(o)将其转换为一个[key, value]对的数组。
const entries = Object.entries(o); // 例如：[["contactTypeField-0", "Index0"], ["firstNameField-0", "0"], ...]
步骤三：修改键名
对entries数组中的每个[key, value]对，再次使用map方法，但这次是针对键名k进行修改。我们将使用String.prototype.replace()方法结合正则表达式-\d+$来移除后缀。
-
正则表达式 -\d+$ 解释:
- -: 匹配字面字符连字符。
- \d+: 匹配一个或多个数字（\d表示数字，+表示一个或多个）。
- $: 匹配字符串的结尾。
- 这个正则表达式的含义是：匹配字符串末尾的连字符后跟着的一个或多个数字。
const cleanedEntries = entries.map(([k, v]) => [k.replace(/-\d+$/, ''), v]); // 例如：[["contactTypeField", "Index0"], ["firstNameField", "0"], ...]
步骤四：重建对象
最后，使用Object.fromEntries()将修改后的cleanedEntries数组转换回一个新的对象。
const newObject = Object.fromEntries(cleanedEntries);
完整代码示例
将上述步骤整合起来，我们得到以下简洁高效的ES6+解决方案：
const originalArray = [
{ "contactTypeField-0": "Index0", "firstNameField-0": "0", "uniqueRowField-0": 0 },
{ "contactTypeField-1": "Index1", "firstNameField-1": "1", "uniqueRowField-1": 0 }
];
const cleanedArray = originalArray.map(o =>
Object.fromEntries(
Object.entries(o).map(([key, value]) => [key.replace(/-\d+$/, ''), value])
)
);
console.log(cleanedArray);
/*
输出:
[
{ contactTypeField: 'Index0', firstNameField: '0', uniqueRowField: 0 },
{ contactTypeField: 'Index1', firstNameField: '1', uniqueRowField: 0 }
]
*/4. 注意事项与扩展
- 不可变性: Array.prototype.map() 和 Object.fromEntries() 都是创建新数据结构的方法，这意味着原始的 originalArray 及其内部的对象不会被修改。这在函数式编程和避免副作用方面是非常有益的。
- 正则表达式的灵活性: 如果键名后缀的模式不同，例如是_id、_v1等，你可以相应地调整正则表达式。例如，要移除_v和任意数字，可以使用/_v\d+$/。
- 性能考量: 对于包含大量对象且每个对象有大量键的超大型数组，这种方法会涉及多次迭代和对象创建。在绝大多数实际应用中，这种性能开销是可接受的。如果遇到极端性能瓶颈，可能需要考虑更底层的循环优化，但这通常是不必要的。
- 错误处理: 本方案假设所有键名都符合预期模式或不需要处理。如果存在不符合模式的键名，replace方法不会对其进行修改。如果需要更严格的校验或错误处理，可以在map回调中添加额外的逻辑。
5. 总结
通过巧妙地结合Array.prototype.map()、Object.entries()、String.prototype.replace()和Object.fromEntries()这些现代JavaScript特性，我们可以以一种声明式、高效且易于理解的方式，批量清理对象数组中带有动态后缀的键名。这种方法不仅提升了代码的简洁性，也符合现代JavaScript开发的最佳实践，是处理此类数据转换问题的推荐方案。
