нека и const
Нека започнем с най-основната концепция. Въпреки че не е специфично за или се използва конкретно повече в React като някои от другите концепции, които ще видите по-долу. Все още е важно да знаете за let и const.
let и const се използват вместо var. Те бяха въведени за първи път в ES6 и основно заместват var. Вече не е необходимо да използваме ключова дума var за деклариране/инициализиране на променливи. ура!
let и const са с блоков обхват. Блокът е част от код във къдрави скоби „{}“. Така че, ако някоя променлива е декларирана в блок, тогава тя е достъпна само вътре в него.
Нека да видим как можем да инициализираме променливи с let и const.
function variableInitialisation(){
let var1 = "variable1";
const var2 = "variable2";
}
В горния кодов фрагмент и двете променливи са налични само във функцията variableInitialisation().
Да видим някои характеристики на let и const.
let
Променливите, декларирани с ключова дума let, могат да бъдат актуализирани.
let var1 = "ABC" var2 = "XYZ" console.log(var2) //XYZ
Ако една и съща променлива е декларирана в два различни обхвата, това е валиден код и не се показва грешка
let var1= "ABC";
if (true) {
let var1= "XYZ";
console.log(var1); // XYZ
}
console.log(var1); //ABC
конст
След като променливата бъде инициализирана, тя не може да бъде актуализирана. Ще изведе грешка при опит за актуализиране на стойността
const var1= "ABC"; var1= "XYZ";// error: Assignment to constant variable.
Докато const обектът не може да бъде актуализиран, свойствата на обекта могат да бъдат актуализирани.
const person= {
name: "XYZ",
age: 4
}
//Not allowed. This will throw an error
person= {
address: "abc road",
phoneNumber: 12345
}
Но свойствата могат да бъдат актуализирани.
const person= {
name: "XYZ",
age: 4
}
//Valid case.
person.name = "ABC";
Вижте тази публикация в блог, която включва повече подробности.
Функции на стрелките
Функцията стрелка е алтернативен начин за писане на функция в JavaScript. Това е по-кратка и сбита форма на функция. Можем да го видим много в кода на React.
//Standard way of writing arrow function. if there are no arguments, then just () is fine
const addFunc = (arg1, arg2) => {
return arg1 + arg2
}
Забележете (arg1, arg2) . Нарича се като анонимна функция (функция без име). Следвано от ⇒, което показва, че това е функция със стрелка.
Ако имаме точно един аргумент, който се предава на функцията, тогава можем да пропуснем скобите около аргументите
//Brackets are omitted.
const squareFunc = arg1 => {
return arg1 * arg1
}
//If function doesn't have arguments, then below code is **not a valid syntax**.
const alphabet = =>{
return "A"
}
//For representing no arguments for the function use regular syntax.
const alphabet = () => {
return "A"
}
Освен това, ако единственият оператор във функцията е оператор return, тогава синтаксисът може да бъде съкратен още повече. Тук фигурните скоби, обграждащи израза за връщане и самата ключова дума за връщане, могат да бъдат пропуснати и пак ще бъде валиден синтаксис.
//Original implementation
const addFunc = (arg1, arg2) => {
return arg1 + arg2
}
//Shortened version if the only statement in the function is return statement
const addFunc = (arg1, arg2) => arg1 + arg2
Операторите за разпространение и почивка
… Тези три точки имат силата да променят начина, по който се анализират масивите.
В JavaScript операторите за разпространение и почивка са полезни функции, които ви позволяват да работите с масиви и обекти по-ефективно. Те имат малко различни случаи на употреба, но и двете включват използването на три точки (...). Нека да разгледаме всеки от тях с примери:
Оператор на разпространение (...):
Операторът spread се използва за разширяване на итерируем (като масив или низ) в отделни елементи. Може да се използва в извиквания на функции, литерали на масиви или литерали на обекти.
Пример 1: Извиквания на функции
const numbers = [1, 2, 3, 4, 5]; console.log(...numbers); // Output: 1 2 3 4 5 const max = Math.max(...numbers); console.log(max); // Output: 5
Пример 2: Масивни литерали
const array1 = [1, 2, 3]; const array2 = [...array1, 4, 5, 6]; console.log(array2); // Output: [1, 2, 3, 4, 5, 6]
Пример 3: Обектни литерали (плитко копие)
const obj1 = { name: 'John', age: 30 };
const obj2 = { ...obj1, city: 'New York' };
console.log(obj2); // Output: { name: 'John', age: 30, city: 'New York' }
Параметър за почивка (...):
Операторът rest се използва за представяне на множество елементи като масив. Тя ви позволява да съберете оставащите аргументи на функцията в масив или да заснемете отделни елементи, докато деструктурирате масив.
Пример 1: Функционални параметри
function sum(...numbers) {
return numbers.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // Output: 15
Пример 2: Деструктуриране на масиви
const [first, second, ...rest] = [1, 2, 3, 4, 5]; console.log(first); // Output: 1 console.log(second); // Output: 2 console.log(rest); // Output: [3, 4, 5]
Пример 3: Комбиниране на оператори за почивка и разпространение
const numbers = [1, 2, 3, 4, 5]; const [first, ...rest] = numbers; console.log(first); // Output: 1 console.log(...rest); // Output: 2 3 4 5
Операторът spread разширява елементи, докато операторът rest събира елементи. И двата оператора предоставят мощна функционалност за работа с масиви и обекти в JavaScript.
Унищожаване
Деструктурирането е функция в JavaScript, която ви позволява да извличате стойности от масиви или свойства от обекти в отделни променливи. Той предоставя кратък начин за разопаковане на стойности от структури от данни. Нека проучим как работи деструктурирането с примери:
Деструктуриране на масиви:
Можете да извлечете стойности от масив и да ги присвоите на отделни променливи с помощта на destructurin на масив
Пример 1:
const numbers = [1, 2, 3]; const [a, b, c] = numbers; console.log(a); // Output: 1 console.log(b); // Output: 2 console.log(c); // Output: 3
Пример 2: Пропускане на елементи
const numbers = [1, 2, 3, 4, 5]; const [a, , c] = numbers; console.log(a); // Output: 1 console.log(c); // Output: 3
Пример 3: Елемент за почивка
const numbers = [1, 2, 3, 4, 5]; const [a, ...rest] = numbers; console.log(a); // Output: 1 console.log(rest); // Output: [2, 3, 4, 5]
Разрушаване на обекти:
Можете да извлечете свойства от обект и да ги присвоите на отделни променливи, като използвате деструктуриране на обект.
Пример 1:
const person = {
name: 'John',
age: 30,
city: 'New York'
};
const { name, age, city } = person;
console.log(name); // Output: 'John'
console.log(age); // Output: 30
console.log(city); // Output: 'New York'
Пример 2: Присвояване на имена на различни променливи
const person = {
name: 'John',
age: 30,
city: 'New York'
};
const { name: fullName, age: years, city: location } = person;
console.log(fullName); // Output: 'John'
console.log(years); // Output: 30
console.log(location); // Output: 'New York'
Пример 3: Стойности по подразбиране
const person = {
name: 'John',
age: 30
};
const { name, age, city = 'Unknown' } = person;
console.log(name); // Output: 'John'
console.log(age); // Output: 30
console.log(city); // Output: 'Unknown'
Деструктурирането е мощна функция в JavaScript, която ви позволява да извличате стойности от масиви или обекти по удобен начин, което прави кода ви по-сбит и четим.
Методи за масиви (карта, филтър, foreach)
В JavaScript map, filter и forEach са методи за масиви от по-висок ред, които ви позволяват да извършвате операции с масиви по по-сбит и функционален начин. Нека разгледаме всеки от тези методи с примери:
карта:
Методът map създава нов масив чрез трансформиране на всеки елемент от оригиналния масив въз основа на функция за обратно извикване.
Пример:
const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map((num) => num * 2); console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
филтър:
Методът filter създава нов масив чрез филтриране на елементи от оригиналния масив въз основа на условие, дефинирано във функция за обратно извикване.
Пример:
const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter((num) => num % 2 === 0); console.log(evenNumbers); // Output: [2, 4]
за всеки:
Методът forEach итерира всеки елемент в масив и изпълнява функция за обратно извикване за всеки елемент.
Пример:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => {
console.log(num);
});
// Output:
// 1
// 2
// 3
// 4
// 5
Забележка: За разлика от map и filter, forEach не връща нов масив. Използва се главно, когато искате да извършите страничен ефект (като регистриране) за всеки елемент в масива.
Тези методи предоставят по-функционален и декларативен подход за работа с масиви в JavaScript. Те помагат за опростяване на кода и го правят по-лесен за четене и разбиране.
Благодарим ви, че прочетохте! Надяваме се, че ще намерите тази статия за полезна.
