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

JS Учебник

JS Главная JS Введение JS Что? Где? Куда? JS Вывод JS Заявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметика JS Присваивания JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Объекты дат JS Формат дат JS Метод получения дат JS Метод набора дат JS Математические... JS Случайные числа JS Булевы JS Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

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

JS Функции

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

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

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

JS Браузера BOM

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

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 Веб API

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

JS или jQuery

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

JS Примеры

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

JS Справочник

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


Реклама на Schoolsw3

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("Hello");
}
Попробуйте сами »

Этот case switch не будет отображать предупреждение:

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


Запутывающее сложение и конкатенация

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

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

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

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

Пример 2

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

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

Пример 3

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

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

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

if (x == 19);
{
  // блок кода
}
Попробуйте сами »

Нарушение заявления о возврате

По умолчанию в 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 закроет заявление возврата в конце строки, потому что это полное заявление.

Никогда не нарушайте возвратное заявление.


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

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

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

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

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

Пример

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

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

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

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

Пример:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;      // person.length вернет 0
var y = 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];

Неопределенное не равно 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) 
Попробуйте сами »