建议如何简化此if语句

Question

I have a code which is validating if all form fields are populated with data, but my form inputs are displayed dynamically based on this.id_company condition. As you can see if this.is_company equals TRUE then validation should also check if user has inserted this.taxNumber and this.copmany

isComplete: function () {
    if (this.is_company) {
        return this.firstName && this.lastName && this.email && this.password && this.address && this.postNumber
            && this.city && this.id_country && this.iAggre && this.taxNumber && this.company
    }
    return this.firstName && this.lastName && this.email && this.password && this.address && this.postNumber
        && this.city && this.id_country && this.iAggre;
}

I'm searching the best way to simplify my Javascript code. Can you guy please provide examples. Thank you

Answer 1

To easy, just use an or:

return (
   this.firstName && 
   this.lastName && 
   this.email && 
   this.password && 
   this.address && 
   this.postNumber && 
   this.city && 
   this.id_country && 
   this.iAggre && 
   (!this._isCompany || this.taxNumber && this.company)
);

To be read as and is not a company or has a taxNumber and a company property .

Answer 2

A nicer, easy to read version would be:

isComplete: function () {
    var baseCondition = this.firstName && this.lastName && this.email 
        && this.password && this.address && this.postNumber
        && this.city && this.id_country && this.iAggre

    var companyCondition = baseCondition && this.taxNumber && this.company;

    return this.is_company ? companyCondition : baseCondition;
}

Answer 3

You could group your fields in an array, and conditionally push the company and taxNumber fields:

var validate = function(isCompany) {
  var validateFields = [
    this.firstName,
    this.lastName,
    this.email,
    this.password,
    this.address,
    this.postNumber,
    this.city,
    this.id_country,
    this.iAggre
  ];

  if (isCompany) {
    validateFields.push(this.company, this.taxNumber);
  }

  return validateFields.find(f => !f) === undefined;
}

var isComplete = function() {
  return validate(this.is_company);
}

Answer 4

Best bet is to reduce each function down to its simplest form. @jonas-w was going in the right direction by computing values. The method name documents what the outcome means, and makes the conditional easier to understand.

You can always make isCompanyComplete() and isPersonComplete() private methods if you don't want to expose them.

Spreading the logical operators ( && ) over separate lines makes the statement much more readable.

Splitting the ternary statement across separate lines also makes it clear which parts apply to logically true or false.

Avoid inverting logic in conditions ( !this.is_company ).

 class Form { isPersonComplete() { return !!( this.firstName && this.lastName && this.email && this.password && this.address && this.postNumber && this.city && this.id_country && this.iAgree ); } isCompanyComplete() { return !!( this.isPersonComplete() && !!this.taxNumber && !!this.company ); } isComplete() { return this.is_company ? this.isCompanyComplete() : this.isPersonComplete(); } } const form = new Form() console.log( 'Person: ' + form.isPersonComplete(), 'Company: ' + form.isCompanyComplete(), 'Completed: ' + form.isComplete() ); form.firstName = 'John'; form.lastName = 'Smith'; form.email = 'john@smith.co'; form.password = 'somesecret'; form.address = '123 main street, anywhere'; form.postNumber = '12345'; form.city = 'Metropolis'; form.id_country = 1; form.iAgree = true; console.log( 'Person: ' + form.isPersonComplete(), 'Company: ' + form.isCompanyComplete(), 'Completed: ' + form.isComplete() ); form.is_company = true; form.taxNumber = 12345; form.company = 'John Smith & Co'; console.log( 'Person: ' + form.isPersonComplete(), 'Company: ' + form.isCompanyComplete(), 'Completed: ' + form.isComplete() ); 

Answer 5

That this question is "primarily opinion-based", etc is already established, so what the hell, here's another suggestion:

 function form() { this.vld = { fields: ["firstName", "lastName", "email", "password", "address", "postNumber", "city", "id_country", "iAggre"], check: arr => !arr.some(el => !this[el]), isComplete: () => this.vld.check(this.vld.fields) && (!this.is_company || this.vld.check(["taxNumber", "company"])) } } var stuff = new form(); stuff.firstName = "Alice"; stuff.lastName = "Bob"; stuff.email = "alice@bob.com"; stuff.password = "12abc123"; stuff.address = "123 Main St"; stuff.postNumber = "12345"; stuff.city = "Springfield"; stuff.id_country = 1; console.log(false, stuff.vld.isComplete()); stuff.iAggre = true; console.log(true, stuff.vld.isComplete()); stuff.is_company = true; stuff.taxNumber = "123456789"; console.log(false, stuff.vld.isComplete()); stuff.company = "Moe's"; console.log(true, stuff.vld.isComplete()); 

This method can potentially be optimized by grabbing the names of the input fields from the form itself, which would avoid restating all fields explicitly.

Answer 6

Does this work for you?

isComplete: function () { 
    let result = this.firstName && this.lastName && this.email && this.password && this.address && this.postNumber && this.city && this.id_country && this.iAggre;
    if (this.is_company) result += this.taxNumber && this.company;
    return result; 
}