Matrix

Appearance

convertToCamelCase ​

描述 ​

递归将所有下划线方式的属性名替换为驼峰命名。该函数深度遍历对象和数组，将所有属性名从下划线命名转换为驼峰命名，常用于处理后端 API 返回的数据格式转换。

语法 ​

ts
convertToCamelCase<T = any>(data: T): T

参数 ​

  • data (T): 需要转换的数据，可以是对象、数组或原始值

返回值 ​

  • T: 转换后的数据，保持原始数据结构不变

转换规则 ​

函数会将属性名中的下划线后跟小写字母的模式转换为驼峰格式：

  • user_name → userName
  • email_address → emailAddress
  • created_at → createdAt

示例 ​

基本对象转换 ​

ts
import { convertToCamelCase } from '@fu/matrix';

const apiData = {
  user_name: 'John',
  email_address: 'john@example.com',
  created_at: '2023-01-01'
};

const result = convertToCamelCase(apiData);
console.log(result);
// => { userName: 'John', emailAddress: 'john@example.com', createdAt: '2023-01-01' }

数组转换 ​

ts
import { convertToCamelCase } from '@fu/matrix';

const userList = [
  { user_id: 1, user_name: 'Alice' },
  { user_id: 2, user_name: 'Bob' }
];

const result = convertToCamelCase(userList);
console.log(result);
// => [{ userId: 1, userName: 'Alice' }, { userId: 2, userName: 'Bob' }]

嵌套对象转换 ​

ts
import { convertToCamelCase } from '@fu/matrix';

const complexData = {
  user_info: {
    basic_info: {
      first_name: 'John',
      last_name: 'Doe'
    },
    contact_list: [
      { phone_number: '123-456-7890' }
    ]
  }
};

const result = convertToCamelCase(complexData);
console.log(result);
// => {
//   userInfo: {
//     basicInfo: {
//       firstName: 'John',
//       lastName: 'Doe'
//     },
//     contactList: [
//       { phoneNumber: '123-456-7890' }
//     ]
//   }
// }

API 数据处理 ​

ts
import { convertToCamelCase } from '@fu/matrix';

// 处理 API 响应数据
async function fetchUserData(userId: number) {
  const response = await fetch(`/api/users/${userId}`);
  const rawData = await response.json();
  
  // 转换为前端友好的驼峰格式
  const userData = convertToCamelCase(rawData);
  
  return userData;
}

// 使用示例
const user = await fetchUserData(123);
console.log(user.firstName); // 而不是 user.first_name

状态管理 ​

ts
import { convertToCamelCase } from '@fu/matrix';

// Redux reducer 示例
function userReducer(state = {}, action) {
  switch (action.type) {
    case 'FETCH_USER_SUCCESS':
      return {
        ...state,
        // 转换 API 数据为驼峰格式
        userData: convertToCamelCase(action.payload)
      };
    default:
      return state;
  }
}

配置对象转换 ​

ts
import { convertToCamelCase } from '@fu/matrix';

const serverConfig = {
  database_url: 'mongodb://localhost:27017',
  max_connections: 10,
  retry_attempts: 3,
  timeout_settings: {
    connection_timeout: 5000,
    query_timeout: 30000
  }
};

const clientConfig = convertToCamelCase(serverConfig);
console.log(clientConfig);
// => {
//   databaseUrl: 'mongodb://localhost:27017',
//   maxConnections: 10,
//   retryAttempts: 3,
//   timeoutSettings: {
//     connectionTimeout: 5000,
//     queryTimeout: 30000
//   }
// }

处理规则详解 ​

属性名转换 ​

  • 下划线转驼峰: user_name → userName
  • 多个下划线: user_profile_image_url → userProfileImageUrl
  • 保持已有驼峰: userName → userName（不变）
  • 以下划线开头: _private_field → _privateField

数据类型处理 ​

  • 对象: 递归转换所有属性名
  • 数组: 递归转换数组中的每个元素
  • 原始值: 直接返回（字符串、数字、布尔值等）
  • 特殊值: null、undefined、Date 等保持不变

深度遍历 ​

函数会递归处理所有嵌套的对象和数组，确保整个数据结构的一致性。

使用场景 ​

  • API 数据转换: 将后端 snake_case 数据转换为前端 camelCase
  • 配置文件处理: 转换配置对象的属性名格式
  • 数据库查询结果: 处理数据库返回的下划线格式数据
  • 第三方库集成: 统一不同库的数据格式

性能说明 ​

  • 时间复杂度: O(n) - 其中 n 是所有属性和值的总数
  • 空间复杂度: O(n) - 创建新的数据结构
  • 不可变性: 不修改原始数据，返回新对象

注意事项 ​

  • 函数会创建新的对象，不修改原始数据
  • 只转换对象的属性名，不转换属性值
  • 对于已经是驼峰命名的属性，保持不变
  • 原始值（非对象/数组）会直接返回

相关方法 ​

版本历史 ​

  • v1.4.0: 初始版本