Статьи

Вернуться к основам: операторы JavaScript, условные выражения и функции

JavaScript операторы, условия и функции

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

Прежде чем мы начнем, вы должны иметь представление о базовом синтаксисе JavaScript, комментариях, типах данных и назначении значений для переменных. Вы можете узнать или просмотреть всю эту информацию в Руководстве для начинающих по JavaScript-переменным и типам данных .

Отказ от ответственности: Это руководство предназначено для начинающих JavaScript и программирования. Таким образом, многие концепции будут представлены в упрощенном виде, и будет использоваться строгий синтаксис ES5.

Готов? Давайте начнем!

Операторы JavaScript

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

Операторы присваивания

Операторы присваивания в своей основной форме применяют данные к переменной. В этом примере я назначу строку "Europe" переменной continent .

 var continent = "Europe"; 

Назначение представлено знаком равенства ( = ). Хотя существуют другие типы операторов присваивания, которые вы можете просмотреть здесь , это наиболее распространенный вариант.

Вы можете проверить все примеры в этой статье с помощью функции console.log() или с помощью консоли .

Арифметические Операторы

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

прибавление

Оператор сложения, представленный знаком плюс ( + ), добавит два значения и вернет сумму.

 var x = 2 + 2; // x returns 4 

Вычитание

Оператор вычитания , представленный знаком минус ( - ), вычитает два значения и возвращает разницу.

 var x = 10 - 7; // x returns 3 

умножение

Оператор умножения , представленный звездочкой ( * ), умножит два значения и вернет произведение.

 var x = 4 * 5; // x returns 20 

разделение

Оператор деления , представленный косой чертой ( / ), разделит два значения и возвратит частное.

 var x = 20 / 2; // x returns 10 

модуль

Чуть менее знакомым является оператор модуля , который возвращает остаток после деления и представлен знаком процента ( % ).

 var x = 10 % 3; // returns 1 

3 входит в 10 три раза, с 1 остатком.

инкремент

Число будет увеличено на единицу с помощью оператора приращения , представленного знаком двойного плюса ( ++ ).

 var x = 10; x++; // x returns 11 

Это происходит после назначения. Также возможно написать ++x; что происходит до назначения. Для сравнения:

 var x = 10; var y = x++; // y is 10, x is 11 

И:

 var x = 10; var y = ++x; // y is 11, x is 11 

декремент

Число будет уменьшено на единицу с помощью оператора декремента , представленного двойным знаком минус ( -- ).

 var x = 10; x--; // x returns 9 

Как и выше, также можно написать --x; ,

Операторы сравнения

Операторы сравнения оценят равенство или разность двух значений и вернут true или false . Они обычно используются в логических утверждениях.

равных

Два знака равенства ( == ) означают равные в JavaScript. Легко быть перепутанным между одинарными, двойными и тройными знаками равенства, когда вы впервые учитесь, но помните, что один знак равенства применяет значение к переменной и никогда не оценивает равенство.

 var x = 8; var y = 8; x == y; // true 

Это свободный тип равенства, и он вернет true даже если вместо числа используется строка.

 var x = 8; var y = "8"; x == y; // true 

Строгий Равный

Три знака равенства ( === ) означают строгое равенство в JavaScript.

 var x = 8; var y = 8; x === y; // true 

Это более часто используемая и более точная форма определения равенства, чем регулярное равенство ( == ), поскольку для возврата true требуется, чтобы тип и значение были одинаковыми.

 var x = 8; var y = "8"; x === y; // false 

Не равный

Восклицательный знак, за которым следует знак равенства ( != ), Означает, что он не равен в JavaScript. Это полная противоположность == и будет проверять только значение, а не тип.

 var x = 50; var y = 50; x != y; // false 

Эта строка и число будут рассматриваться как равные.

 var x = 50; var y = "50"; x != y; // false 

Строгий Не Равный

Восклицательный знак, за которым следуют два знака равенства ( !== ), означает строгое неравенство в JavaScript. Это полная противоположность === и будет проверять как значение, так и тип.

 var x = 50; var y = 50; x !== y; // false 

Эта строка и число будут рассматриваться как неравные.

 var x = 50; var y = "50"; x !== y; // true 

Меньше, чем

Другой знакомый символ, меньший ( < ), будет проверять, меньше ли значение слева, чем значение справа.

 var x = 99; var y = 100; x < y; // true 

Меньше или равно

Меньше или равно ( <= ) — то же самое, что и выше, но равно также будет иметь значение true .

 var x = 100; var y = 100; x <= y; // true 

Больше чем

