js如何更换json的键名

JavaScript 实战：轻松更换 JSON 对象的键名

在 JavaScript 开发中，我们经常与 JSON（JavaScript Object Notation）数据打交道，无论是从 API 获取响应，还是处理本地存储的数据，我们总会遇到需要修改数据结构的情况，一个非常常见的操作就是更换 JSON 对象中的键名（key），后端返回的命名风格是下划线（snake_case），而我们的前端代码习惯使用驼峰命名法（camelCase）。

本文将详细介绍几种在 JavaScript 中更换 JSON 对象键名的方法，从基础的循环到现代函数式编程，并分析各自的优缺点，助你选择最适合的方案。

准备工作：一个示例 JSON 对象

让我们以一个用户信息对象为例,假设这是从后端获取的数据，键名使用下划线命名法：

const userJson = {
  user_id: 101,
  user_name: "张三",
  contact_info: {
    email_address: "zhangsan@example.com",
    phone_number: "138-8888-8888"
  },
  is_active: true
};

我们的目标是将它转换为以下使用驼峰命名法的格式：

const camelCaseUser = {
  userId: 101,
  userName: "张三",
  contactInfo: {
    emailAddress: "zhangsan@example.com",
    phoneNumber: "138-8888-8888"
  },
  isActive: true
};

使用 for...in 循环（基础方法）

这是最直观、最基础的方法，我们遍历对象的每一个键，然后创建一个新对象，将旧键名映射到新键名。

核心思路：

1. 创建一个空对象 newObject 用于存储结果。
2. 使用 for...in 循环遍历原对象 obj 的所有自有属性。
3. 在循环内部,将旧键名转换为新的键名。
4. 使用计算属性名（[newKey]）将原值赋给新对象。

function convertKeysToCamelCase(obj) {
  const newObj = {};
  for (const key in obj) {
    // 使用 hasOwnProperty 确保只处理对象自身的属性，而不是原型链上的
    if (obj.hasOwnProperty(key)) {
      // 将下划线命名转换为驼峰命名
      const newKey = key.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
      newObj[newKey] = obj[key];
    }
  }
  return newObj;
}
const camelCaseUser = convertKeysToCamelCase(userJson);
console.log(camelCaseUser);

优点：

• 易于理解：逻辑清晰，非常适合初学者。
• 兼容性好：在任何支持 ES5 的 JavaScript 环境中都能运行。

缺点：

• 代码冗长：需要手动创建新对象和循环。
• 不处理嵌套对象：此方法只会转换顶层键名，对于 contact_info 这样的嵌套对象无能为力，需要递归来处理。

使用 Object.keys() + reduce()（函数式方法）

这是一种更现代、更函数式的方法。Object.keys() 获取对象所有键的数组，reduce() 则用于将数组“缩减”为单个值（在这里是一个新对象）。

核心思路：

1. 使用 Object.keys() 获取原对象的所有键。
2. 使用 reduce() 方法遍历这个键数组。
3. 在 reduce 的回调函数中，完成键名转换和值的赋值。

function convertKeysWithReduce(obj) {
  return Object.keys(obj).reduce((newObj, key) => {
    // 计算新的键名
    const newKey = key.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
    // 将新键值对添加到累加器对象中
    newObj[newKey] = obj[key];
    return newObj;
  }, {}); // {} 是 reduce 的初始值，即 newObject
}
const camelCaseUser = convertKeysWithReduce(userJson);
console.log(camelCaseUser);

优点：

• 代码简洁：相比 for...in，代码量更少，更具表现力。
• 函数式风格：不直接修改原对象，符合函数式编程的理念。
• 可读性强：reduce 的意图非常明确：将一个数组转换成一个对象。

缺点：

• 对初学者可能不友好：reduce 的概念比 for 循环稍复杂。
• 同样,不处理嵌套对象。

递归处理（处理嵌套对象）

JSON 对象结构复杂，包含多层嵌套，那么前两种方法就不够用了，这时，我们需要使用递归来解决问题。

核心思路： 创建一个函数，它能处理当前层级的键名转换，如果遇到一个值仍然是对象，就递归调用自身来处理这个嵌套对象。

function deepConvertKeys(obj) {
  // 处理非对象或 null 的情况（如字符串、数字、布尔值）
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  const newObj = Array.isArray(obj) ? [] : {}; // 同时支持数组和对象
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 转换键名
      const newKey = key.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
      // 递归处理值
      newObj[newKey] = deepConvertKeys(obj[key]);
    }
  }
  return newObj;
}
const deeplyConvertedUser = deepConvertKeys(userJson);
console.log(deeplyConvertedUser);

优点：

• 功能强大：能够处理任意层级的嵌套对象和数组。
• 通用性强：是处理复杂数据结构转换的利器。

缺点：

• 代码复杂度较高：需要理解递归的逻辑。
• 性能考量：对于极深或极大的对象，递归可能会导致调用栈溢出（Maximum call stack size exceeded），但在实际应用中这种情况较为罕见。

使用 Lodash 等工具库（生产环境推荐）

在实际项目中,我们通常会使用像 Lodash 这样功能强大的工具库，Lodash 提供了专门用于对象操作的方法，_.mapKeys 就是为这个场景而生的。

核心思路： 直接使用 _.mapKeys，传入原对象、一个转换函数（或一个对象映射关系）来生成新对象。

安装 Lodash

npm install lodash
# 或
yarn add lodash

使用 _.mapKeys

const _ = require('lodash');
// 简单的转换函数
function convertKey(key) {
  return key.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
}
// _.mapKeys 会遍历原对象的每个键，将键传入转换函数，然后用返回的值作为新键
const camelCaseUser = _.mapKeys(userJson, convertKey);
console.log(camelCaseUser);

优点：

• 代码极简：一行代码搞定，可读性极高。
• 功能稳定可靠：Lodash 经过充分测试，性能和健壮性都有保障。
• 链式调用：可以轻松与其他 Lodash 方法结合使用，如 _.mapValues。
• 支持复杂映射：可以直接传入一个对象来定义精确的键名映射关系，而不仅仅是正则替换。

缺点：

• 引入外部依赖：需要为项目增加一个依赖包（虽然 Lodash 支持按需引入， tree-shaking）。

总结与选择

如何选择？

• 如果你是初学者或正在做简单的练习：从 for...in 循环开始，它能帮你最直观地理解原理。
• **如果你在现代前端项目中工作，处理单层