js根据预设条件定义数组元素

前言

开发中，遇到过这样的情况，重用程度较高的组件的数组属性，在不同的重用的场景下，需增减一些元素

一、示例

let compId // 组件标识：'comp1', 'comp2', 'comp3'...
let arr = [
  { label: 'Name', prop: 'name' },
  { label: 'Age', prop: 'age' },         // 组件3中移除
  { label: 'Gender', prop: 'gender' },
  { label: 'Tel', prop: 'tel' },         // 组件1、组件2中显示
  { label: 'Address', prop: 'address' }  // 组件1、组件2中显示
]

当上例中的需求不多时，直接操作数组即可。但此类需求很多时，代码可能变得臃肿、可读性差、难以维护。

例如，假设组件3、组件4需要在 Gender 后插入一条数据，但因为组件3中不显示 Age ，导致如果先处理 Age 这条数据（移除），其插入的 index 分别为 2、3，否则为 3。当然，可以先获取 Gender 的 index，再插入。此类逻辑一多，这工作量，没人能忍得了。这样的代码能让你舒心吗？需求经常变的话，能轻松跟进吗？

二、解决方案

不另写手动插入/移除数据的代码，将所有元素都放在数组中，根据预设条件生成元素

1、立即执行函数 & 数组解构

let compId
let arr = [
  { label: 'Name', prop: 'name' },
  // 组件3中移除Gender
  ...(() => 
    return compId !== 'comp3' ? [{ label: 'Age', prop: 'age' }] : []
  })(),
  { label: 'Gender', prop: 'gender' },
  // 组件1、组件2中显示Tel、Address
  ...(() => 
    return ['comp1','comp2'].includes(compId) ? [
      { label: 'Tel', prop: 'tel' },
      { label: 'Address', prop: 'address' }
    ] : []
  })()
]

有点丑，好在可以简化下。既然返回的是一个表达式，那直接用圆括号取代：

let compId
let arr = [
  { label: 'Name', prop: 'name' },
  // 组件3中移除Gender
  ...(compId !== 'comp3' ? [{ label: 'Age', prop: 'age' }] : []),
  { label: 'Gender', prop: 'gender' },
  // 组件1、组件2中显示Tel、Address
  ...(['comp1','comp2'].includes(compId) ? [
    { label: 'Tel', prop: 'tel' },
    { label: 'Address', prop: 'address' }
  ] : [])
]

2、判断 & 结果筛选

数组解构的好处是不产生空值，那如果过滤下结果，也可不用解构。三元运算符或短路运算符均可

let compId
let arr = [
  { label: 'Name', prop: 'name' },
  // 组件3中移除Gender
  compId !== 'comp3' && { label: 'Age', prop: 'age' },
  { label: 'Gender', prop: 'gender' },
  // 组件1、组件2中显示Tel、Address
  ['comp1','comp2'].includes(compId) && { label: 'Tel', prop: 'tel' },
  ['comp1','comp2'].includes(compId) && { label: 'Address', prop: 'address' }
].filter(Boolean)

这种写法在针对单个元素时会更简洁一些，这两种方法可以取其一，也可结合使用

总结

期待更简洁的方案，感觉不够直观，但至少它的代码量及工作量只是随着业务需求线性增加的，且无需考虑使用场景等带来的额外约束

请配上必要的注释，以免别人接手后一脸问号

如果需要在不同场景下显示出不同的顺序，那就需要再额外处理了