Учебник по 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


Избегайте глобальных переменных, избегайте new, избегайте ==, избегайтеeval()


Избегайте глобальных переменных

Минимизируйте использование глобальных переменных.

Сюда входят все типы данных, объекты и функции.

Глобальные переменные и функции могут быть перезаписаны другими скриптами.

Вместо этого используйте локальные переменные и научитесь использовать замыкания .


Всегда объявляйте локальные переменные

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

Локальные переменные должны быть объявлены с помощью var ключевого слова или letключевого слова, или constключевого слова, иначе они станут глобальными переменными.

Строгий режим не допускает необъявленных переменных.


Декларации сверху

Хорошей практикой программирования является размещение всех объявлений в начале каждого скрипта или функции.

Это будет:

  • Дайте более чистый код
  • Обеспечьте единое место для поиска локальных переменных
  • Упростите избегание нежелательных (подразумеваемых) глобальных переменных
  • Уменьшить вероятность нежелательных повторных деклараций
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price - discount;

Это также относится к переменным цикла:

for (let i = 0; i < 5; i++) {


Инициализировать переменные

Хорошей практикой кодирования является инициализация переменных при их объявлении.

Это будет:

  • Дайте более чистый код
  • Обеспечьте единое место для инициализации переменных
  • Избегайте неопределенных значений
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};

Инициализация переменных дает представление о предполагаемом использовании (и предполагаемом типе данных).


Объявить объекты с помощью const

Объявление объектов с помощью const предотвратит случайное изменение типа:

Пример

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

Объявить массивы с помощью const

Объявление массивов с помощью const предотвратит случайное изменение типа:

Пример

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

Не используйте новый объект()

  • Использовать ""вместоnew String()
  • Использовать 0вместоnew Number()
  • Использовать falseвместоnew Boolean()
  • Использовать {}вместоnew Object()
  • Использовать []вместоnew Array()
  • Использовать /()/вместоnew RegExp()
  • Использовать function (){}вместоnew Function()

Пример

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

Остерегайтесь автоматических преобразований типов

JavaScript имеет свободный тип.

Переменная может содержать все типы данных.

Переменная может изменить свой тип данных:

Пример

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

Помните, что числа могут быть случайно преобразованы в строки или NaN(не число).

При выполнении математических операций JavaScript может преобразовывать числа в строки:

Пример

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

Вычитание строки из строки не приводит к ошибке, а возвращает NaN(не число):

Пример

"Hello" - "Dolly"    // returns NaN

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

Оператор ==сравнения всегда преобразует (в соответствующие типы) перед сравнением.

Оператор ===принудительно сравнивает значения и тип:

Пример

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

Использовать значения параметров по умолчанию

Если функция вызывается с отсутствующим аргументом, значение отсутствующего аргумента устанавливается равным undefined.

Неопределенные значения могут сломать ваш код. Это хорошая привычка — присваивать аргументам значения по умолчанию.

Пример

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}

ECMAScript 2015 допускает параметры по умолчанию в определении функции:

function (a=1, b=1) { /*function code*/ }

Узнайте больше о параметрах и аргументах функции в разделе «Параметры функции».


Завершите свои переключатели настройками по умолчанию

Всегда заканчивайте свои switchутверждения знаком default. Даже если вам кажется, что в этом нет необходимости.

Пример

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

Избегайте чисел, строк и логических значений в качестве объектов

Всегда рассматривайте числа, строки или логические значения как примитивные значения. Не как объекты.

Объявление этих типов объектами замедляет скорость выполнения и приводит к неприятным побочным эффектам:

Пример

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

Или еще хуже:

Пример

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

Избегайте использования eval()

Функция eval()используется для запуска текста как кода. Почти во всех случаях нет необходимости использовать его.

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