Когато хората започнат своето пътуване като програмист, всеки иска да научи всичко. Това е толкова често срещан манталитет, който всеки обучаем има! Но е толкова важно да знаем основите на всичко, което учим.
Например, преди да започне да учи тригонометрия, всеки трябва да знае основите на ъглите и триъгълниците. Преди да научим интеграцията и диференциацията, трябва да знаем какви са функциите и регистрационните файлове. Уфф! Твърде много математика. Не се притеснявайте, просто искам да кажа, че преди да се гмурнем в морето, първо трябва да се гмурнем в басейн или езеро, за да се научим да плуваме.

„Хубавото в ученето е, че никой не може да ти го отнеме.“
– Б. Б. Кинг

Нека започнем пътуването, за да научим някои важни неща в JavaScript. Предполагам, че читателят е малко удобен в JavaScript или друг език за програмиране, а също така е запознат с кодирането. JavaScript има много популярни предни и задни рамки, като Nodejs, ReactJs, VueJs, AngularJs и т.н. За да научите тези рамки, трябва да имате добри познания за JavaScript. И така, този блог съдържа някои от най-необходимите концепции, които трябва да знаем в съвременния JavaScript, преди да преминем към тези рамки.

Нека, Const и Var:

Тези let, const и var са ключови думи, използвани в JavaScript за деклариране на променлива. Всеки има своя обхват и функционалност. Преди ES6 var е единствената ключова дума, използвана за деклариране на променливата в JavaScript.

Какво е това var?
Ключова дума var е декларация на променлива, която има глобален обхват, ако е декларирана извън функцията, и има функционален обхват, ако декларираме вътре функцията. var може да бъде повторно деклариран и актуализиран със същото име.

В горния пример стойността на var hello е различна вътре във функцията и извън нея.

Какво е let?
Ключовата дума let е с блокиран обхват, което означава, че нейната стойност е ограничена в рамките на определен блок от код. let може да се актуализира, но не може да се предекларира.

В горния пример можем да видим, че let firstname има глобална стойност и след това във функция changedName имаме let capitalName, можем да видим, че firstname е достъпно във функцията. Но let capitalName, който има само блоков обхват на функция, не е достъпен извън функцията.

Какво е const?

Подобно на let, const също има блоков обхват. Но const не може да се актуализира, нито да се декларира отново. (Има някои случаи като можете да актуализирате const, ако е масив или обект, можете да го прочетете тук.)

Това са някои от основите на let, const и var, които трябва да знаете, преди да се потопите в повече неща за JavaScript. За да научите повече за него, можете да разгледате блога на freecodecamp, като щракнете тук.

Разрушаване на обект:

Нека разберем какво е обект в JavaScript. Обектът е нещо, което има свойства, събрани на едно място, което има двойки ключ-стойност. Можете да прочетете тозиблог, за да научите повече за обектите. Но накратко, обектът изглежда нещо като по-долу, което представлява ученик със свойства като име, възраст и образование.

let student = {
   name : "Vijay",
   age : 23,
   education : "graduate",
}

Знаем, че имаме достъп до този обект и неговата стойност, както е показано по-долу.

Виждаме, че трябва да използваме много редове, за да получим стойност с помощта на ключове. Но какво ще стане, ако има друг метод, който можем да използваме, за да го направим с един ред код. Това е мястото, където деструктурирането на обекти работи.

И така, както в горния фрагмент, можем отделно да вземем стойността на всеки ключ на обект, като ги декларираме във фигурните скоби (ред № 7) и можем имплицитно да използваме тези стойности.
Ако имаме нужда само от една стойност и други стойности не са необходими, можем също така да деструктурираме обекта и да вземем тази стойност. Например,

let {name} = student;
//here value of name will be "Vijay"

Тук просто трябва да се погрижим за конвенциите за именуване, които трябва да бъдат идентифицирани като ключове в обекта. „Щракнете“ тук, за да прочетете повече за това.

