如何创建可生成带可变键对象的JavaScript类并修复解构报错

代码报错和输出不符合预期来自三个明确的写法错误：

• 三个权限设置方法中误用数组解构语法[key] = { 权限字段: value }：普通对象不是可迭代结构，直接对对象做数组解构就会触发你看到的TypeError: Invalid attempt to destructure non-iterable instance报错，你实际要做的是修改实例上对应键的权限属性值，不是解构赋值
• setRoleDeleteAccess方法未声明key形参，方法内直接引用key会触发未定义引用错误
• 所有权限设置方法都没有通过this指向类实例本身，根本没操作到实例上存储的权限对象

class ACL {
    constructor(key){
        // 初始化传入key对应的默认权限
        this[key] = {
            read: false,
            write: false,
            delete: false
        }
    }

    setRoleReadAccess(key, value){
        // 通过this访问实例上对应key的权限对象，修改read字段
        this[key].read = value
    }
    setRoleWriteAccess(key, value){
        this[key].write = value
    }
    setRoleDeleteAccess(key, value){
        // 补全缺失的key形参
        this[key].delete = value
    }
}

const userACL = new ACL("1234");
userACL.setRoleReadAccess("1234", true);
userACL.setRoleWriteAccess("1234", true);
console.log(userACL);

执行代码后控制台输出和预期完全一致：

ACL {
  "1234": {
    read: true,
    write: true,
    delete: false
  }
}

拓展优化：如果后续需要给初始化时不存在的角色key设置权限，可以在每个set方法开头加判断，若this[key]不存在就先初始化默认权限对象，避免读取undefined属性报错。

内容的提问来源于stack exchange，提问作者Avinash A