JavaScript：批量重构对象数组键名——移除数字后缀

在前端开发和数据处理中，我们经常会遇到需要对数据结构进行转换的场景。一个常见的例子是，当数据源（例如表单生成器或后端api）返回的对象键名带有动态后缀（如 -0, -1, -2）时，为了统一数据模型或简化后续操作，我们需要移除这些后缀。本教程将介绍一种优雅且高效的 es6+ 方法来解决这一问题。

问题描述

假设我们有一个包含多个对象的数组，每个对象的键名都可能包含一个形如 -数字 的后缀，例如：

const originalArray = [
    { 'contactTypeField-0': 'Index0', 'firstNameField-0': '0', 'uniqueRowField-0': 0 },
    { 'contactTypeField-1': 'Index1', 'firstNameField-1': '1', 'uniqueRowField-1': 0 }
];

我们的目标是将这些键名转换为不带数字后缀的形式，例如 contactTypeField、firstNameField 等，最终得到以下结构：

[
    { contactTypeField: 'Index0', firstNameField: '0', uniqueRowField: 0 },
    { contactTypeField: 'Index1', firstNameField: '1', uniqueRowField: 0 }
]

解决方案：ES6+ 方法

解决此问题的最佳实践是利用 JavaScript ES6+ 提供的 Array.prototype.map、Object.entries、String.prototype.replace 和 Object.fromEntries 等方法。这种组合方式不仅代码简洁，而且遵循了不可变数据原则，即不会修改原始数据。

百度智能云·曦灵

百度旗下的AI数字人平台

83

查看详情

核心思路

1. 遍历数组： 使用 Array.prototype.map 遍历原始对象数组，对每个对象进行转换，并返回一个新数组。
2. 获取键值对： 对于数组中的每个对象，使用 Object.entries() 将其转换为一个由 [key, value] 对组成的数组。
3. 转换键名： 遍历这些 [key, value] 对，使用 String.prototype.replace() 配合正则表达式来移除键名中的数字后缀。
4. 重构对象： 使用 Object.fromEntries() 将转换后的 [newKey, value] 对数组重新组合成一个新的对象。

示例代码

const originalArray = [
    { 'contactTypeField-0': 'Index0', 'firstNameField-0': '0', 'uniqueRowField-0': 0 },
    { 'contactTypeField-1': 'Index1', 'firstNameField-1': '1', 'uniqueRowField-1': 0 }
];

const transformedArray = originalArray.map(obj => {
    // 1. 将对象转换为 [key, value] 对的数组
    return Object.fromEntries(
        Object.entries(obj).map(([key, value]) => {
            // 2. 使用正则表达式移除键名末尾的 "-数字" 后缀
            // /-\d+$/ 匹配：
            //   - "-" 字面量连字符
            //   - "\d+" 一个或多个数字
            //   - "$" 字符串的结尾
            const newKey = key.replace(/-\d+$/, '');
            // 3. 返回新的 [newKey, value] 对
            return [newKey, value];
        })
    );
});

console.log(transformedArray);
/*
输出:
[
  { contactTypeField: 'Index0', firstNameField: '0', uniqueRowField: 0 },
  { contactTypeField: 'Index1', firstNameField: '1', uniqueRowField: 0 }
]
*/

代码详解

• originalArray.map(obj => { ... }): map 方法会遍历 originalArray 中的每一个对象 obj，并对它执行一个回调函数，然后将回调函数的返回值组成一个新的数组。
• Object.entries(obj): 这个方法接收一个对象作为参数，并返回一个包含该对象所有 [key, value] 对的数组。例如，Object.entries({ a: 1, b: 2 }) 会返回 [['a', 1], ['b', 2]]。
• .map(([key, value]) => { ... }): 再次使用 map 方法，这次是遍历 Object.entries(obj) 返回的 [key, value] 对数组。通过解构赋值 [key, value] 可以方便地访问当前的键和值。
• key.replace(/-\d+$/, ''): 这是核心的键名转换逻辑。
  • key 是当前的键名字符串。
  • replace() 方法用于替换字符串中匹配正则表达式的部分。
  • /-\d+$/ 是一个正则表达式：
    • -：匹配字面量字符连字符。
    • \d+：匹配一个或多个数字（\d 代表任意数字，+ 代表一个或多个）。
    • $：匹配字符串的末尾。
  • ''：表示将匹配到的部分替换为空字符串，从而达到移除的效果。
• return [newKey, value];: 在内部的 map 回调中，我们返回一个包含新键名 newKey 和原始值 value 的数组。
• Object.fromEntries(...): 这个方法是 Object.entries() 的逆操作。它接收一个由 [key, value] 对组成的数组，并将其转换回一个新的对象。

注意事项

1. 不可变性： 上述解决方案通过 map 和 Object.fromEntries 创建了新的数组和对象，而没有直接修改原始数据。这在函数式编程和React/Vue等框架中是推荐的做法，有助于避免副作用，提高代码的可预测性。
2. 正则表达式的灵活性： 示例中使用的正则表达式 -/d+$/ 专门用于匹配末尾的 -数字 模式。如果你的后缀模式不同（例如 _ID、[index]），你需要相应地调整正则表达式。
   • 例如，如果后缀是 _id，可以使用 key.replace(/_id$/, '')。
   • 如果后缀是 [数字]，可以使用 key.replace(/\[\d+\]$/, '')。
3. 性能考虑： 对于包含数千甚至数万个对象的超大型数组，这种链式操作可能会有一定的性能开销。但在大多数Web应用场景中，这种开销通常可以忽略不计。如果遇到极端性能瓶颈，可以考虑使用传统的 for...of 循环手动构建新对象，但代码的可读性和简洁性会略有下降。
4. 键名冲突： 在极少数情况下，如果移除后缀后可能导致键名冲突（例如 field-0 和 field 同时存在，移除后缀后都变成 field），你需要根据业务逻辑决定如何处理。本方案会直接覆盖，保留最后一个处理的同名键的值。

总结

通过利用 Array.prototype.map、Object.entries、String.prototype.replace 和 Object.fromEntries 这组强大的 ES6+ 特性，我们可以优雅且高效地解决对象数组键名转换的问题。这种方法不仅代码简洁、易于理解，而且符合现代JavaScript开发中推崇的不可变数据原则，是处理此类数据转换任务的推荐实践。掌握这些方法将大大提升你处理复杂数据结构的能力。

立即学习“Java免费学习笔记（深入）”；

以上就是JavaScript：批量重构对象数组键名——移除数字后缀的详细内容，更多请关注php中文网其它相关文章！