JavaScript - понимание основ - AVWC

С чего мне начать?

Итак, вы хотите научиться работать с JavaScript? Вы новичок и слышали обо всех этих модных фреймворках и библиотеках. Вы слышали разговоры о том, что они могут предложить. Хотя React и Vue кажутся сейчас самыми популярными, существует множество других вариантов, и кажется, что они растут с головокружительной скоростью. Итак, какой из них выбрать? Что ж, я полностью советую вам сделать шаг назад, сделать глубокий вдох и изучить основы.

Получив твердое представление о механике, лежащей в основе JavaScript, вы сможете выбрать одну из причудливых фреймворков со всеми их крутыми способностями НАМНОГО проще. Если вы, например, сначала погрузитесь в React, вы, вероятно, потеряетесь, и я могу вам сказать, что это неинтересно.

Немного предыстории

Я работаю с JavaScript уже 5 лет. В настоящее время я работаю в Ford фронтенд-инженером. Я ежедневно работаю напрямую с React и TypeScript, и оба эти инструмента приносят мне огромную радость. Их легко использовать. Они значительно упрощают чтение и понимание кода и обладают огромной мощностью.

С большой силой приходит большая ответственность

- Дядя Бен

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

Объявление переменных

В JavaScript, когда мы хотим что-то построить, у нас обычно есть переменные в любом заданном блоке или разделе кода. Переменная - это то, что мы можем создать и присвоить значение. Есть два типа переменных, и они начинаются с let или const. Основное различие между этими двумя состоит в том, что одно значение может быть переназначено, а другое - нет.

// If we have a counter we want to constantly update, we should use let 
let counterValue = 0; 
// If we want to store someones birth year, which will never get updated, we should use const 
const dateOfBirth = 1985;

Петли

Циклы - одна из наиболее часто используемых вещей в коде. Не имеет значения язык, вы будете их часто использовать. Я буду обсуждать два типа, которые я использую чаще всего, это цикл for и цикл while.

Для петли

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

for (let currentNumber = 0; currentNumber <= 10; currentNumber++) {          
  console.log('The current number is ' + currentNumber); 
}; 
// You should see the below in your browsers console window 
The current number is 1 
The current number is 2 
The current number is 3 
The current number is 4 
The current number is 5 
The current number is 6 
The current number is 7 
The current number is 8 
The current number is 9 
The current number is 10

По сути, происходит следующее. for () { } - это то, как мы настраиваем наш цикл. Мы сказали нашему коду, что нам нужен именно цикл for. Внутри скобок мы сделали 3 вещи. Мы создали переменную с именем currentNumber и присвоили ей значение 0. Это может быть любое число, но в этом примере мы используем 0. Второе, что нужно сделать, это сказать, что пока currentNumber меньше или равно 10, мы хотим увеличивать значение, пока не дойдем до 10. Наконец, мы увеличиваем значение currentNumber каждый раз, когда происходит цикл. Когда код запускается, он будет повторяться 10 раз и вести журнал для консоли, сообщая нам значение внутри console.log ();

Пока цикл

Цикл while также довольно часто используется. Синтаксис ниже.

// First, we must declare our variable. Since this will change, we want to use the let keyword 
let currentNumber = 0; 
while (currentNumber <= 10) { 
  console.log('The current number is ' + currentNumber);
  currentNumber++; 
} 
// You should see the below in your browsers console window 
The current number is 1 
The current number is 2 
The current number is 3 
The current number is 4
The current number is 5 
The current number is 6 
The current number is 7 
The current number is 8 
The current number is 9 
The current number is 10

Как видите, они, по сути, делают одно и то же, но синтаксически различаются. В цикле while вы присваиваете переменной значение вне цикла, а затем увеличиваете значение внутри {}. В цикле for все эти шаги обрабатываются внутри (). То, что вы будете использовать, зависит от того, что вам нужно сделать, поэтому нет одного лучше другого.

Условная логика

= vs == vs ===

= 
const stringValue = '2'; 
const numberValue = 2; 
// The single equals sign is used to assign value to something, like assigning values to stringValue and numberValue 
== 
if (stringValue == numberValue) { 
  console.log('True'); 
} else { 
  console.log('False'); 
} 
// The == ignores data type, so this will return true 
=== 
if (stringValue === numberValue) { 
  console.log('True');
} else { 
  console.log('False'); 
} 
// The === cares about data type, so this is returned false

