JavaScript中支持点访问同时取键值和子属性值用什么数据结构

云原生阿岚

2026-9-26

JavaScript嵌套属性双向返回数据结构实现方案

方法1：重写toString方法（固定层级场景适用）

针对你当前固定的层级结构，直接重写父级属性的toString方法即可满足需求：

const ROLES = {
  ADMIN: {
    TESTERS: "admin.testers",
    BOSS: "admin.boss",
    // 重写toString方法，访问ADMIN转字符串时返回对应值
    toString() {
      return "admin";
    }
  }
};

效果验证：

String(ROLES.ADMIN) 返回 "admin"
模板字符串 `${ROLES.ADMIN}` 返回 "admin"
ROLES.ADMIN.TESTERS 直接返回 "admin.testers"

如果需要做严格相等判断，使用String(ROLES.ADMIN) === 'admin'即可。

方法2：Proxy动态生成（多层级可扩展场景适用）

如果后续需要新增大量角色层级，手动写每个属性值效率太低，可以用Proxy递归生成路径，自动拼接属性名返回对应字符串：

// 递归生成带路径拼接能力的代理对象
function createRoleProxy(currentPath = '') {
  return new Proxy({}, {
    get(target, prop) {
      // 处理字符串转换调用
      if (prop === 'toString' || prop === 'valueOf') {
        return () => currentPath;
      }
      // 拼接下一层路径，属性名自动转小写
      const nextPath = currentPath ? `${currentPath}.${prop.toLowerCase()}` : prop.toLowerCase();
      return createRoleProxy(nextPath);
    }
  });
}

const ROLES = createRoleProxy();

效果验证：