在 JavaScript 中编写更好的条件的技巧

如果您正在使用 JavaScript，您将编写大量涉及大量条件的代码。起初，条件句似乎很容易学习，但除了编写一些 if-else 语句之外，还有更多的东西。

面向对象的编程允许人们避免条件并用多态性和继承代替它们。你应该尽可能地遵循这些原则。但另一方面，由于各种原因，您最终可能会在代码中使用条件。本文的目的是帮助您组织条件语句。

使用条件编写代码的提示：

1. Array.includes：您可以对多个条件使用array.includes()方法。 array.includes()方法用于确定数组中是否存在特定元素。它返回“真”或“假”

   示例：以下代码演示了如何检查动物是“狮子”还是“狗”。

   Javascript

   // function
   function test(animal) {
       if (animal == 'Lion' || animal == 'dog') {
           console.log('Valid');
       }
   }
     
   // function call
   test('dog');

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   输出：

   Valid

   上面的代码似乎很简单，因为您只有两种动物要检查。但是，您不确定用户的输入。如果你再养几只动物怎么办？如果你继续用更多的OR语句扩展语句，代码会更难维护并且看起来很不干净。

   您可以重写该函数以使其更清晰。如果您想检查其他动物，您需要做的就是添加一个新的数组项。

   Javascript

   function test(animal) {
       const animals = ['dog', 'cat', 'cow', 'Lion'];
     
       // Used to check if a particular
       // element is present 
       if (animals.includes(animal)) {
           console.log('valid');
       }
   }
   console.log(test('dog'));
   

   输出：

   valid

   您可以创建一个动物数组，以将条件与代码的其余部分分开。您甚至可以在函数范围之外声明变量，并在需要的地方重用它。这是一种编写易于理解和维护的更简洁代码的方法。

2. Array.every & Array.some：

   array.every()方法用于检查数组中存在的所有元素是否满足给定条件。当每个数组元素满足给定条件时返回“true”，否则返回“false”。

   array.some()方法检查数组中的任何元素是否通过了所提供函数的测试。 array.some()方法对数组的每个元素执行一次函数。它检查数组的至少一个元素是否满足条件。

   这两个 JavaScript 数组函数用于减少代码行数。看看下面给出的代码。

   Javascript

   // Array of objects
   const cars = [
       { name: 'car1', color: 'red' },
       { name: 'car2', color: 'blue' },
       { name: 'car3', color: 'purple' }
   ];
     
   function test() {
       let isAllblue = true;
     
       // Condition: all cars must be blue
       for (let c of cars) {
           if (!isAllblue) break;
           isAllblue = (c.color == 'blue');
       }
     
       console.log(isAllblue);
   }
   test();
   

   输出：

   false

   上面的代码有点长。您可以使用Array.every()方法来减少它。

   Javascript

   // Array of objects
   const cars = [
       { name: 'car1', color: 'red' },
       { name: 'car2', color: 'blue' },
       { name: 'car3', color: 'purple' }
   ];
     
   function test() {
     
       // Condition: short way
       // all cars must be in blue color
       const isAllblue = cars.every(
               c => c.color == 'blue');
                 
       console.log(isAllblue);
   }
   test();
   

   输出：

   false

   您也可以使用Array.some()方法来实现它

   Javascript

   // Array of objects
   const cars = [
       { name: 'car1', color: 'red' },
       { name: 'car2', color: 'blue' },
       { name: 'car3', color: 'purple' }
   ];
     
   function test1() {
     
     // Condition: if any car is in blue color
     const isAnyblue = cars.some(c => c.color == 'blue');
     
     console.log(isAnyblue); 
   }
   test1();
   

   输出：

   true

3. Return Early 或 Early exit： JavaScript 中的 Return Early 是一种将函数体减少到零“else”语句数量的简单方法。在代码中使用 Return Early 的原因有很多。
   1. 它减少了代码的总量。
   2. 它通过降低逻辑复杂性来减少行的长度。
   3. 它有助于提高可读性。

   Return early 的目的是通过在主体的“if”语句中使用“return”关键字来消除 JavaScript 函数中对“else”条件的需求。让我们创建一个在特定条件下表现不同的函数。

   注意：下面演示了上述解释的伪代码。

   Javascript

   function IsRed(someObject) {
     
       // Declare a variable to 
       // store the final value
       var willRed;
     
       // Compare type of object
       if (typeof someObject === 'object') {
     
           // Check object color property
           // is red or not 
           if (someObject.color === 'Red') {
               willRed = true;
           } else {
               willRed = false;
           }
       } else {
           willRed = false;
       }
     
       return willRed;
   }
   

   这个函数很清楚，但它似乎是不必要的复杂。 Return early 模式可用于提高可读性并减少“else”语句的数量。

   Javascript

   // Use return instead of else statement
   function IsRed(someObject) {
       if (typeof someObject !== 'object') {
           return false;
       }
     
       if (someObject.color !== 'Red') {
           return false;
       }
     
       return true;
   }
   

   使用 Return Early 模式，我们能够消除所有不必要的“else”语句，并使您的函数更加清晰和简洁。

   你也可以只使用一个“if”语句来重构这个函数。

   Javascript

   // Here you can reduce your code
   function IsRed(someObject) {
     
       // 2 if statements replaced
       // by 1 if statement
       if (
           typeof someObject !== 'object' ||
           someObject.color !== 'Red'
       ) {
           return false;
       }
       return true;
   }
   

   通过使用 JavaScript 的三元运算符，可以在一行代码中再次重构此函数。

   Javascript

   function IsRed(someObject) {
       return typeof someObject !== 'object'
           || someObject.color !== 'Red' ? false : true;
   }
   

   通过减少条件，您减少了所有嵌套的“if”语句。

   注意：始终以减少嵌套为目标并尽早返回，但不要破坏它。如果您的代码简短而直接，并且使用嵌套的“if”更清晰。

