在JavaScript开发中,我们经常会遇到对象数组的键名附带动态后缀的场景,比如后端接口返回的数据中,每个对象的键名都带上了随机生成的字符串或者时间戳后缀,这类数据如果直接用于前端渲染或者后续逻辑处理,会带来很多不必要的麻烦。使用ES6提供的新特性可以很高效地完成这类键名的清理工作。

常见动态后缀场景说明
动态后缀的常见形式有以下几种,不同形式的清理逻辑会有细微差别:
- 键名末尾带下划线加随机字符,比如
user_name_abc123、user_age_xyz789 - 键名末尾带时间戳,比如
order_id_1698765432、product_price_1698765432 - 键名中间或者末尾带固定格式的编号,比如
field_1_name、field_2_age
使用ES6方法清理键名的核心思路
核心逻辑是先确定要保留的基础键名前缀,再通过正则匹配把多余的动态后缀去掉,最后用ES6的map方法遍历对象数组,对每个对象的键名做替换处理,生成新的对象数组。
方案一:使用map+解构+正则替换
这种方法适合动态后缀格式比较固定的场景,比如后缀是下划线加随机字符的形式。
// 原始对象数组,键名带动态后缀
const originalArr = [
{ user_name_abc123: '张三', user_age_xyz789: 25 },
{ user_name_def456: '李四', user_age_uvw012: 30 }
];
// 定义正则匹配动态后缀,这里匹配下划线加6位及以上随机字符的后缀
const suffixRegex = /_[a-zA-Z0-9]{6,}$/;
// 使用map遍历数组,处理每个对象的键名
const cleanedArr = originalArr.map(item => {
const newObj = {};
// 遍历原对象的键名
for (const key in item) {
// 替换掉匹配到的动态后缀,得到基础键名
const newKey = key.replace(suffixRegex, '');
// 把新键值对放到新对象中
newObj[newKey] = item[key];
}
return newObj;
});
console.log(cleanedArr);
// 输出结果:[{ user_name: '张三', user_age: 25 }, { user_name: '李四', user_age: 30 }]
方案二:使用Object.entries+reduce处理
ES6的Object.entries可以把对象转换成键值对数组,配合reduce方法可以更简洁地完成键名替换。
const originalArr = [
{ order_id_1698765432: '1001', order_price_1698765432: 199 },
{ order_id_1698765433: '1002', order_price_1698765433: 299 }
];
// 匹配下划线加10位数字(时间戳)的后缀
const timeSuffixRegex = /_d{10}$/;
const cleanedArr = originalArr.map(item => {
return Object.entries(item).reduce((acc, [key, value]) => {
// 替换动态时间戳后缀
const newKey = key.replace(timeSuffixRegex, '');
acc[newKey] = value;
return acc;
}, {});
});
console.log(cleanedArr);
// 输出结果:[{ order_id: '1001', order_price: 199 }, { order_id: '1002', order_price: 299 }]
方案三:处理带编号的动态键名
如果动态后缀是中间的编号,比如field_1_name这种形式,只需要调整正则的匹配规则即可。
const originalArr = [
{ field_1_name: '测试1', field_1_value: 'val1' },
{ field_2_name: '测试2', field_2_value: 'val2' }
];
// 匹配下划线加单个数字的后缀(这里根据实际编号长度调整正则)
const numSuffixRegex = /_d_/;
const cleanedArr = originalArr.map(item => {
const newObj = {};
for (const key in item) {
// 把中间的编号部分去掉,比如field_1_name变成field_name
const newKey = key.replace(numSuffixRegex, '_');
newObj[newKey] = item[key];
}
return newObj;
});
console.log(cleanedArr);
// 输出结果:[{ field_name: '测试1', field_value: 'val1' }, { field_name: '测试2', field_value: 'val2' }]
不同方案的适用场景对比
| 方案 | 适用场景 | 优势 |
|---|---|---|
| map+遍历键名 | 后缀格式简单,需要兼容旧环境 | 逻辑直观,容易理解,兼容性较好 |
| Object.entries+reduce | 后缀格式固定,追求代码简洁 | 代码更短,函数式编程风格,可读性高 |
| 自定义正则匹配 | 后缀格式复杂,有多种不同形式 | 灵活度高,可以适配各种复杂的后缀规则 |
注意事项
在实际使用中需要注意几个问题:首先要确保正则的匹配规则准确,避免误替换掉正常的键名部分;其次如果对象数组中存在嵌套对象,需要递归处理嵌套层的键名;另外如果原对象有不可枚举的属性,遍历键名的时候可能不会处理到,需要根据实际情况调整遍历逻辑。
正则的编写是键名清理的核心,建议先在小范围数据上测试正则的匹配效果,确认没有问题之后再应用到整个数据集上,避免出现数据错误。
JavaScriptES6对象数组键名清理修改时间:2026-06-21 13:39:31