Больше ( > ) будет проверять, больше ли значение слева, чем значение справа.

 var x = 99; var y = 100; x > y; // false 

Больше или равно

Больше или равно ( >= ) — то же самое, что и выше, но равно также будет иметь значение true .

 var x = 100; var y = 100; x >= y; // true 

Логические Операторы

Логическое утверждение часто использует операторы сравнения, которые мы только что изучили, для определения true или false значения. Есть три дополнительных оператора, которые можно использовать в этих операторах для проверки на true или false .

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

И

И представлен двумя амперсандами ( && ). Если оба оператора слева и справа от && значение true , весь оператор возвращает true .

 var x = 5; x > 1 && x < 10; // true 

В приведенном выше примере x равен 5 . С моим логическим утверждением я проверяю, больше ли x чем 1 и меньше, чем 10 .

 var x = 5; x > 1 && x < 4; // false 

Вышеприведенный пример возвращает false потому что хотя x больше 1 , x не меньше 4 .

Или

Или представлен двумя трубами ( || ). Если одно из утверждений слева и справа от || is оценивается как true , оператор вернет true .

 var x = 5; x > 1 || x < 4; // true 

x не меньше 4 , но больше 1 , поэтому оператор возвращает true .

Не

Последний логический оператор не представлен восклицательным знаком ( ! ), Который возвращает false если утверждение true , и true если утверждение false . Он также возвращает false если значение существует (которое не оценивается как false ). Потратьте секунду, чтобы переварить это …

 var x = 99; !x // false 

Поскольку x существует и имеет значение !x вернет false . Мы также можем проверить логическое значение — если значение равно false , мы можем проверить его, используя ! оператор, он вернет true .

 var x = false; !x // true 

Этот оператор может показаться запутанным, но он будет иметь смысл, когда мы перейдем к следующему разделу — условные операторы.

Приоритет оператора

Когда вы изучали математику в школе, вы, возможно, выучили аббревиатуру PEMDAS ( пожалуйста, извините мою дорогую тетю Салли ), чтобы узнать порядок операций. Это означает «круглые скобки, экспоненты, умножение, деление, сложение, вычитание» — порядок, в котором должны выполняться математические операции.

То же самое относится и к JavaScript, за исключением того, что оно включает в себя больше типов операторов. Для получения полной таблицы приоритетов операторов см. Ссылку на MDN .

Из опознанных нами операторов приведен правильный порядок операций с наивысшим приоритетом.

  • Группировка ( () )
  • Не ( ! )
  • Умножение ( * )
  • Отдел ( / )
  • Модуль ( % )
  • Дополнение ( + )
  • Вычитание ( - )
  • Меньше чем ( < )
  • Меньше или равно ( <= )
  • Больше чем ( > )
  • Больше или равно ( >= )
  • Равный ( = )
  • Не равно ( != )
  • Строгое равенство ( === )
  • Строгий не равный ( !== )
  • И ( && )
  • Или ( || )
  • Назначение ( = )

Например, что вы ожидаете от значения x в следующем фрагменте?

 var x = 15 - 5 * 10; 

Молодцы, если ты сказал -35 . Причиной этого результата является то, что оператор умножения имеет приоритет над оператором вычитания, и механизм JavaScript сначала оценивает 5 * 10 затем вычитает результат из 15 .

Чтобы изменить приоритет оператора, вы можете использовать круглые скобки.

 var x = (15 - 5) * 10; // x is 100 

Условные заявления

Если вы когда-либо сталкивались с блоком кода JavaScript, вы, скорее всего, заметили знакомые английские слова if и else . Это условные операторы или блоки кода, которые выполняются в зависимости от того, является ли условие true или false .

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

Условные операторы можно рассматривать как блок-схемы, которые будут давать разные результаты на основе разных результатов.

Если еще

Если

Оператор if всегда будет записываться с ключевым словом if , за которым следуют условие в скобках ( () ) и код, выполняемый в фигурных скобках ( {} ). Это будет написано как if () {} . Так как if операторы обычно содержат больший объем кода, они пишутся в несколько строк с отступом.

 if () { } 