Функция стрелка

Доколкото всички сме запознати с функциите на всеки език за програмиране. Javascript също го има. Но има някои методи или начини за деклариране на функция в javascript. Нека видим редовния начин за създаване на функция, както е показано по-долу.

Но в javascript можем да използваме функцията като променлива и да създадем нейния екземпляр. Например, както е показано по-долу.

Но все пак не мислите ли, че е объркващо? да Но, да, можем да се отървем от function keyword от горния пример и нашият код пак ще работи. как? Това е мястото, където функцията стрелка влиза в действие. Вместо function ключова дума, дайте стрелка след параметрите.

И така, виждаме, че поставяме стрелка след подаване на параметър и всичко работи добре. Това е, което наричаме функция със стрелка.

Сега, ако имаме само един ред във функцията, можем да се отървем от тази return ключова дума и скоби. Вашата функция ще изглежда така.

Ето как изглежда функцията стрелка, през повечето време създаваме анонимна функция в javascript като обратно извикване, по този начин тази функция стрелка играе важна роля. Впоследствие той има различни други свойства, които обикновените функции нямат, можете да проверите това тук.

Шаблонен низ (шаблонни литерали)

Шаблонните низове са низове, които са обозначени вътре в обратните отметки. `` (предимно бутон под Esc на клавиатурата)

В този литерал можем да получим достъп до променливата, като ги поставим вътре в ${} просто.

let name = "Vijay";
let age = 23;
console.log(`My name is ${name} and I am ${age}.`)

output:
My name is Vijay and I am 23.

Можем да видим, че низовете с обратни отметки имат достъп до декларираната променлива или стойност, просто като ги поставите вътре в $ и {}.
Щракнете тук, за да прочетете повече за това.

Внос и износ

Създаването на какъвто и да е софтуер отнема много време и много код. Но е трудно да се борави с целия код на софтуера, написан в един файл. И така, основното решение за този вид проблем е разделянето на такова голямо количество код на по-малка функция. Но все пак цели функции в един файл не са осъществим начин да напишете програма. Тук концепцията за модулите влиза в игра в javascript.

Например, можем да напишем код в един файл и да го използваме в друг файл. Javascript ни предоставя средата за това. Нека разгледаме един пример.

Нека създадем два файла, наречени index.js и addition.js
addition.js ще има логика за събиране на две числа и console.log тях и ще вземем тази функция за събиране в index.js и ще я изпълним.

Сега създайте addition функция във addition.js файл и експортирайте тази функция вътре във фигурни скоби, както е показано по-долу.

Сега можем да импортираме тази функция за добавяне в index.js и да предадем параметъра в нея.

По този начин можем да използваме, импортираме и експортираме в javascript. Има още едно нещо, което се използва с default keyword.

Експортирането на нещо по подразбиране ще експортира този модул по подразбиране. Не е необходимо да използвате къдрави скоби за импортиране и експортиране за случаи по подразбиране.
Нека видим това чрез пример.

В горния addition.js можете да видите, че multiply функция е експортирана, но addition функция е експортирана по подразбиране. Така че това означава, че когато импортираме addition.js във всяка друга програма, първото нещо, което по подразбиране ще приеме във функцията addition.

Тук импортирахме addition и multiply. Но както виждате, не сме използвали скоби за addition. Тъй като се експортира по подразбиране. До тук, ако се съмнявате в това, ако името при импортиране на експортиране по подразбиране може да бъде променено и ще работи ли? да Вървиш добре. Можете да назовете каквото и да е за експортиране по подразбиране и то ще работи, но това не е така при обикновеното експортиране. Например,

Тук импортирахме addition module като add и тъй като addition е експортиране по подразбиране, той ще бъде присвоен на add и ще работи перфектно. Но няма да работи в случай на multiply.

