ES6环境下如何根据payload的mainValue取值条件构造JS对象

方案1：固定双值场景（最简洁） #

直接用ES6计算属性+三元表达式，一行完成条件判断，无需额外冗余代码：

const { mainValue } = payload;

const newObj = {
    propertyA: someValue,
    AttributeA: {
        [mainValue === 'optionA' ? 'newProp1' : 'newProp2']: {
            value: mainValue
        }
    }
};

方案2：多值可扩展场景 #

如果后续mainValue可能新增取值，建议提前维护映射表，提升可维护性：

const { mainValue } = payload;
// 统一维护枚举值到属性名的映射
const propMapping = {
    optionA: 'newProp1',
    optionB: 'newProp2'
};

const newObj = {
    propertyA: someValue,
    AttributeA: {
        [propMapping[mainValue]]: {
            value: mainValue
        }
    }
};

方案3：属性内部结构不同场景 #

如果newProp1和newProp2的内部结构不一致，可以直接映射整个属性对象：

const { mainValue } = payload;
const attrMapping = {
    optionA: { newProp1: { value: 'optionA', extraField: 'test1' } },
    optionB: { newProp2: { value: 'optionB', anotherField: 'test2' } }
};

const newObj = {
    propertyA: someValue,
    AttributeA: { ...attrMapping[mainValue] }
};

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