Поскольку это может быть целая статья, я прикреплю эту ссылку, которая подробно объясняет это.

Если заявления

Еще одна вещь, которую вы будете часто использовать, - это оператор if. Как и выше, я покажу код, а затем объясню

const year = 2021;
if (year === 2021) { 
  console.log('True'); 
} else { 
  console.log('False'); 
} 
// Above, we have 2 conditions. Check whether the year is 2021, otherwise check for any other value. This will return 'True' because the year was set to 2021 in our variable. 
const year = 2021;
if (year == 2021) { 
  console.log('One'); 
} else if (year === 2022) { 
  console.log('Two'); 
} else { 
  console.log('Three'); 
} 
// Above, we used something called an else if. This is a way to check for another set of defined conditions. If we wanted to check if the year was 2021, or the year was 2022, or anything else, we would write it this way. 
year === 2021 ? console.log('True') : console.log('false'); 
// We can also write an if statement using what's called a ternary operator, which is a shorthand way to write it. 
// condition ? expression_1 : expression_2; 
// if the condition is true, return expression_1, otherwise return expression_2. In our case, the condition is true, so we will return expression_1.

Как видно из приведенного выше кода, мы устанавливаем значение года на 2021 год. Затем мы используем серию проверок, чтобы выполнить некоторую логику. По сути, мы говорим: «Если утверждение верно, верните то, что содержится в части if. В противном случае верните все, что находится в блоке else. Мы также можем добавить проверки else if, и мы можем иметь их столько, сколько захотим, или сокращенно использовать тернар.

Операторы

Последнее, что мы обсудим в этом посте, - это логические операторы. Что делать, если нам нужно проверить более одной вещи в нашем условии if. Что, если бы мы хотели проверить, что condition_1 и condition_2 истинны, или сказать, правильны ли condition_1 или conidition_2? Ну, мы бы написали это так

const currentYear = 2021; 
const currentMonth = 'May'; 
const myName = 'Jeremy' 
let returnedValue = ''; 
if (currentYear === 2021 && currentMonth === 'June') { 
  returnedValue = 'It is June, 2021'; 
} else if (currentYear === 2021 || currentMonth === 'June') {
  returnedValue = 'It is either June or 2021'; 
} else { 
  returnedValue = 'Everything is wrong';
} 
// What will be returned from this? 
// In our first check, the currentYear is 2021, but since the currentMonth is not June. The first check will fail. When we use && operator, everything in that check must pass. Essentially it is saying if condition_1 AND condition_2 are true, then this passes. 
// In our second check, we are saying if the currentYear is 2021 OR the currentMonth is June, then this passes. We only need 1 of the checks to pass here, so this will be true, and will set the returnedValue set to 'It is either June or 2021' 
// Since the else if block passes, our code never makes it to the else statement.

Мы также можем сократить утверждение, истинно или ложно что-то. Я продемонстрирую ниже

// If we want to check if a statement is true or false and do not want to explicitly type it out each time, we can do the following 
// True Statement 
if (statement === true) {  ... }
// can be converted to 
if (statement) {  ... } 
// This can be cleaned up further to the following
statement ? ...do something here : ...do something else;  
-- False statement 
if (statement === false) { ... } 
// can be converted to 
if (!statement) { ... } 
// This can be cleaned up further to the following
!statement ? ...do something here : ...do something else ;

Мы называем это синтаксическим сахаром, и это способ сделать наш код короче и, по мнению некоторых, чище. Я считаю, что это зависит от конкретного случая, когда речь идет о тернарях, но я всегда сокращаю свои истинные и ложные проверки. Я считаю, что это легче читать и требует гораздо меньше набора текста.

Последние мысли

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

Надеюсь, эта статья вам понравилась. Если у вас есть отзывы, комментарии или вопросы, оставьте их в разделе комментариев ниже.

Джереми Грайс. Если вы хотите подписаться на меня, вот мой аккаунт в Твиттере.

Первоначально опубликовано на https://aveteranwhocodes.com 7 мая 2021 г.