Учебный курс по Javascript | Основы

Освоение основ

вступление

Привет! Я не отказывался от серьезности, просто был занят работой. Я уже записал видео и выложу их на YouTube. Я старался быть тщательным, чтобы вы поняли эти концепции. Они сложны для новых программистов, но достаточно скоро вы будете вставать и брать имена (в js), ха-ха.

05 Заявления JS

В javascript приложения состоят из операторов. Операторы могут выходить за пределы одной строки и/или многие операторы могут содержаться в одной строке. Операторы часто синтаксически разделяются точкой с запятой; [1].

Декларации

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

let: позволяет объявить переменную в области блока.
var: var позволяет объявить переменную глобально.
const: const – это переменная, доступная только для чтения, то есть постоянная и неизменяемая.

const num = 5 // it will return a 5
let num = 5 // it will return a 5
var num = 5 // it will return a 5

Теперь давайте посмотрим, как они работают в отношении области действия блока. Поскольку переменная var в некотором смысле глобальна, переменная может манипулироваться из разных областей области видимости, в то время как let зависит от области видимости. Вот пример

function varExample() {
  var num = 5;
  {
    var num = 2;  // same variable!
    console.log(num);  // 2
  }
  console.log(num);  // 2
}

function letExample() {
  let num = 5;
  {
    let num = 2;  // different variable
    console.log(num);  // 2
  }
  console.log(num);  // 5
}

Обратите внимание, как изменилась переменная var при переназначении внутри вложенной области видимости функции varExample, в то время как переменная let НЕ была переназначена в функции letExample?

Точно так же есть мертвые зоны при разборе кода. Я считаю, что это плохая практика, но может быть важно понять различие [2].

function deadZone() {
  console.log(varExample) // undefined
  console.log(letExample) // Reference Error
  var varExample = 5
  let letExample = 4
}

var автоматически назначается undefined, тогда как let необходимо инициализировать перед доступом к переменной. Хорошей практикой является инициализация и объявление переменных до вызова, независимо от того.

Функции

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

функция: это ваш обычный функциональный объект. Функция объявляется и присваивается переменной или создается анонимно. как и другие функции, она может принимать параметры, если они были определены ранее. Вот различные способы записи функций [3].

function funName() {} 
// function named funName. to initiate we use funName(). Can take in arguments.
(function() {} ()) 
// anon function automatically initated after the {} with the (). Can take in arguments. 
const anon = function() {} 
//anon function assigned to the constant variable anon. Can take in arguments. initiated by anon()

Хочешь быть крутой кошкой и кошечкой Кэрол Баскин? Вы можете использовать синтаксис es6 для объявления функций [4].

const anon = () => {} 
// naming and anon function
(() => {} ) 
// anon funciton. You will see me use this often in the future.

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

Существуют небольшие различия в функциях синтаксиса es6 при использовании ключевого слова this, но мы рассмотрим эти различия позже. А пока познакомьтесь с этими формами функций.

функция*: как и обычная функция, генератор допускает уникальное выполнение стоп-энд-гоу. Я просто быстро укажу, что на данный момент существует различие между функциями генератора и обычными функциями. Позже мы рассмотрим генераторы более подробно.
асинхронная функция: как обычная функция, которая запускает код синхронно (т. е. анализирует и выполняет во времени сверху вниз выполнение в хронологическом порядке). Асинхронные функции позволяют выполнять функции, которые не являются синхронными (отсюда и ключевое слово async). Это позволяет вам использовать ключевое слово await в функциях с областью асинхронной функции для анализа после Функция await успешно разрешена. Мы рассмотрим это более подробно позже.
класс. Классы — это прославленные функции, от которых можно не только отказаться, как от функции, но и улучшить с помощью таких вещей, как наследование и прототипы. Классы также используют это ключевое слово, и в реакции также есть методы жизненного цикла, присущие прототипам. Когда мы создали строку, используя родительский объект, мы фактически использовали класс, аналогичный объекту Date и Math.

class name [extends otherName] {
  // class body
}

