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:
