如何最小化JavaScript中的if語句

Question

我有很長的if-condition語句。 如何最小化？ 這是我的代碼，

if(this.refs.category.value.trim() != "" &&
        this.refs.decisive_min.value.trim() != "" && this.refs.decisive_max.value.trim() != "" &&
        this.refs.interactive_min.value.trim() != "" && this.refs.interactive_max.value.trim() != "" &&
        this.refs.stabilizing_min.value.trim() != "" && this.refs.stabilizing_max.value.trim() != "" &&
        this.refs.cautious_min.value.trim() != "" && this.refs.cautious_max.value.trim() != "" &&
        this.refs.aesthetic_min.value.trim() != "" && this.refs.aesthetic_max.value.trim() != "" &&
        this.refs.economic_min.value.trim() != "" && this.refs.economic_max.value.trim() != "" &&
        this.refs.individualistic_min.value.trim() != "" && this.refs.individualistic_max.value.trim() != "" &&
        this.refs.political_min.value.trim() != "" && this.refs.political_max.value.trim() != "" &&
        this.refs.altruist_min.value.trim() != "" && this.refs.altruist_max.value.trim() != "" &&
        this.refs.regulatory_min.value.trim() != "" && this.refs.regulatory_max.value.trim() != "" &&
        this.refs.theoretical_min.value.trim() != "" && this.refs.theoretical_max.value.trim() != ""){
        var data = {category:this.refs.category.value.trim()};
        data.decisive_min = this.refs.decisive_min.value.trim();
        data.decisive_max = this.refs.decisive_max.value.trim();
        data.interactive_min = this.refs.interactive_min.value.trim();
        data.interactive_max = this.refs.interactive_max.value.trim();
        data.stabilizing_min = this.refs.stabilizing_min.value.trim();
        data.stabilizing_max = this.refs.stabilizing_max.value.trim();
        data.cautious_min = this.refs.cautious_min.value.trim();
        data.cautious_max = this.refs.cautious_max.value.trim();
        data.aesthetic_min = this.refs.aesthetic_min.value.trim();
        data.aesthetic_max = this.refs.aesthetic_max.value.trim();
        data.economic_min = this.refs.economic_min.value.trim();
        data.economic_max = this.refs.economic_max.value.trim();
        data.individualistic_max = this.refs.individualistic_max.value.trim();
        data.individualistic_min = this.refs.individualistic_min.value.trim();
        data.political_min = this.refs.political_min.value.trim();
        data.political_max = this.refs.political_max.value.trim();
        data.altruist_min = this.refs.altruist_min.value.trim();
        data.altruist_max = this.refs.altruist_max.value.trim();
        data.regulatory_min = this.refs.regulatory_min.value.trim();
        data.regulatory_max = this.refs.regulatory_max.value.trim();
        data.theoretical_min = this.refs.theoretical_min.value.trim();
        data.theoretical_max = this.refs.theoretical_max.value.trim();

我只想檢查表單中的所有值，如果它們都不是空字符串。

我在Meteor中使用了React JS的引用。

Answer 1

您可以使用帶有所需鍵的數組。 然后只需要分配和檢查一個循環。

如果所有值均為真，則data包含調整后的值，否則為undefined 。

var keys = ['category', 'decisive_min', 'decisive_max', 'interactive_min', 'interactive_max', 'stabilizing_min', 'stabilizing_max', 'cautious_min', 'cautious_max', 'aesthetic_min', 'aesthetic_max', 'economic_min', 'economic_max', 'individualistic_min', 'individualistic_max', 'political_min', 'political_max', 'altruist_min', 'altruist_max', 'regulatory_min', 'regulatory_max', 'theoretical_min', 'theoretical_max'],
    data = {};

data = keys.every(function (k) {
    return data[k] = this.refs[k].value.trim();
}, this) && data || undefined;

Answer 2

使用ES2015，您可以執行以下操作：

內部組件

const fields = getFields(this.refs);

if (checkFieldsNotEmpty(fields)) {
    const data = {category:this.refs.category.value.trim()};
    fields.forEach(field => {
      data[`${field.name}_min`] = field.valueMin;
      data[`${field.name}_max`] = field.valueMax;
    });
    // ...
}

在組件外部（可以是靜態方法）

const fieldNames = [
  'decisive',
  'interactive',
  'stabilizing',
  // ...
];

const getFields = refs => fieldNames.map(name => ({
    name,
    valueMin: refs[`${fieldName}_min`].value.trim(),
    valueMax: refs[`${fieldName}_max`].value.trim()
}));

const checkFieldsNotEmpty = fields => {
  for (let field of fields) {
    if (field.valueMin === '' || field.valueMax === '') {
          return false  
    }
  }
  return true;
};

Answer 3

嘗試使用

for (var property in this.refs) {
    if (this.refs.hasOwnProperty(property)) {
        // perform a null check
        if(this.refs[property]){
             //perform operaion
             data[property] = this.refs[property].trim();
        }
    }
}