Ето как експортирането и импортирането работят в javascript. За ежедневна употреба в javascript и за да научите повече за него, можете да щракнете тук, за да прочетете повече.

Забележка: Трябва да направим промени в package.json, за да работим с импортиране и експортиране на ES6. Трябва да добавим , “type”: “module” в package.json. Моля, обърнете внимание, че ES5 има различен синтаксис за импортиране на експортиращи модули.

Синтаксис за разпространение:

Операторът за разпространение се обозначава с ... (три точки). Има голямо значение при използване в javascript, но ние ще разберем основното му правило. Използва се с итерируеми неща като обекти и масиви. Може да осигури извикване на функция с масив (или всяка друга итерируема), където се очакват 0 или повече аргумента.

Различни случаи на използване на разпространен синтаксис, както следва:

  • Свързване на масив.
    Добавянето или сливането на два масива или обект е основно нещо във всеки език за програмиране. Можем да използваме оператор за разпространение за т.н. Например. Нека декларираме променлива city, която е масив от име на град. Сега имаме друг град в този масив. можем да използваме разпространение на city и след това да добавим друго име на град, както е показано по-долу на ред №. 3. Можем също да избутваме елементи вътре в масива, като използваме подобен метод.

  • Свързване на обект.
    Сега, както го използвахме в масива, можем да го използваме и в обект и да добавим двойки ключ-стойност в обект. Например, нека декларираме обект, наречен student, който има ключове и стойност като {name : “Sam”, age : 22}. Сега трябва да добавим {mark : 100} в този обект. Можем да използваме оператора spread, за да го направим. Както е показано по-долу, свойството mark се добавя към обект чрез разпространение на student обект като …student това и добавяне на mark : 100 в него.

  • Това са някои основни случаи на синтаксис на разпространение. Можем да го използваме при предаване на параметри във функция и копиране на масив. За да научите повече, прочетете това.

Карта и филтър

Map и Filter са едновременно най-важните и най-използваните методи в javascript. Най-често те се използват с итерируеми елементи като обекти, масиви или низове. Това са неразрушителни методи, което означава, че първоначалната стойност не се засяга, но създава нова стойност. Нека ги видим с примери.

Да предположим, че имаме един обект, наречен students, който има две свойства, наречени name и age.

Случай I: Създайте масив, който съдържа всички имена на студенти във формат с главни букви.

Тук трябва да създадем от дадени стойности и трябва да повторим и модифицираме стойностите и да извлечем нещо от даден обект. И така, тук трябва да използваме метода на КАРТА.

Така че трябва да използваме метода student.map() и да върнем имената с главни букви.

По-горе декларирахме променлива names и повторихме обекта на ученика и предадохме функция за обратно извикване в него. student which е вътре в карта функция е индивидуална стойност на основния обект и ние итерираме върху него обект и го връщаме.

Случай II: Филтрирайте учениците, които са под 18 години.

Тук трябва да филтрираме и да проверим състоянието. Filter методът се използва за това.

Методът за филтриране проверява даденото условие и връща стойностите, които са верни, както е поискано (зависи от условието).
В javascript има и други методи като намаляване, намиране, някои, всеки и т.н. Вижте следното изображение за да разберете накратко този метод.

Това са някои важни концепции, които трябва да знаем, преди да преминем към каквато и да е javascript рамка за начинаещи. Наред с това има и други неща, които съм поставил по-долу като контролен списък за задълбочено разбиране на javascript, които се използват най-често, когато преминем към ниво за начинаещи към напреднали.

  • Извличане на API
  • Async/Изчакване
  • Примитивни срещу референтни типове данни
  • Концепции за дата и час
  • Опитайте и хванете
  • Обещание и обратно повикване
  • JSON данни
  • Локално съхранение

„Трябва да именувате променлива със същата грижа, с която давате име на първородно дете.“
— Робърт К. Мартин

Благодарим ви, че прочетохте. Можете да се свържете с мен в twitter, LinkedIn и Github.