如何最小化javascript中的if语句

时间:2017-01-22 14:45:41

标签: javascript reactjs meteor

我有一个非常长的if条件语句。我怎样才能最小化它? 这是我的代码,

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的refs。

3 个答案:

答案 0 :(得分:3)

您可以使用带有所需键的数组。然后只需一个循环进行分配和检查。

如果所有值都是真实的,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;

答案 1 :(得分: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;
};

答案 2 :(得分:1)

尝试使用

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();
        }
    }
}