В операторе if условие будет выполняться только в том случае, если оператор в скобках равен true . Если оно false , весь блок кода будет игнорироваться.

 if (condition) { // execute code } 

Во-первых, его можно использовать для проверки существования переменной.

 var age = 21; if (age) { console.log("Your age is " + age + "."); } 

В приведенном выше примере существует переменная age , поэтому код будет напечатан на консоли. if (age) является сокращением для if (age === true) , поскольку оператор if по умолчанию принимает значение true .

Мы можем использовать операторы сравнения, которые мы изучили ранее, чтобы сделать это условие более мощным. Если вы когда-либо видели веб-сайт для алкогольной продукции, у них обычно есть возрастное ограничение, которое вы должны ввести для просмотра сайта. В Америке возраст 21 год. Они могут использовать оператор if чтобы проверить, больше ли возраст пользователя или равен 21.

 var age = 21; if (age >= 21) { console.log("Congratulations, you can view this site."); } 

еще

Если вы хотите отобразить другое сообщение для пользователей, которые не соответствуют условию, вы должны использовать оператор else . Если первое условие неверно, первый блок кода будет проигнорирован, а блок кода else будет выполнен.

 if (condition) { // execute code } else { // execute other code } 

Вот пример с младшим пользователем. Поскольку пользователь не удовлетворяет условию, будет запущен второй блок кода.

 var age = 18; if (age >= 21) { console.log("Congratulations, you can view this site."); } else { console.log("You must be 21 to view this site."); } 

Остальное если

Если существует более двух опций, вы можете использовать оператор else if для выполнения кода на основе нескольких условий.

 var country = "Spain"; if (country === "England") { console.log("Hello"); } else if (country === "France") { console.log("Bonjour"); } else if (country === "Spain") { console.log("Buenos días"); } else { console.log("Please enter your country."); } 

В приведенном выше примере выводом будет "Buenos Días" так как для country установлено значение "Spain" .

переключатель

Существует еще один тип условного оператора, известный как оператор switch . Он очень похож на оператор if и выполняет ту же функцию, но написан по-другому.

Оператор switch полезен при оценке многих возможных результатов и обычно предпочтительнее использования многих else if операторов else if .

Оператор switch записывается как switch () {} .

 switch (expression) { case x: // execute code break; case y: // execute code break; default: // execute code } 

Внутри оператора вы увидите ключевые слова case , break и default . Мы будем использовать тот же пример, что и для else if с оператором switch, чтобы лучше понять.

 var country = "Spain"; switch (country) { case "England": console.log("Hello"); break; case "France": console.log("Bonjour"); break; case "Spain": console.log("Buenos días"); break; default: console.log("Please enter your country."); } 

В этом примере мы оцениваем переменную для определенной строки, и блок кода будет выполняться на основе каждого case . Ключевое слово break предотвратит запуск следующего кода после того, как совпадение найдено. Если совпадений не найдено, будет выполнен блок кода по default , аналогично оператору else .

функции

Функция JavaScript — это отдельный блок кода. Он может выполнять задачу или расчет и принимать аргументы. Одной из основных причин использования функции является написание многократно используемого кода, который может давать разные результаты при каждом запуске (в зависимости от значений, переданных ей).

декларация

Прежде чем функцию можно использовать, она должна быть объявлена ​​(или определена). Функция объявляется с ключевым словом function и следует тем же правилам именования, что и переменные.

Функция записывается как function() {} . Вот простое «Привет, мир!» В функции.

 function greeting() { return "Hello, World!"; } 

мольба

Чтобы вызвать (использовать) функцию, введите имя и круглые скобки.

 greeting(); // returns "Hello, World!" 

Параметры и Аргументы

Функция также может принимать аргументы и выполнять вычисления. Аргумент — это значение, переданное в функцию. Параметр — это локальная переменная, которую функция принимает и выполняет.

Локальная переменная — это переменная, которая будет работать только внутри определенного блока кода.

В этом примере мы создаем функцию с именем addTwoNumbers которая, ну, в addTwoNumbers , складывает два числа вместе (серьезно, хорошее именование важно). Мы будем отправлять числа 7 и 3 в качестве аргументов, которые будут приняты функцией в качестве параметров x и y .

 function addTwoNumbers(x, y) { return x + y; } addTwoNumbers(7, 3); // returns 10 

Поскольку 7 + 3 = 10 , функция вернет 10 . Ниже вы увидите, как функции можно использовать повторно, поскольку мы передадим разные аргументы одной и той же функции для получения другого результата.

 function addTwoNumbers(x, y) { return x + y; } addTwoNumbers(100, 5); // returns 105 

Есть несколько других способов объявления функций в JavaScript. Вы можете прочитать больше о них в этой статье: Быстрый совет: выражения функций против объявлений функций .

Вывод

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

Обладая этими знаниями, вы готовы перейти к более промежуточным концепциям JavaScript. Если у вас есть какие-либо вопросы или комментарии по поводу представленного материала, я буду рад услышать их в комментариях ниже (тем более, если вы только начинаете изучать JavaScript).

Эта статья была рецензирована Джеймсом Колсом и Томом Греко . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!