Частые ошибки JavaScript

Эта глава указывает на некоторые распространенные ошибки JavaScript.

Если программист意外 использует оператор назначения

Если программист if Эта инструкция意外 использует оператор назначения (=）вместо оператора сравнения (=====），JavaScript-программа может produce некоторые непредсказуемые результаты.

Эта if Эта инструкция возвращает false（как ожидалось), потому что x не равен 10:

var x = 0;
if (x == 10)

Попробуйте сами

Эта if Эта инструкция возвращает true（возможно, не так, как ожидалось), потому что 10 в true:

var x = 0;
if (x = 10)

Попробуйте сами

Эта if Эта инструкция возвращает false（возможно, не так, как ожидалось), потому что 0 в false:

var x = 0;
if (x = 0)

Попробуйте сами

Аналогично всегда возвращает значение,assigned

Эта инструкция ожидает лояльного сравнения

В обычном сравнении данные типа не важны. Эта if Эта инструкция возвращает true:

var x = 10;
var y = "10";
if (x == y)

Попробуйте сами

В строгом сравнении данные типа действительно важны. Эта if Эта инструкция возвращает false:

var x = 10;
var y = "10";
if (x === y)

Попробуйте сами

Одна из частых ошибок - забыть в switch Эта инструкция использует строгое сравнение:

Эта switch Эта инструкция будет показывать диалоговое окно:

var x = 10;
switch(x) {
    case 10: alert("Hello");
}

Попробуйте сами

Эта switch Эта инструкция не будет показывать диалоговое окно:

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

Попробуйте сами

Запутанные сложение и каскадирование

СложениеДля сложенияЧисло.

Каскадирование (Concatenation)Для сложенияСтрока.

В JavaScript оба этих действия используют один и тот же + Оператор.

Таким образом, сложение чисел как чисел и как строк produces различные результаты:

var x = 10 + 5;          // Результат в x будет 15
var x = 10 + "5";         // Результат в x будет "105"

Попробуйте сами

Если к двум переменным добавить, трудно предсказать результат:

var x = 10;
var y = 5;
var z = x + y;            // Результат в z будет 15
var x = 10;
var y = "5";
var z = x + y;            // Результат в z будет "105"

Попробуйте сами

Запутанные плавающие числа

Все числа в JavaScript хранятся в 64-битном форматеЧисла с плавающей запятой (Floats).

Все языки программирования, включая JavaScript, сталкиваются с трудностями при обработке чисел с плавающей запятой:

var x = 0.1;
var y = 0.2;
var z = x + y             // результат в z не будет 0.3

Попробуйте сами

Чтобы решить эту проблему, используйте умножение и деление:

Пример

var z = (x * 10 + y * 10) / 10;       // результат в z будет 0.3

Попробуйте сами

Перенос строки в JavaScript-строке

JavaScript позволяет вам разбить строку на две строки:

Пример 1

var x =
"Hello World!";

Попробуйте сами

Но перевод строки посередине строки не правильный:

Пример 2

var x = "Hello
World!";

Попробуйте сами

Если необходимо вводить строку в строке, то необходимо использовать обратную косую черту:

Пример 3

var x = "Hello ",
World!";

Попробуйте сами

Смещенная точка с запятой

Из-за неправильной точки с запятой этот блок кода будет выполняться независимо от значения x:

if (x == 19);
{
     // блок кода
}

Попробуйте сами

Перенос строки в return-строке

Автоматическое закрытие строки в конце строки - это стандартное поведение JavaScript.

Таким образом, два следующих примера вернут одинаковый результат:

Пример 1

function myFunction(a) {
    var power = 10  
    return a * power
}

Попробуйте сами

Пример 2

function myFunction(a) {
    var power = 10;
    return a * power;
}

Попробуйте сами

JavaScript также позволяет вам разбить строку на две строки.

Таким образом, пример 3 также вернет одинаковый результат:

Пример 3

function myFunction(a) {
    var
    power = 10;  
    return a * power;
}

Попробуйте сами

Но если return Что会发生, если перевести строку на две строки?

Пример 4

function myFunction(a) {
    var
    power = 10;  
    return
    a * power;
}

Попробуйте сами

Эта функция вернет неопределенное!

Почему? Потому что JavaScript считает, что вы имеете в виду:

Пример 5

function myFunction(a) {
     var
    power = 10;  
    return;
    a * power;
}

Попробуйте сами

Объяснение

Если строка неполная:

var

JavaScript выполнит эту строку, читая следующую строку:

power = 10;

Но поскольку эта строка полная:

return

JavaScript автоматически закроет эту строку:

return;

Такое happens, потому что в JavaScript использование точек с запятой для закрытия (окончания) строки является опциональным.

JavaScript автоматически закрывает строку в конце строки. return строка, потому что это本身就是 полная строка.

Следовательно, никогда не используйте return Строка для перевода строки.

Доступ к массиву через именованный индекс

Многие языки программирования поддерживают массивы с именованными индексами.

Массивы с именованными индексами называют связанными массивами (или хешами).

JavaScript Не поддерживаетсяМассивы с именованными индексами.

В JavaScript:МассивыИспользуйтеЦелочисленные индексы:

Пример

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length вернет 3
var y = person[0];              // person[0] вернет "Bill"

Попробуйте сами

В JavaScript:ОбъектыИспользуйтеИменованные индексы.

Если вы используете именованные индексы, то при доступе к массиву JavaScript будет заново определять его как стандартный объект.

После автоматического переопределения методы или свойства массива будут производить неопределенные или неправильные результаты:

Пример

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length вернет 0
var y = person[0];              // person[0] вернет undefined

Попробуйте сами

Используйте запятую для завершения определения

Следующие запятые в определении объекта и массива являются законными в ECMAScript 5.

Пример объекта:

person = {firstName:"Bill", lastName:"Gates", age:62,};

Пример массива:

points = [35, 450, 2, 7, 30, 16,];

Внимание!!

Internet Explorer 8 будет аварийно завершен.

JSON не допускает следующих запятых.

JSON:

person = {firstName:"Bill", lastName:"Gates", age:62};

JSON:

points = [35, 450, 2, 7, 30, 16];

Undefined не равно Null

Объекты JavaScript, переменные, свойства и методы могут быть неопределенными.

Кроме того, значение пустого объекта JavaScript может быть: null.

Это может сделать задачу проверки пустоты объекта несколько сложнее.

Вы можете проверить, является ли тип теста: неопределенноеПроверяем наличие объекта:

Пример

if (typeof myObj === "undefined")

Попробуйте сами

но вы не можете проверить, является ли объект null, так как если объект неопределен, будет выведена ошибка:

Неправильно:

if (myObj === null)

Чтобы решить эту проблему, необходимо проверить, является ли объект nullвместо неопределенного.

но это все еще вызовет ошибку:

Неправильно:

if (myObj !== null && typeof myObj !== "undefined")

Таким образом, перед проверкой на не null, необходимо сначала проверить на неопределенное:

Правильно:

if (typeof myObj !== "undefined" && myObj !== null)

Попробуйте сами

ожидать блочной области видимости

JavaScript не будетсоздает новый область видимости для каждого блока кода.

Многие языки программирования таковы, но JavaScript Не так.

считает, что этот код вернет неопределенноеэто常见的新 JavaScript разработчиков ошибка:

Пример

for (var i = 0; i < 10; i++) {
  // блок кода
}
return i;

Попробуйте сами