Классы могут расширять другие существующие классы, что позволяет вам наследовать атрибуты и методы расширенного класса. Позже мы более подробно рассмотрим практический вариант использования классов, но я хотел показать вам, что если вы видите объект класса, он ведет себя подобно обычной функции с дополнительными сверхспособностями [5].

return: возврат присутствует во всех итерациях объектов функций. Ключевое слово return останавливает функцию в этой точке и возвращает указанное выражение (значение) или неопределенное [6].

В коде, если функция представляет собой простую однострочную функцию, ключевое слово return не требуется.

const addNums = (a,b) => a+b
const sum = addNums(5,10)
console.log(sum) // return 15

В противном случае это выглядело бы примерно так:

function counter() {
  for (var count = 1; ; count++) {  // infinite loop
    console.log(count + 'A'); // until 5
      if (count === 5) {          
        return;
      }
      console.log(count + 'B');  // until 4
    }
  console.log(count + 'C');  // never appears
}

counter();
// [6]

return часто используется в js, так что мы столкнемся с этим много раз в будущем.

Итерации

Итерации позволяют вам, ну, итерировать несколько объектов. Итерация объектов чаще всего выполняется с массивами. массивы содержат несколько элементов, и в списке элементов (массивах) мы можем выполнять задачи для каждого элемента в самом списке.

for: циклы for позволяют пользователю перебирать массив или выполнять повторяющиеся задачи, пока выполняются условия цикла for.

for (i = 5, i > 0, i--) {
   console.log(i)
}

// returns: 
// 5
// 4
// 3
// 2
// 1

do ... while: подобно циклу for, цикл do while продолжает выполнять задачу, пока условия истинны, и выполняет задачи по крайней мере один раз или до тех пор, пока в условии не будет оценено ложное значение.

do
   statement
while (condition);

Существуют и другие версии циклов for и do, посмотрите их здесь. Я хотел показать вам, что происходит за кулисами при анализе кода, потому что в ближайшем будущем я хотел бы представить более элегантные итераторы, такие как nameArray.forEach() и nameArray.map().

Поток управления

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

if … else: это наиболее часто используемый оператор потока управления (imo), и его проще всего понять, как работает поток управления. Если условия соблюдены, выполните код, в противном случае (еще) выполните что-то еще.

if (condition) {
   // condition met
} else {
   // condition not met
}

Существует также оператор else if.

if (conditionA) {
   // condition A met
} else if (conditionB) {
   // condition B met
} else {
   // catch all
}

переключатель: переключатели будут использоваться в более сложном разделе, но по сути функции передается аргумент, и на основе этого аргумента, если условие выполняется, действие или инструкция отправляется и казнен. Не беспокойтесь об этом СЛИШКОМ сейчас, так как мы рассмотрим более подробно позже.
продолжить: внутри цикла вы можете использовать команду continue, чтобы прервать цикл в этой конкретной точке и продолжить новую итерацию.
break: break, как вы уже догадались, полностью прерывает цикл, останавливая его в момент чтения. Хорошо использовать изначально, чтобы предотвратить бесконечные циклы
блок: инструмент группировки, используемый для группировки ноля или более операторов вместе. это не ключевое слово, используемое так часто, как ключевое слово для представления варианта использования фигурных скобок { // оператор(ы) или Empty}

Другие заявления

Есть масса других утверждений. Те, которые я перечислил, являются наиболее часто используемыми IMO и наиболее необходимыми для изучения на данный момент. Остальные операторы мы рассмотрим более подробно позже, а пока постарайтесь понять и освоить перечисленные выше.

Полный список утверждений можно найти здесь.

Заворачивать

Объявления позволяют назначать переменные, а let отличается от var тем, что let относится к локальной области. При этом как let, так и var являются неизменяемыми, в отличие от const.

Функции бывают разных форм, но выполняют одни и те же задачи.

Итерации позволяют пользователю перебирать несколько элементов массива или выполнять ряд повторяющихся задач, пока выполняется условие. Итерации чаще всего используются в виде циклов for и циклов do… while.

Поток управления позволяет программисту управлять потоком разбора кода с помощью такой логики, как if, else и else if и такие операторы, как break и continue .