JavaScript Поширені помилки
В цьому розділі вказані деякі поширені помилки JavaScript.
Випадкове використання оператора присвоювання
Програми JavaScript можуть генерувати неочікувані результати, якщо програміст випадково використає оператор присвоювання (=) замість оператора порівняння (==) в операторі if.
Цей оператор if повертає false (як і очікувалось), оскільки x не дорівнює 10:
let x = 0;
if (x == 10)
Спробуйте самі »
Цей оператор if повертає true (можливо, не так, як очікувалось), тому що 10 є true:
let x = 0;
if (x = 10)
Спробуйте самі »
Цей оператор if повертає false (можливо, не так, як очікувалось), тому що 0 - це false:
let x = 0;
if (x = 0)
Спробуйте самі »
Присвоєння завжди повертає значення присвоювання.
Очікування нечіткого порівняння
При звичному порівнянні тип даних не має значения. Цей оператор if повертає значення true:
let x = 10;
let y = "10";
if (x == y)
Спробуйте самі »
В строгому порівнянні тип даних має значення. Цей оператор if повертає false:
let x = 10;
let y = "10";
if (x === y)
Спробуйте самі »
Часто забувають, що в операторах switch використовується строге порівняння:
Цей case switch буде відображати попередження:
let x = 10;
switch(x) {
case 10: alert("Hello");
}
Спробуйте самі »
Цей case switch не буде відображати попередження:
let x = 10;
switch(x) {
case "10": alert("Hello");
}
Спробуйте самі »
Незрозуміле додавання & Конкатенація
Додавання - це додавання чисел.
Конкатенація - это додавання рядків.
В JavaScript в обох операціях використовується один і той самий оператор +.
Із-за цього додавання числа як числа призведе до іншого результату, ніж додавання числа у вигляді рядка:
let x = 10;
x = 10 + 5; // Тепер x дорівнює 15
let y = 10;
y += "5"; // Тепер y дорівнює "105"
Спробуйте самі »
При додаванні двох змінних буває важко передбачити результат:
let x = 10;
let y = 5;
let z = x + y; // Тепер z дорівнює 15
let x = 10;
let y = "5";
let z = x + y; // Тепер z дорівнює "105"
Спробуйте самі »
Нерозуміння чисел з плаваючою комою (флоатів)
Всі числа в JavaScript зберігаються як 64-бітні числа з плаваючою комою (флоати).
Всі мови програмування, включаючи JavaScript, мають складнощі з точними значеннями з плаваючою комою:
let x = 0.1;
let y = 0.2;
let z = x + y // результат z не буде 0.3
Спробуйте самі »
Щоб вирішити вказану вище проблему, допомагає множення та ділення:
Розрив рядка JavaScript
JavaScript дозволяє розбити оператор на два рядка:
Але розбити вираз в середині рядка не вийде:
Необхідно використовувати "бекслеш" (зворотну косу риску \ ), якщо треба розбити оператор на рядок:
Неправильне встановлення крапки з комою
Із-за неправильної крапки з комою цей блок коду буде виконуватись незалежно від значення x:
if (x == 19);
{
// блок коду
}
Спробуйте самі »
Порушення інструкції про повернення
За замовчуванням в JavaScript оператор автоматично закривається в кінці рядка.
По цій причині ці два приклади повертають однаковий результат:
JavaScript також дозволяє розбити оператор на два рядка.
Із-за цього приклад 3 також поверне той самий результат:
Але що відбудеться, якщо розділити оператор return на два рядки, як тут:
Функція поверне undefined!
Чому? Тому що JavaScript подумав, що ви мали на увазі наступне:
Пояснення
Якщо інструкція неповна, наприклад:
let
JavaScript намагається завершити інструкцію, прочитавши наступний рядок:
power = 10;
Але оскільки ця інструкція є повною:
return
JavaScript автоматично закриє її ось так:
return;
Це відбувається тому, що закриваючі (завершуючі) оператори з крапкою з комою не є обов’язковими в JavaScript.
JavaScript закриє оператор повернення (return) в кінці рядка, тому що це повна інструкція.
Николи не забувайте про оператор return.
Доступ до масивів за допомогою іменованих індексів
Багато мов програмування підтримують масиви з іменованими індексами.
Масиви з іменованими індексами називаються асоціативними масивами (або хешами).
JavaScript не підтримує масиви з іменованими індексами.
В JavaScript масиви використовують нумеровані індекси:
Приклад
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // person.length поверне 3
person[0]; // person[0] поверне "John"
Спробуйте самі »
В JavaScript об’єкти використовують іменовані індекси.
Якщо ви використовуєте іменований індекс при доступі до масиву, JavaScript перевизначить масив на стандартний об’єкт.
Після автоматичесного перевизначення методи і властивості масиву будуть давати невизначені (undefined) або невірні (incorrect) результати:
Приклад:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // person.length поверне 0
person[0]; // person[0] поверне undefined
Спробуйте самі »
Завершення визначень комою
Кінцеві коми у визначеннях об’єктів та масивів допустимі в ECMAScript 5.
Приклад об’єкту:
person = {firstName:"John", lastName:"Doe", age:46,}
Приклад масиву:
points = [40, 100, 1, 5, 25, 10,];
УВАГА!!
Internet Explorer 8 вийде із ладу.
JSON не допускає використання кінцевих ком.
JSON:
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON:
points = [40, 100, 1, 5, 25, 10];
Undefined не дорівнює нулю
Об’єкти, змінні, властивості та методи JavaScript можуть бути undefined.
Крім того, пусті об’єкти JavaScript можуть мати значення null.
Це може дещо ускладнити перевірку того, що об’єкт пустий.
Ви можете перевірити, чи існує об’єкт, перевіривши його тип undefined:
Але ви не можете перевірити, чи є об’єкт null, тому що це викличе помилку, якщо об’єкт undefined:
Невірно:
if (myObj === null)
Щоб вирішити цю проблему, ви маєте перевірити, чи не є об’єкт null, та не є undefined.
Але це все одно може викликати помилку:
Невірно:
if (myObj !== null && typeof myObj !== "undefined")
Із-за цього ви маєте перевірити, не undefined до того, як ви зможете перевірити не null:
