如何使用扩展语法 es6 进行简化

Posted

技术标签:

【中文标题】如何使用扩展语法 es6 进行简化【英文标题】:How to simplify with spread syntax es6 【发布时间】:2018-05-01 06:29:56 【问题描述】:

如何简化代码,我尝试生成对象并调用每个更改方法并依赖于参数(newValues)我更改了一些字段,似乎我有重复的代码,如何避免这种情况?我应该使用一些更困难的方法来避免传播语法

const formName = 
    fieldRange: 'miConfiguration.fieldRange',
    defaultTimeout: 'miConfiguration.doorConfiguration.defaultTimeout',
    standAlone: 'miConfiguration.doorConfiguration.standAlone',
    overrideTimeout: 'miConfiguration.doorConfiguration.overrideTimeout',
    inputMode: 'miConfiguration.doorConfiguration.inputMode',
    stopMi: 'miConfiguration.doorConfiguration.stopMi',
    activeLow: 'miConfiguration.doorConfiguration.activeLow',
    enableDualTechnology: 'miConfiguration.enableDualTechnology',
    passageName: 'miConfiguration.passageName',


let fieldRange, defaultTimeout, standAlone, overrideTimeout, inputMode, stopMi, activeLow, enableDualTechnology, passageName = formName

let configurationsMi = 
    [passageName]:  null,

    [fieldRange]: null,
    [activeLow]: false,
    [standAlone]: null,
    [defaultTimeout]: null,
    [overrideTimeout]: null,
    [inputMode]: null,
    [stopMi]: null,
    [enableDualTechnology]: false,


const defaultValues = 
    [MiConfigurationTypes.AccessPointOnly]: 
        ...configurationsMi,
        [fieldRange]:  MiFieldRanges.Disabled,
    ,

    [MiConfigurationTypes.WanderingDetection]: 
        ...configurationsMi,
        [fieldRange]:  MiFieldRanges.Small,
    ,
    [MiConfigurationTypes.MuteWanderingDetection]: 
        ...configurationsMi,
        [fieldRange]:  MiFieldRanges.Small,
    ,
    [MiConfigurationTypes.LockedWanderingControl]: 
        ...configurationsMi,
        [fieldRange]:  MiFieldRanges.Small,
        [standAlone]:  DoorStates.Locked,
        [defaultTimeout]: '00:00:03',
        [overrideTimeout]: '00:00:30',
        [inputMode]: InputModes.NotUsed,
        [stopMi]: false,
    ,
    [MiConfigurationTypes.OpenWanderingControl]: 
        ...configurationsMi,
        [fieldRange]:  MiFieldRanges.Small,
        [standAlone]:  DoorStates.Locked,
        [defaultTimeout]: '00:00:03',
        [overrideTimeout]: '00:00:30',
        [inputMode]: InputModes.NotUsed,
        [stopMi]: false,
    ,


 onChange=(e, newValue) => 
                console.log(defaultValues)
                Object.keys(defaultValues[newValue]).forEach(key => change(key, defaultValues[newValue][key]))
            

【问题讨论】:

您要避免的重复代码在哪里?你的意思是LockedWanderingControl/OpenWanderingControl 我有类似的对象 LockedWanderingControl/OpenWanderingControl 如何避免它。或者只是映射 tghrought 对象并仅更改字段取决于 (newValues(MiConfigurationTypes.OpenWanderingControl, ... etc) ) 【参考方案1】:

你可以把重复的部分放在一个额外的对象文字中——就像你已经对configurationsMi所做的那样——然后引用它。

const configurationsWanderingControl = 
    [fieldRange]:  MiFieldRanges.Small,
    [standAlone]:  DoorStates.Locked,
    [defaultTimeout]: '00:00:03',
    [overrideTimeout]: '00:00:30',
    [inputMode]: InputModes.NotUsed,
    [stopMi]: false,
;
const defaultValues = 
    …
    [MiConfigurationTypes.LockedWanderingControl]: 
        ...configurationsMi,
        ...configurationsWanderingControl,
    ,
    [MiConfigurationTypes.OpenWanderingControl]: 
        ...configurationsMi,
        ...configurationsWanderingControl,
    ,
;

当然,还有一种避免重复的默认方法:将重复的代码放入一个函数中(可能为不同的小细节带上参数),然后从多个地方调用它。

【讨论】:

以上是关于如何使用扩展语法 es6 进行简化的主要内容,如果未能解决你的问题,请参考以下文章

使用 ES6 扩展运算符反应道具语法 [重复]

JavaScript ES6 - 这是扩展语法还是休息语法?

ES6数组扩展

ES6数组扩展

如何使用扩展语法删除第一个数组元素

ES6对象的新功能与解构赋值