САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

JS Учебник

JS Главная JS Введение JS Где установить? JS Вывод JS Заявления JS Синтаксис JS Комментарии JS Переменные JS Let JS Const JS Операторы JS Арифметика JS Присваивание JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строк JS Поиск строк JS Шаблоны строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Постоянный массив JS Даты JS Формат дат JS Методы получения дат JS Методы набора дат JS Объекты Math JS Случайные числа JS Булевы JS Сравнения JS Оператор If...Else JS Оператор Switch JS Цикл For JS Цикл For In JS Цикл For Of JS Цикл While JS Оператор Break JS Повторяющиеся JS Наборы JS Карты JS Typeof JS Преобразование JS Битовые JS Выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Стрелки JS Классы JS JSON JS Отладчик JS Стиль JS Практика JS Ошибки JS Эффективность JS Слова

JS Версии

JS Версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/Edge JS История

JS Объекты

Определение объекта Свойства объекта Методы объекта Отображение объекта Доступ объекта Конструкторы объекта Прототипы объекта Повторяющиеся объекты Набор объектов Карты объекта Справочник объектов

JS Функции

Определение функций Параметры функции Обращение к функции Вызов функции Применение функции Закрытие функции

JS Классы

Введение класса Наследование класса Статистический класс

JS Асинхронный

JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM Формы DOM CSS DOM Анимация DOM События DOM Прослушиватель DOM Навигация DOM Узлы DOM Коллекция DOM Список узлов

JS Браузер BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Куки

JS Веб APIы

Веб API Введение Веб API История Веб API Хранилище Веб API Работник Веб API Извлечь Веб API Геолокации

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос на сервер AJAX Ответ с сервера AJAX Файл XML AJAX Файл PHP AJAX Файл ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS или jQuery

jQuery Селекторы jQuery Элементы jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввод JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочник

JavaScript Объекты HTML DOM Объекты


JavaScript Распространенные ошибки



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


Случайное использование оператора присваивания

Программы JavaScript могут генерировать неожиданные результаты, если программист случайно использует оператор присваивания (=) вместо оператора сравнения (==) в операторе if.

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

var x = 0;
if (x == 10)
Попробуйте сами »

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

var x = 0;
if (x = 10)
Попробуйте сами »

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

var x = 0;
if (x = 0)
Попробуйте сами »

Присвоение всегда возвращает значение присваивания.


Ожидание бесполезного сравнения

При обычном сравнении тип данных не имеет значения. Это оператор if возвращает true:

var x = 10;
var y = "10";
if (x == y)
Попробуйте сами »

В строгом сравнении тип данных имеет значение. Это оператор if возвращает false:

var x = 10;
var y = "10";
if (x === y)
Попробуйте сами »

Распространенная ошибка - забывать, что оператор switch использует строгое сравнение:

Переключатель регистра case switch отобразит предупреждение:

var x = 10;
switch(x) {
case 10: alert("Привет");
}
Попробуйте сами »

Переключатель регистра case switch не будет отображать предупреждение:

var x = 10;
switch(x) {
case "10": alert("Привет");
}
Попробуйте сами »


Смешение сложение и конкатенация

Сложение касается сложения чисел.

Конкатенация это добавление строк.

В JavaScript обе операции используют один и тот же + оператор.

Из-за этого добавление числа в виде числа приведет к другому результату, чем добавление числа в виде строки:

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 =
"Привет Мир!";
Попробуйте сами »

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

Пример 2

var x = "Привет
Мир!";
Попробуйте сами »

Вы должны использовать "бэкслэш" (обратную косую черту), если вы должны разбить оператор в строке:

Пример 3

var x = "Привет \
Мир!";
Попробуйте сами »

Неправильная точка с запятой

Из-за неправильной точки с запятой, этот блок кода будет выполняться независимо от значения 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;
}
Попробуйте сами »

Функция вернет undefined!

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

Пример 5

function myFunction(a) {
var
power = 10;
return;
a * power;
}
Попробуйте сами »

Объяснение

Если объявление неполное, например:

var

JavaScript попытается завершить объявление, прочитав следующую строку:

power = 10;

Но поскольку это объявление завершено:

return

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

return;

Это происходит потому, что закрывающие (завершающие) объявления с точкой с запятой не являются обязательными в JavaScript.

JavaScript закроет оператор возврата в конце строки, потому что это полное заявление.

Никогда не обрывайте оператор return.


Доступ к массивам с помощью именованных индексов

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

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

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

В JavaScript массивы используют нумерованные индексы:

Пример

var person = [];
person[0] = "Щипунов";
person[1] = "Андрей";
person[2] = 46;
var x = person.length; // person.length вернет 3
var y = person[0]; // person[0] вернет "Щипунов"
Попробуйте сами »

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

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

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

Пример:

var person = [];
person["firstName"] = "Щипунов";
person["lastName"] = "Андрей";
person["age"] = 46;
var x = person.length; // person.length вернет 0
var y = person[0]; // person[0] вернет undefined
Попробуйте сами »

Завершение определений запятой

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

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

person = {firstName:"Щипунов", lastName:"Андрей", age:46,}

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

points = [40, 100, 1, 5, 25, 10,];

ПРЕДУПРЕЖДЕНИЕ !!

Internet Explorer 8 выйдет из строя.

JSON не допускает использование конечных запятых.

JSON:

person = {"firstName":"Щипунов", "lastName":"Андрей", "age":46}

JSON:

points = [40, 100, 1, 5, 25, 10];

Undefined не является Null

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

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

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

Вы можете проверить, существует ли объект, проверив, является ли тип undefined:

Пример:

if (typeof myObj === "undefined")
Попробуйте сами »

Но вы не можете проверить, является ли объект null, потому что это вызовет ошибку, если объект undefined:

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

if (myObj === null)

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

Но это все равно может выдать ошибку:

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

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

Поэтому вы должны протестировать на нет, undefined прежде чем сможете проверить на нет null:

Правильно:

if (typeof myObj !== "undefined" && myObj !== null)
Попробуйте сами »