Советы по написанию лучших условий в 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' );

   Выход:

    Действительный

   Приведенный выше код кажется простым, потому что вам нужно проверить только двух животных. Однако вы не уверены в вводе пользователя. Что, если у вас будет еще несколько животных? Если вы продолжите расширять оператор большим количеством операторов 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' ));

   Выход:

    действительный

   Вы можете создать массив животных, чтобы отделить условия от остальной части кода. Вы даже можете объявить переменную вне области видимости функции и повторно использовать ее там, где вам это нужно. Это способ написать более чистый код, который легко понять и поддерживать.

2. Array.every и Array.some:
   
   
   
   

   Метод array.every () используется для проверки, все ли присутствующие в массиве элементы удовлетворяют заданному условию. Он возвращает «истину», если каждый элемент массива удовлетворяет заданному условию, в противном случае возвращает «ложь».

   Метод 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();

   Выход:

    ложный

   Приведенный выше код немного длинен. Вы можете уменьшить его, используя метод 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();

   Выход:

    ложный

   Вы также можете реализовать это с помощью метода 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();

   Выход:

    правда

3. Ранний возврат или ранний выход: Ранний возврат в JavaScript - это простой способ уменьшить тело функции до нуля, чтобы количество операторов else. Есть много причин для использования функции возврата в коде раньше.
   1. Это уменьшает общий объем кода.
   2. Это уменьшает длину строки за счет уменьшения логической сложности.
   3. Это помогает улучшить читаемость.

   Цель возврата на раннем этапе - устранить необходимость в условных выражениях «else» в функциях JavaScript с помощью ключевого слова «return» в операторе «if» тела. Давайте создадим функцию, которая будет вести себя по-разному в определенных условиях.

   Примечание . Ниже показан псевдокод приведенного выше объяснения.

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

   Эта функция понятна, но кажется излишне сложной. Шаблон «Ранний возврат» можно использовать для повышения удобочитаемости и уменьшения количества операторов «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 ; }

   Используя шаблон «Ранний возврат», мы можем исключить все ненужные операторы «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 ; }

   Вы сократили количество вложенных операторов «если», уменьшив условия.

   Примечание: всегда стремитесь к меньшему гнездованию и возвращайтесь раньше, но не портите его. Если ваш код короткий и прямой, и если он более понятен с вложенными «если».

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. Использовать параметры функции по умолчанию и деструктурирование: параметр по умолчанию - это способ установить значения по умолчанию для параметров функции, в которых значение не передается, то есть «undefined».

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

   Выход:

   У меня 1 роза!
   У меня 2 лотоса!
   

   Теперь вы можете использовать параметр функции, чтобы установить значение по умолчанию.

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

   Выход:

   У меня 1 роза! 
   У меня 2 лотоса!
   

   Что, если цветочная переменная - это объект? Можете ли вы назначить ему параметр по умолчанию?

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

   Выход:

   неизвестный
   неизвестный
    Роза
   

   В приведенном выше примере мы хотим напечатать имя «цветка», если оно доступно, иначе будет напечатано «неизвестно», если значение неизвестно. Мы можем избежать условных выражений «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' });

   Выход:

   неизвестный
   неизвестный
    Роза
   

   Нам нужно имя свойства из flower , вы можете деструктурировать этот параметр с помощью {name} , а затем использовать name в качестве переменной в вашем коде вместо flower.name, потому что деструктуризация позволяет вам назначать свойства объекта переменным.

   Вам также необходимо назначить пустой объект {} как значение по умолчанию. Если вы этого не сделаете, он покажет ошибку при выполнении строки «check (undefined)», т.е. не сможет деструктурировать имя свойства «undefined» или «null», потому что в undefined или null нет свойства name.