JavaScipt - Синтаксис
Синтаксисът на JavaScript е сравнително лесен за разбиране. В тази статия ще разгледаме, някои от основните елементи на синтаксиса на JavaScript - ECMAScript 6 (ES6).
Какво е ES6?
ES6 (ECMAScript 2015) е версия на стандарта на JavaScript, която е публикувана през 2015 г. Тя включва значително количество нови функционалности и подобрения в езика, които правят програмирането на JavaScript по-лесно и ефективно.
Деклариране на променливи
Декларирането на променливи в ES6 може да се извършва с помощта на ключовите думи let и const. let и const са блокови области и не позволяват изпълнението на променливи извън обхвата им.
let x = 5;
const y = "Hello";
Оператори
JavaScript има много оператори, като по-долу са изброени някои от тях:
- Аритметични оператори:
+,-,*,/,% - Сравнителни оператори:
==,===,!=,!==,<,>,<=,>= - Логически оператори:
&&,||,! - Побитови оператори:
&,|,^,~,<<,>>,>>> - Други:
=,+=,-=и т.н.
// Равенство
console.log(1 == 1); // true
console.log(1 == "1"); // true
console.log(1 == true); // true
// Неравенство
console.log(1 != 2); // true
console.log(1 != "1"); // false
console.log(1 != true); // false
// Строго равенство
console.log(1 === 1); // true
console.log(1 === "1"); // false
console.log(1 === true); // false
// Строго неравенство
console.log(1 !== 2); // true
console.log(1 !== "1"); // true
console.log(1 !== true); // true
// По-голямо от
console.log(2 > 1); // true
console.log("a" > "b"); // false
// По-малко от
console.log(1 < 2); // true
console.log("a" < "b"); // true
// По-голямо или равно на
console.log(2 >= 2); // true
console.log("a" >= "A"); // true
// По-малко или равно на
console.log(1 <= 2); // true
console.log("a" <= "A"); // false
// Логическо И
const a = true;
const b = false;
console.log(a && b); // false
console.log(a && true); // true
// Логическо ИЛИ
console.log(a || b); // true
console.log(false || false); // false
// Логическо отрицание
console.log(!a); // false
console.log(!b); // true
Условни оператори
Условните оператори в JavaScript включват if, else if, else и switch.
if (x > 10) {
console.log("x е по-голямо от 10");
} else if (x === 10) {
console.log("x е равно на 10");
} else {
console.log("x е по-малко от 10");
}
switch (x) {
case 10:
console.log("x е равно на 10");
break;
case 20:
console.log("x е равно на 20");
break;
default:
console.log("x не е равно на 10 или 20");
}
Цикли
JavaScript поддържа for, while, do-while цикли.
for (let i = 0; i < 10; i++) {
console.log(i);
}
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
let j = 0;
do {
console.log(j);
j++;
} while (j < 10);
Функции
В JavaScript можем да дефинираме функции по много начини. Един от тях е чрез ключовата дума function.
function sum(a, b) {
return a + b;
}
console.log(sum(2, 3)); // 5
Arrow функции
Arrow функциите са нова форма на функции, която е по-лесна за използване и разбиране.
const add = (a, b) => {
return a + b;
}
const square = x => x * x;
Масиви
Масивите са списък от елементи и могат да бъдат декларирани по следния начин:
const arr = [1, 2, 3, 4, 5];
console.log(arr[0]); // 1
console.log(arr.length); // 5
Обекти
В JavaScript можем да дефинираме обекти с ключовата дума let или const, като можем да ги дефинираме по два начина - с : или =.
let obj = {a: 1, b: 2};
console.log(obj.a); // 1
const person = {
firstName: "John",
lastName: "Doe",
age: 30,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName()); // "John Doe"
Класове
ES6 въведоха класове в JavaScript, като с тях можем да създадем обектно-ориентиран код.
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
fullName() {
return this.firstName + " " + this.lastName;
}
}
let person = new Person("John", "Doe");
console.log(person.fullName()); // "John Doe"
Деструктуриране
Деструктурирането позволява извличането на елементи от масиви и обекти в отделни променливи.
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
const obj = { name: "John", age: 30 };
const { name, age } = obj;
console.log(name); // John
console.log(age); // 30
Template literals
Template literals са нов начин за дефиниране на низове. Те позволяват включването на променливи в низа.
const name = "John";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!
Изключения
В JavaScript можем да обработваме изключения с ключовата дума try-catch.
try {
// код, който може да хвърли изключение
} catch (e) {
// код, който обработва изключението
}
Параметри по подразбиране във функции
До появата на ES6, за да се зададе стойност по подразбиране за параметър в функцията, трябваше да се проверява дали са подадени стойности и да се задава стойност по подразбиране, ако нямаше такива. С ES6 това може да се направи по-лесно, като се зададе стойността по подразбиране директно към параметъра в декларацията на функцията.
Ето няколко примера за използване на параметри по подразбиране в функции с ES6:
// Подразбиращи стойности за параметри
function multiply(a, b = 1) {
return a * b;
}
multiply(5); // 5
multiply(5, 2); // 10
// Използване на изрази за подразбиращи стойности
function greeting(name = 'гост') {
return `Здравейте, ${name}!`;
}
greeting(); // Здравейте, гост!
greeting('Петър'); // Здравейте, Петър!
// Използване на друг параметър за подразбираща стойност
function createFullName(firstName, lastName = '') {
return `${firstName} ${lastName}`;
}
createFullName('Иван'); // Иван
createFullName('Петър', 'Петров'); // Петър Петров
При декларирането на функцията можем да зададем стойност по подразбиране за втория параметър. Ако, при извикване на функцията не подадем стойност за втория параметър, ще бъде използвана стойността по подразбиране, която сме задали.
В същото време, можем да използваме и изрази за дефиниране на стойностите по подразбиране, както и да използваме друг параметър за подразбираща стойност. Това прави кода по-четим и по-малко накъсан, като също така дава възможност за по-голяма гъвкавост при използване на функции в различни ситуации.