Учебник по 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-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки 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/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

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

JS-классы

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

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

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

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


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


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


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

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

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

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

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

let x = 0;
if (x = 10)

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

let x = 0;
if (x = 0)

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


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

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

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

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

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;       // Now x is 15

let y = 10;
y += "5";        // Now y is "105"

При добавлении двух переменных может быть трудно предугадать результат:

let x = 10;
let y = 5;
let z = x + y;     // Now z is 15

let x = 10;
let y = "5";
let z = x + y;     // Now z is "105"

Непонимание поплавков

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

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

let x = 0.1;
let y = 0.2;
let z = x + y            // the result in z will not be 0.3

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

Пример

let z = (x * 10 + y * 10) / 10;       // z will be 0.3

Разрыв строки JavaScript

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

Пример 1

let x =
"Hello World!";

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

Пример 2

let x = "Hello
World!";

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

Пример 3

let x = "Hello \
World!";

Неуместная точка с запятой

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

if (x == 19);
{
  // code block 
}

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

По умолчанию JavaScript автоматически закрывает оператор в конце строки.

Из-за этого эти два примера вернут один и тот же результат:

Пример 1

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

Пример 2

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

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

Из-за этого пример 3 также вернет тот же результат:

Пример 3

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

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

Пример 4

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

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

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

Пример 5

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

Объяснение

Если утверждение неполное, например:

let

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

power = 10;

Но так как это утверждение завершено:

return

JavaScript автоматически закроет его следующим образом:

return;

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

JavaScript закроет оператор return в конце строки, потому что это завершенный оператор.

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


Доступ к массивам с именованными индексами

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

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

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

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

Пример

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;       // person.length will return 3
person[0];           // person[0] will return "John"

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

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

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

Пример:

const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;      // person.length will return 0
person[0];          // person[0] will return 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];

Неопределенный не равен нулю

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

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

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

You can test if an object exists by testing if the type is undefined:

Example:

if (typeof myObj === "undefined") 

But you cannot test if an object is null, because this will throw an error if the object is undefined:

Incorrect:

if (myObj === null) 

To solve this problem, you must test if an object is not null, and not undefined.

But this can still throw an error:

Incorrect:

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

Because of this, you must test for not undefined before you can test for not null:

Correct:

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