javascript - 是否有 "Vue way"用于检查 if/else 语句以外的空字符串变量？

Question

我正在学习如何使用 Vue，但无法全神贯注于“vue”做事的方式。

是否有一个 Vue 函数或方法可以让我不必编写那么多语句？

    this.catArr = []

    if (cat === 'All Modules') {
      if (this.assetType !== '') {
        this.catArr.push(this.assetType)
      }
      if (this.assetFormat !== '') {
        this.catArr.push(this.assetFormat)
      }
      if (this.assetUse !== '') {
        this.catArr.push(this.assetUse)
      }
      this.catArr.push(this.assetMod)
    } else if (cat === 'All Types') {
      if (this.assetMod !== '') {
        this.catArr.push(this.assetMod)
      }
      if (this.assetFormat !== '') {
        this.catArr.push(this.assetFormat)
      }
      if (this.assetUse !== '') {
        this.catArr.push(this.assetUse)
      }
      this.catArr.push(this.assetType)
    } else {
      if (this.assetMod !== '') {
        this.catArr.push(this.assetMod)
      }
      if (this.assetType !== '') {
        this.catArr.push(this.assetType)
      }
      if (this.assetFormat !== '') {
        this.catArr.push(this.assetFormat)
      }
      if (this.assetUse !== '') {
        this.catArr.push(this.assetUse)
      }
    }

Answer 1

在 vanilla JS 中，很容易通过编写 DRY 来实现。代码。预先定义所有属性，定义属性以显式测试每个类别，当需要创建数组时，只需遍历属性名称并相应地测试它们:

const props = ['assetType', 'assetFormat', 'assetUse', 'assetMod'];
const catPropsNotToTest = {
  'All Modules': ['assetMod'],
  'All Types': ['assetType'],
  default: [],
};

// ...

const propsNotToTest = catPropsNotToTest[cat] ? catPropsNotToTest[cat] : catPropsNotToTest.default;
this.catArr = props.reduce((propArr, propName) => {
  if (propsNotToTest.includes(propName)) propArr.push(this[propName]);
  else if (this[propName] !== '') propArr.push(this[propName]);
  return propArr;
}, []);