4. 使用对象字面量或映射：对象字面量基本上是一个键值对数组，用于代替 switch 语句。让我们看看下面的例子。

   Javascript

   function printCars(color) {
     
       // Use switch case to 
       // find cars by color
       switch (color) {
           case 'red':
               return ['Rcar1', 'Rcar2'];
           case 'blue':
               return ['Bcar1', 'Bcar2'];
           case 'purple':
               return ['Pcar1', 'Pcar2'];
           default:
               return [];
       }
   }
     
   printCars(null);
   printCars('blue');    
   

   输出：

   []
   ['Bcar1', 'Bcar2']
   

   上面的代码可以通过使用对象字面量量和完全替换“switch”语句来重构。

   Javascript

   // Use object literal to 
   // find cars by color
   const carColor = {
       red: ['Rcar1', 'Rcar2'],
       blue: ['Bcar1', 'Bcar2'],
       purple: ['Pcar1', 'Pcar2']
   };
     
   function printcars(color) {
       return carColor[color] || [];
   }
   console.log(printcars());
   console.log(printcars('red'));
   console.log(printcars('blue')); 
   

   输出：

   []
    ['Rcar1', 'Rcar2']
    ['Bcar1', 'Bcar2']
   

   您也可以使用 Map 来实现相同的结果。

   Javascript

   // Use map to find cars by color
   const carColor = new Map()
       .set('red', ['Rcar1', 'Rcar2'])
       .set('blue', ['Bcar1', 'Bcar2'])
       .set('purple', ['Pcar1', 'Pcar2']);
     
   function printcars(color) {
       return carColor.get(color) || [];
   }
   console.log(printcars());
   console.log(printcars('red'));
   console.log(printcars('blue')); 
   

   输出：

   []
    ['Rcar1', 'Rcar2']
    ['Bcar1', 'Bcar2']
   

5. 使用默认函数参数和解构：默认参数是一种为未传入值的函数参数设置默认值的方法，即“未定义”。

   Javascript

   function check(flower, quantity) {
       if (!flower) return;
     
       // If quantity not provided, 
       // set default to one
       const a = quantity || 1;
     
       console.log("I have ${a} ${flower}!");
   }
     
   // Results
   check('Rose');
   check('Lotus', 2);
   

   输出：

   I have 1 Rose!
   I have 2 Lotus!
   

   现在您可以使用函数参数来设置默认值

   Javascript

   // If quantity not provided, parameter
   // provided to set default to one 
   function check(flower, quantity = 1) {
       if (!flower) return;
       console.log(`I have ${quantity} ${flower}!`);
   }
     
   // Results
   // (Default parameter is set)
   check('Rose');
   check('Lotus', 2); 
   

   输出：

   I have 1 Rose! 
   I have 2 Lotus!
   

   如果花变量是一个对象怎么办？您可以为其分配默认参数吗？

   Javascript

   function check(flower) {
     
       // Print flower name if
       // value provided
       if (flower && flower.name) {
           console.log(flower.name);
       } else {
           console.log('unknown');
       }
   }
     
   // Results
   check(undefined);
   check({});
   check({ name: 'Rose', color: 'red' });
   

   输出：

   unknown
   unknown
    Rose
   

   在上面的示例中，如果“花”名称可用，我们要打印它，否则如果值未知，它将打印“未知”。我们可以通过使用默认函数参数析构来避免条件“flower”和“flower.name”。

   解构允许您从对象中提取属性。

   Javascript

   // Destructing access name property only
   // assign the default empty object {}
     
   function check({name} = {}) {
       console.log (name || 'unknown');
   }
     
   // Results
   check(undefined); 
   check({ }); 
   check({ name: 'Rose', color: 'red' }); 
   

   输出：

   unknown
   unknown
    Rose
   

   我们需要来自花的属性名称，您可以使用{name}解构该参数，然后在代码中使用name作为变量而不是flower.name因为解构允许您将对象的属性分配给变量。

   您还需要将空对象 {} 分配为默认值。如果你不这样做，它会在执行“check(undefined)”行时显示错误，即不能解构'undefined'或'null'的属性名称，因为undefined或null中没有name属性。