一种简化JavaScript多个对象赋值的方式

问题是怎么出现的？

最近在写一个表单功能，表单中有一项协议选择，需求是通过选择不同协议来控制表单其他项的v-if，由于表单权限设计的数据类型为对象，因此通过权限对象的属性来操作，但是在写的过程中，发现属性比较多，每次选中一个协议，就要给权限对象初始化属性，然后再进行表单项控制

// 表单项权限属性
const formAuth: any = reactive({
    name: true,
    address: true,
    ip: true,
    port: true,
    bps: true,
    rs: true,
    protocols: true,
    compliant: true,
    videoStream: true,
    streamAddress: true,
    restVideo: true,
  });
// 匹配方式
 if (value === 'Pelco P' || value === 'Pelco D') {
      formAuth.name = true;
      formAuth.address = true;
      formAuth.ip = false;
      formAuth.port = false;
      formAuth.bps = false;
      formAuth.rs = false;
      formAuth.protocols = true;
      formAuth.compliant = false;
      formAuth.videoStream = true;
      formAuth.streamAddress = true;
      formAuth.restVideo = false;
    }

问题出现：属性值过多的时候，操作代码异常冗余，不便于维护

这样写的好处是直观，但是表单项增加时，代码会产生冗余，并且这样的增长不是单增长，复杂度=表单项多少+协议多少，后续的维护也相当复杂，要更改好几处地方，因此急需解决！！

解决问题：解决冗余的方式通过两个方面解决：1.对象属性遍历初始化；2.针对不同表单项显示项与未显示项的大小比对，操作比较小的一方

1.简化对象的初始化操作

每个协议选择后，为保证数据没有错误性，要先对数据进行初始化操作，这个过程本身是一个机械的重复的过程，因此可以通过遍历对象属性来操作，相比较第一种处理方式，简化了大量代码

 if (value === 'VISCA') {
      Object.keys(formAuth).forEach((item) => {
        formAuth[item] = true;
      });
      formAuth.ip = false;
      formAuth.port = false;
}

2.比对表单项显示与未显示大小

当选择某个协议后，这个协议所需要显示表单项如果小于表单项的总数，那可以初始化时对协议进行all false，然后对需要显示的属性再进行true显示操作

// 显示的表单项多于总量的一半，初始化所有项为true，再对不显示的项操作false隐藏
if (value === 'VISCA') {
      Object.keys(formAuth).forEach((item) => {
        formAuth[item] = true;
      });
      formAuth.ip = false;
      formAuth.port = false;
}
// 显示的表单项少于于总量的一半，初始化所有项为true，再对显示的项操作true显示
 if (value === 'Pelco P' || value === 'Pelco D') {
      Object.keys(formAuth).forEach((item) => {
        formAuth[item] = false;
      });
      formAuth.name = true;
      formAuth.address = true;
      formAuth.protocols = true;
      formAuth.videoStream = true;
      formAuth.streamAddress = true;
  }