JavaScript 中 Proxy 怎么使用代理对象实现属性的自动转换与驼峰蛇形命名互转-js教程-PHP中文网

Proxy 可拦截对象读写操作，通过 get/set 陷阱实现蛇形与驼峰命名自动转换：内部统一存蛇形（如 user_name），对外暴露驼峰接口（如 userName）；借助 toSnake/toCamel 工具函数动态映射，支持双向兼容与深层代理扩展。

javascript 中 proxy 怎么使用代理对象实现属性的自动转换与驼峰蛇形命名互转

Proxy 可以拦截对象的读写操作，在 get 和 set 陷阱中动态处理属性名，实现蛇形命名（user_name）与驼峰命名（userName）的自动转换。关键在于统一内部存储用蛇形，对外暴露驼峰接口，或反之。

核心思路：统一内部命名规范 + 动态映射

推荐将原始数据（如后端返回的蛇形字段）存为私有属性（如 _data），再通过 Proxy 的 get/set 拦截，把用户访问的驼峰名自动转为蛇形去操作真实数据。这样既保持外部使用习惯，又不侵入原始数据结构。

例如：obj.userName 实际读取的是 _data.user_name；obj.userId 对应 _data.user_id。

工具函数：驼峰 ⇄ 蛇形互转

先封装两个轻量转换函数，用于在 Proxy 中复用：

（可直接复制使用）

Nginx Reverse Proxy

配置 Nginx 反向代理，实现域名绑定。用户说“绑定域名”“配置 Nginx”“反向代理”时触发，将域名绑定到指定 IP:端口。

下载

// 驼峰转蛇形（支持连续大写如 XMLHttp → xml_http）
function toSnake(str) {
  return str.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
}

// 蛇形转驼峰（忽略非字母数字下划线，首字母小写）
function toCamel(str) {
  return str.replace(/_([a-z])/g, (m, p1) => p1.toUpperCase());
}

创建代理：自动转换读写属性名

以下是一个完整可运行示例，代理一个蛇形数据对象，使其支持驼峰访问：

function createCamelProxy(data) {
  const handler = {
    get(target, prop) {
      if (typeof prop === 'string' && !prop.startsWith('_')) {
        const snake = toSnake(prop);
        return target[snake];
      }
      return target[prop];
    },
    set(target, prop, value) {
      if (typeof prop === 'string' && !prop.startsWith('_')) {
        const snake = toSnake(prop);
        target[snake] = value;
        return true;
      }
      target[prop] = value;
      return true;
    },
    has(target, prop) {
      if (typeof prop === 'string' && !prop.startsWith('_')) {
        return prop in target || toSnake(prop) in target;
      }
      return prop in target;
    }
  };
  return new Proxy(data, handler);
}

// 使用示例
const raw = { user_name: 'Alice', user_age: 28, is_active: true };
const user = createCamelProxy(raw);

console.log(user.userName);   // 'Alice'
console.log(user.userAge);    // 28
console.log(user.isActive);   // true

user.userId = 1001;           // 写入 raw.user_id = 1001
console.log(raw.user_id);     // 1001