JavaScript Довідник операторів
JavaScript Оператори
Оператори використовуються для призначення значень, порівняння значень, виконання арифметичних операцій тощо.
Існують різні типи операторів JavaScript:
- Арифметичні оператори
- Оператори присвоєння
- Оператори порівняння
- Логічні оператори
- Умовні оператори
- Оператори типу
Арифметичні оператори JavaScript
Арифметичні оператори використовуються для виконання арифметичних дій між змінними та/або значеннями.
Враховуючи те, що y = 5, таблиця нижче пояснює арифметичні оператори:
| Оператор | Назва | Приклад | Результати | Спробуй це |
|---|---|---|---|---|
| + | Додавання | x = y + 2 | y=5, x=7 | Спробуй це » |
| - | Віднімання | x=y-2 | y=5, x=3 | Спробуй це » |
| * | Множення | x=y*2 | y=5, x=10 | Спробуй це » |
| ** | Піднесення до степеня ES2016 |
x=y**2 | y=5, x=25 | Спробуй це » |
| / | Ділення | x = y / 2 | y=5, x=2.5 | Спробуй це » |
| % | Залишок | x = y % 2 | y=5, x=1 | Спробуй це » |
| ++ | Пре-інкремент | x = ++y | y=6, x=6 | Спробуй це » |
| ++ | Пост-інкремент | x = y++ | y=6, x=5 | Спробуй це » |
| -- | Пре-декремент | x = --y | y=4, x=4 | Спробуй це » |
| -- | Пост-декремент | x = y-- | y=4, x=5 | Спробуй це » |
Щоб дізнатись більше про арифметичні оператори, прочитайте розділ JavaScript Арифметика на нашому сайті W3Schools українською.
JavaScript Оператори присвоєння
Оператори присвоєння використовуються для призначення значень змінним JavaScript.
З огляду на те, що x = 10 та y = 5, у таблиці нижче пояснюються оператори присвоєння:
| Оператор | Приклад | Такий же, як | Результат | Спробуй це |
|---|---|---|---|---|
| = | x = y | x = y | x = 5 | Спробуй це » |
| += | x += y | x = x + y | x = 15 | Спробуй це » |
| -= | x -= y | x = x - y | x = 5 | Спробуй це » |
| *= | x *= y | x = x * y | x = 50 | Спробуй це » |
| /= | x /= y | x = x / y | x = 2 | Спробуй це » |
| %= | x %= y | x = x % y | x = 0 | Спробуй це » |
| : | x: 45 | size.x = 45 | x = 45 | Спробуй це » |
Щоб дізнатись більше про оператори присвоєння, прочитайте розділ JavaScript Присвоєння.
JavaScript Рядкові оператори
Оператори + та += також можна використовувати для об’єднання (додавання) рядків.
Враховуючи те, що t1 = "Good ", t2 = "Morning", та t3 = "", у таблиці нижче пояснюються оператори:
| Оператор | Приклад | t1 | t2 | t3 | Спробуй це |
|---|---|---|---|---|---|
| + | t3 = t1 + t2 | "Good " | "Morning" | "Good Morning" | Спробуй це » |
| += | t1 += t2 | "Good Morning" | "Morning" | Спробуй це » |
Оператори порівняння
Оператори порівняння використовуються в логічних висловлюваннях для визначення рівності чи різниці між змінними або значеннями.
Враховуючи те, що x = 5, у таблиці нижче пояснюються оператори порівняння:
| Оператор | Назва | Порівнюючи | Повертає | Спробуй це |
|---|---|---|---|---|
| == | дорівнює | x == 8 | false | Спробуй це » |
| == | дорівнює | x == 5 | true | Спробуй це » |
| === | дорівнює значення та тип | x === "5" | false | Спробуй це » |
| === | дорівнює значення та тип | x === 5 | true | Спробуй це » |
| != | не дорівнює | x != 8 | true | Спробуй це » |
| !== | не дорівнює значення або тип | x !== "5" | true | Спробуй це » |
| !== | не дорівнює значення або тип | x !== 5 | false | Спробуй це » |
| > | більше ніж | x > 8 | false | Спробуй це » |
| < | менше ніж | x < 8 | true | Спробуй це » |
| >= | більше або дорівнює | x >= 8 | false | Спробуй це » |
| <= | менше або дорівнює | x <= 8 | true | Спробуй це » |
Щоб дізнатись більше про оператори порівняння, прочитайте розділ JavaScript Порівняння.
Умовний (тернарний) оператор
Умовний оператор присвоює значення змінній на основі умови.
| Синтаксис | Приклад | Спробуй це |
|---|---|---|
| (умова) ? x : y | (z < 18) ? x : y | Спробуй це » |
Логічні оператори
Логічні оператори використовуються для визначення логіки між змінними або значеннями.
Враховуючи, що x = 6 та y = 3, у таблиці нижче пояснюються логічні оператори:
| Оператор | Назва | Приклад | Спробуй це |
|---|---|---|---|
| && | AND | (x < 10 && y > 1) is true | Спробуй це » |
| || | OR | (x === 5 || y === 5) is false | Спробуй це » |
| ! | NOT | !(x === y) is true | Спробуй це » |
Нульовий оператор об’єднання (??)
Оператор ?? повертає перший аргумент, якщо він не nullish (нульовий) (null або undefined).
В іншому випадку він повертає другий аргумент.
Оператор nullish підтримується в усіх браузерах з березня 2020 року:
| Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
| Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |
Необов’язковий оператор з’єднання (?.)
Оператор ?. повертає undefined, якщо об’єкт undefined або null (замість викидання помилки).
Приклад
// Створити об’єкт:
const car = {type:"Fiat", model:"500", color:"white"};
// Запитати назву автомобіля:
document.getElementById("demo").innerHTML = car?.name;
Спробуйте самі »
Необов’язковий оператор з’єднання підтримується в усіх браузерах з березня 2020 року:
| Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
| Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |
JavaScript Порозрядні (побітові) оператори
Бітові оператори працюють із 32-бітними числами. Будь-який числовий операнд в операції перетворюється на 32-розрядне число. Результат перетворюється назад на число JavaScript.
| Оператор | Назва | Приклад | Такий же, як | Результат | Десятковий | Спробуй це |
|---|---|---|---|---|---|---|
| & | AND | x = 5 & 1 | 0101 & 0001 | 0001 | 1 | Спробуй це » |
| | | OR | x = 5 | 1 | 0101 | 0001 | 0101 | 5 | Спробуй це » |
| ~ | NOT | x = ~ 5 | ~0101 | 1010 | 10 | Спробуй це » |
| ^ | XOR | x = 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 | Спробуй це » |
| << | Left shift | x = 5 << 1 | 0101 << 1 | 1010 | 10 | Спробуй це » |
| >> | Right shift | x = 5 >> 1 | 0101 >> 1 | 0010 | 2 | Спробуй це » |
| >>> | Unsigned right | x = 5 >>> 1 | 0101 >>> 1 | 0010 | 2 | Спробуй це » |
Примітка
У таблиці вище використовується 4-бітне число без знаку. Оскільки JavaScript використовує 32-розрядні числа зі знаком, ~ 5 не поверне 10. Повернеться -6.
~00000000000000000000000000000101 (~5)
поверне
11111111111111111111111111111010 (-6)
Оператор typeof
Оператор typeof повертає тип змінної, об’єкта, функції чи виразу:
Будь ласка, дотримуйтесь:
- Тип даних NaN – число
- Тип даних масиву – об’єкт
- Тип даних дати — об’єкт
- Тип даних null — об’єкт
- Тип даних невизначеної змінної є undefined
Приклад
typeof "John"
typeof 3.14
typeof NaN
typeof false
typeof [1, 2, 3, 4]
typeof {name:'John', age:34}
typeof new Date()
typeof function () {}
typeof myCar
typeof null
Спробуйте самі »
Примітка
Ви не можете використовувати typeof, щоб визначити, чи є об’єкт JavaScript масивом чи датою.
Масив і дата повертають об’єкт як тип.
Оператор delete (видалення)
Оператор delete видаляє властивість з об’єкта:
Приклад
const person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
delete person.age;
Спробуйте самі »
Оператор delete видаляє як значення властивості, так і саму властивість.
Після видалення властивість не можна використовувати, доки її не буде знову додано.
Оператор delete призначений для використання у властивостях об’єкта. Це не впливає на змінні чи функції.
Примітка
Оператор delete не слід використовувати для властивостей будь-яких попередньо визначених об’єктів JavaScript (масив, логічний вираз, дата, функція, математика, число, регулярний вираз і рядок).
Це може привести до збою вашої програми.
Оператор Поширення (...)
Оператор ... розширює iterable на більше елементів:
Приклад
const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];
const year = [...q1, ...q2, ...q3, ...q4];
Спробуйте самі »
Оператор ... можна використовувати, щоб розширити ітерацію на більше аргументів для викликів функцій:
Оператор in
Оператор in повертає true, якщо властивість міститься в об’єкті, інакше повертає false:
Приклад об’єкту
const person = {firstName:"John", lastName:"Doe", age:50};
("firstName" in person);
("age" in person);
Спробуйте самі »
Примітка
Ви не можете використовувати in для перевірки вмісту масиву, наприклад ("Volvo" в cars).
Властивості масиву можуть бути лише індексом (0,1,2,3...) і довжиною.
Див. приклади нижче.
Приклади
const cars = ["Saab", "Volvo", "BMW"];
("Saab" in cars);
Спробуйте самі »
const cars = ["Saab", "Volvo", "BMW"];
(0 in cars);
(1 in cars);
(4 in cars);
("length" in cars);
Спробуйте самі »
Попередньо визначені об’єкти
("PI" in Math);
("NaN" in Number);
("length" in String);
Спробуйте самі »
Оператор instanceof
Оператор instanceof повертає true, якщо об’єкт є екземпляром зазначеного об’єкта:
Приклад
const cars = ["Saab", "Volvo", "BMW"];
(cars instanceof Array) // Повертає true
(cars instanceof Object) // Повертає true
(cars instanceof String) // Повертає false
(cars instanceof Number) // Повертає false
Спробуйте самі »
Оператор void
Оператор void обчислює вираз і повертає undefined. Цей оператор часто використовується для отримання невизначеного примітивного значення за допомогою "void(0)" (корисно під час обчислення виразу без використання значення, що повертається).
Приклад
<a href="javascript:void(0);">
Марне посилання
</a>
<a href="javascript:void(document.body.style.backgroundColor='red');">
Натисніть мене, щоб змінити колір фону тіла на червоний
</a>
Спробуйте самі »
