Online nodejs compiler, online nodejs ide, and online nodejs repl

Функции шаблонизации

Можно использовать свою функцию шаблонизации для строк.

Название этой функции ставится перед первой обратной кавычкой:

Эта функция будет автоматически вызвана и получит в качестве аргументов строку, разбитую по вхождениям параметров и сами эти параметры.

Например:

В примере выше видно, что строка разбивается по очереди на части: «кусок строки» – «параметр» – «кусок строки» – «параметр».

  • Участки строки идут в первый аргумент-массив .
  • У этого массива есть дополнительное свойство . В нём находятся строки в точности как в оригинале. Это влияет на спец-символы, например в символ – это перевод строки, а в – это именно два символа .
  • Дальнейший список аргументов функции шаблонизации – это значения выражений в , в данном случае их три.

Зачем ?

В отличие от , в содержатся участки строки в «изначально введённом» виде.

То есть, если в строке находится или или другое особое сочетание символов, то оно таким и останется.

Это нужно в тех случаях, когда функция шаблонизации хочет произвести обработку полностью самостоятельно (свои спец. символы?). Или же когда обработка спец. символов не нужна – например, строка содержит «обычный текст», набранный непрограммистом без учёта спец. символов.

Как видно, функция имеет доступ ко всему: к выражениям, к участкам текста и даже, через – к оригинально введённому тексту без учёта стандартных спец. символов.

Функция шаблонизации может как-то преобразовать строку и вернуть новый результат.

В простейшем случае можно просто «склеить» полученные фрагменты в строку:

Функция в примере выше делает то же самое, что обычные обратные кавычки. Но, конечно, можно пойти намного дальше. Например, генерировать из HTML-строки DOM-узлы (функции шаблонизации не обязательно возвращать именно строку).

Или можно реализовать интернационализацию. В примере ниже функция осуществляет перевод строки.

Она подбирает по строке вида шаблон перевода (где – место для вставки параметра) и возвращает переведённый результат со вставленным именем :

Итоговое использование выглядит довольно красиво, не правда ли?

Разумеется, эту функцию можно улучшить и расширить. Функция шаблонизации – это своего рода «стандартный синтаксический сахар» для упрощения форматирования и парсинга строк.

str.matchAll(regexp)

Новая возможность

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

Метод – «новый, улучшенный» вариант метода .

Он используется, в первую очередь, для поиска всех совпадений вместе со скобочными группами.

У него 3 отличия от :

  1. Он возвращает не массив, а перебираемый объект с результатами, обычный массив можно сделать при помощи .
  2. Каждое совпадение возвращается в виде массива со скобочными группами (как без флага ).
  3. Если совпадений нет, то возвращается не , а пустой перебираемый объект.

Пример использования:

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

Задачи

важность: 5

Создайте компонент «Часы» (Clock).

Интерфейс:

Остальные методы, если нужны, должны быть приватными.

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

Пример результата:

решение

важность: 5

Перепишите слайдер в виде компонента:

Исходный документ возьмите из решения задачи Слайдер.

решение

важность: 5

Перепишите решение задачи Выделяемый список в виде компонента.

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

Использование:

Демо:

решение

важность: 5

Напишите функцию-конструктор для голосовалки.
Она должна получать элемент в , в следующей разметке:

По клику на и число должно увеличиваться или уменьшаться.

Публичный метод должен устанавливать текущее число – значение голоса.

Все остальные методы и свойства пусть будут приватными.

Результат:

решение

важность: 5

Поменяйте стиль ООП в голосовалке, созданной в задаче Голосовалка на прототипный.

Внешний код, использующий класс , не должен измениться.

В качестве исходного кода возьмите решение задачи Голосовалка.

решение

Запрет прокрутки

Иногда бывает нужно временно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно поставить .

При этом страница замрёт в текущем положении.

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

При нажатии на верхнюю кнопку страница замрёт на текущем положении прокрутки. После нажатия на нижнюю – прокрутка возобновится.

Вместо может быть любой элемент, прокрутку которого необходимо запретить.

Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.

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

«Одалживание метода»

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

Это называется «одалживание метода» (на англ. method borrowing).

Используем эту технику для упрощения манипуляций с .

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

Нет ничего проще! Давайте скопируем метод из обычного массива:

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

Обратим внимание, мы не вызываем его, а просто копируем. Функция, в том числе встроенная – обычное значение, мы можем скопировать любое свойство любого объекта, и здесь не исключение.
В строке запустили в контексте , как будто он всегда там был.

Почему вызов сработает?

Здесь метод join массива скопирован и вызван в контексте . Не произойдёт ли что-то плохое от того, что – не массив? Почему он, вообще, сработал?

Ответ на эти вопросы простой. В соответствии , внутри реализован примерно так:

Как видно, используется , числовые индексы и свойство . Если эти свойства есть, то все в порядке. А больше ничего и не нужно.

В качестве подойдёт даже обычный объект:

…Однако, копирование метода из одного объекта в другой не всегда приемлемо!

Представим на минуту, что вместо у нас – произвольный объект. У него тоже есть числовые индексы, и мы хотим вызвать в его контексте метод . То есть, ситуация похожа на , но (!) вполне возможно, что у объекта есть свой метод .

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

Безопасно вызвать метод нам поможет :

Мы вызвали метод без копирования. Чисто, безопасно.

Клонирование и объединение объектов, Object.assign

Как мы узнали ранее, при копировании переменной объекта создаётся ещё одна ссылка на тот же самый объект.

Но что, если нам всё же нужно дублировать объект? Создать независимую копию, клон?

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

Например так:

Кроме того, для этих целей мы можем использовать метод Object.assign.

Синтаксис:

  • Аргументы , и (может быть столько, сколько нужно) являются объектами.
  • Метод копирует свойства всех объектов в объект . То есть, свойства всех перечисленных объектов, начиная со второго, копируются в первый объект. После копирования метод возвращает объект .

Например, объединим несколько объектов в один:

Если принимающий объект () уже имеет свойство с таким именем, оно будет перезаписано:

Мы также можем использовать для простого клонирования:

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

До сих пор мы предполагали, что все свойства пользователя примитивны. Но свойства могут быть ссылками на другие объекты. Что с ними делать?

Например, есть объект:

Чтобы исправить это, мы должны в цикле клонирования делать проверку, не является ли значение объектом, и если это так – копируем и его структуру тоже. Это называется «глубокое клонирование».

Существует стандартный алгоритм глубокого клонирования, . Он решает описанную выше задачу, а также более сложные задачи.
Чтобы не изобретать велосипед, мы можем использовать реализацию этого алгоритма из JavaScript-библиотеки lodash, метод .

Цикл «while»

Цикл имеет следующий синтаксис:

Код из тела цикла выполняется, пока условие истинно.

Например, цикл ниже выводит , пока

Одно выполнение тела цикла по-научному называется итерация. Цикл в примере выше совершает три итерации.

Если бы строка отсутствовала в примере выше, то цикл бы повторялся (в теории) вечно. На практике, конечно, браузер не позволит такому случиться, он предоставит пользователю возможность остановить «подвисший» скрипт, а JavaScript на стороне сервера придётся «убить» процесс.

Любое выражение или переменная может быть условием цикла, а не только сравнение: условие вычисляется и преобразуется в логическое значение.

Например, – более краткий вариант :

Фигурные скобки не требуются для тела цикла из одной строки

Если тело цикла состоит лишь из одной инструкции, мы можем опустить фигурные скобки :

Ширина/высота страницы с учётом прокрутки

Теоретически, видимая часть страницы – это , а полный размер с учётом прокрутки – по аналогии, .

Это верно для обычных элементов.

А вот для страницы с этими свойствами возникает проблема, когда прокрутка то есть, то нет. В этом случае они работают некорректно. В браузерах Chrome/Safari и Opera при отсутствии прокрутки значение в этом случае может быть даже меньше, чем , что, конечно же, выглядит как совершеннейшая чепуха и нонсенс.

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

Надёжно определить размер страницы с учётом прокрутки можно, взяв максимум из нескольких свойств:

Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто ошибки в браузерах. Глубокой логики здесь нет.

toString(base)

Метод возвращает строковое представление числа в системе счисления .

Например:

может варьироваться от до (по умолчанию ).

Часто используемые:

  • base=16 — для шестнадцатеричного представления цвета, кодировки символов и т.д., цифры могут быть или .

  • base=2 — обычно используется для отладки побитовых операций, цифры или .

  • base=36 — максимальное основание, цифры могут быть или . То есть, используется весь латинский алфавит для представления числа. Забавно, но можно использовать -разрядную систему счисления для получения короткого представления большого числового идентификатора. К примеру, для создания короткой ссылки. Для этого просто преобразуем его в -разрядную систему счисления:

Две точки для вызова метода

Внимание! Две точки в это не опечатка. Если нам надо вызвать метод непосредственно на числе, как в примере выше, то нам надо поставить две точки после числа

Если мы поставим одну точку: , тогда это будет ошибкой, поскольку синтаксис JavaScript предполагает, что после первой точки начинается десятичная часть. А если поставить две точки, то JavaScript понимает, что десятичная часть отсутствует, и начинается метод.

Также можно записать как .

Возможности

Итак, небольшой список того, что позволяет JavaScript:

  • Добавлять различные эффекты анимации
  • Реагировать на события — обрабатывать перемещения указателя мыши, нажатие клавиш с клавиатуры
  • Осуществлять проверку ввода данных в поля формы до отправки на сервер, что в свою очередь снимает дополнительную нагрузку с сервера
  • Создавать и считывать cookie, извлекать данные о компьютере посетителя
  • Определять браузер
  • Изменять содержимое HTML-элементов, добавлять новые теги, изменять стили

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

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

Если вы только начинаете работать с событиями, обратите внимание на следующие моменты. Функция должна быть присвоена как , а не

Функция должна быть присвоена как , а не .

Если добавить скобки, то – это уже вызов функции, результат которого (равный , так как функция ничего не возвращает) будет присвоен . Так что это не будет работать.

…А вот в разметке, в отличие от свойства, скобки нужны:

Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создаёт функцию с телом из значения атрибута: .

Так что разметка генерирует такое свойство:

Используйте именно функции, а не строки.

Назначение обработчика строкой также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.

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

Такой вызов работать не будет:

Регистр DOM-свойства имеет значение.

Используйте , а не , потому что DOM-свойства чувствительны к регистру.

Styling HTML with CSS

>CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen,
paper, or in other media.

CSS saves a lot of work. It can control the layout of
multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

  • Inline — by using the style attribute in HTML elements
  • Internal — by using a element in the section
  • External — by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS
files. However, here we will use inline and internal styling, because this is easier to
demonstrate, and easier for you to try it yourself.

Tip: You can learn much more about CSS in our CSS Tutorial.

События мыши:

Событие Описание
onclick реагирует на клик мыши;
ondblclick реагирует на двойной клик;
oncontextmenu реагирует на клик правой кнопкой мыши;
onmouseover реагирует на наведение мыши (на дочерние элементы тоже);
onmouseenter реагирует на наведение мыши;
onmouseout реагирует на отведение мыши (на дочерние элементы тоже);
onmouseleave реагирует на отведение мыши;
onmousedown реагирует на зажатие кнопки мыши;
onmouseup реагирует на отпускание кнопки мыши;
onmousemove реагирует при движении указателя мыши над элементов;
onwheel реагирует при движении колёсика мыши над элементом;
altKey реагирует на нажатие кнопки мыши при нажатой клавиши ALT;
ctrlKey реагирует на нажатие кнопки мыши при нажатой клавиши CTRL;
shiftKey реагирует на нажатие кнопки мыши при нажатой клавиши SHIFT;
metaKey реагирует на нажатие кнопки мыши при нажатой клавиши META(◆,⌘);
button возвращает номер нажатой клавиши мыши (0,1,2);
buttons возвращает номер нажатой клавиши мыши (1,2,4,8,16);
which возвращает номер нажатой клавиши мыши (1,2,3);
clientX возвращает координату указателя мыши по оси X (относительно окна);
clientY возвращает координату указателя мыши по оси Y (относительно окна);
detail возвращает количество кликов по объекту;
relatedTarget возвращает родственный элемент;
screenX возвращает координату указателя мыши по оси X (относительно экрана);
screenY возвращает координату указателя мыши по оси Y (относительно экрана);
deltaX возвращает количество скроллов по оси X;
deltaY возвращает количество скроллов по оси Y;
deltaZ возвращает количество скроллов по оси Z;
deltaMode возвращает единицу измерения длины скролла;

Численное преобразование

Численное преобразование происходит в математических функциях и выражениях.

Например, когда операция деления применяется не к числу:

Мы можем использовать функцию , чтобы явно преобразовать к числу:

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

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

Правила численного преобразования:

Значение Преобразуется в…
Пробельные символы по краям обрезаются. Далее, если остаётся пустая строка, то , иначе из непустой строки «считывается» число. При ошибке результат .

Примеры:

Учтите, что и ведут себя по-разному. Так, становится нулём, тогда как приводится к .

Сложение „+“ объединяет строки

Почти все математические операторы выполняют численное преобразование. Исключение составляет . Если одно из слагаемых является строкой, тогда и все остальные приводятся к строкам.

Тогда они конкатенируются (присоединяются) друг к другу:

Так происходит, только если хотя бы один из аргументов является строкой. Во всех остальных случаях значения складываются как числа.

super

В ES-2015 появилось новое ключевое слово . Оно предназначено только для использования в методах объекта.

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

Например, в коде ниже наследует от .

Вызов из метода объекта обращается к :

Как правило, это используется в классах, которые мы рассмотрим в следующем разделе, но важно понимать, что «классы» здесь на самом деле ни при чём. Свойство работает через прототип, на уровне методов объекта

При обращении через используется текущего метода, и от него берётся . Поэтому работает только внутри методов.

В частности, если переписать этот код, оформив как обычное свойство-функцию, то будет ошибка:

Ошибка возникнет, так как теперь обычная функция и не имеет . Поэтому в ней не работает .

Исключением из этого правила являются функции-стрелки. В них используется внешней функции. Например, здесь функция-стрелка в берёт внешний :

Ранее мы говорили о том, что у функций-стрелок нет своего , : они используют те, которые во внешней функции. Теперь к этому списку добавился ещё и .

Свойство – не изменяемое

При создании метода – он привязан к своему объекту навсегда. Технически можно даже скопировать его и запустить отдельно, и продолжит работать:

В примере выше метод запускается отдельно от объекта, но всё равно, благодаря , сохраняется доступ к его прототипу через .

Это – скорее технический момент, так как методы объекта, всё же, предназначены для вызова в контексте этого объекта. В частности, правила для в методах – те же, что и для обычных функций. В примере выше при вызове без объекта будет .

Рекурсивный setTimeout

Есть два способа запускать что-то регулярно.

Один из них . Другим является рекурсивный . Например:

Метод выше планирует следующий вызов прямо после окончания текущего .

Рекурсивный – более гибкий метод, чем . С его помощью последующий вызов может быть задан по-разному в зависимости от результатов предыдущего.

Например, необходимо написать сервис, который отправляет запрос для получения данных на сервер каждые 5 секунд, но если сервер перегружен, то необходимо увеличить интервал запросов до 10, 20, 40 секунд…
Вот псевдокод:

А если функции, которые мы планируем, ресурсоёмкие и требуют времени, то мы можем измерить время, затраченное на выполнение, и спланировать следующий вызов раньше или позже.

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

Сравним два фрагмента кода. Первый использует :

Второй использует рекурсивный :

Для внутренний планировщик будет выполнять каждые 100 мс:

Обратили внимание?

Реальная задержка между вызовами с помощью меньше, чем указано в коде!

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

Вполне возможно, что выполнение будет дольше, чем мы ожидали, и займёт более 100 мс.

В данном случае движок ждёт окончания выполнения и затем проверяет планировщик и, если время истекло, немедленно запускает его снова.

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

Ниже представлено изображение, показывающее процесс работы рекурсивного :

Рекурсивный гарантирует фиксированную задержку (здесь 100 мс).

Это потому, что новый вызов планируется в конце предыдущего.

Сборка мусора и колбэк setTimeout/setInterval

Когда функция передаётся в , на неё создаётся внутренняя ссылка и сохраняется в планировщике. Это предотвращает попадание функции в сборщик мусора, даже если на неё нет других ссылок.

Для функция остаётся в памяти до тех пор, пока не будет вызван .

Есть и побочный эффект. Функция ссылается на внешнее лексическое окружение, поэтому пока она существует, внешние переменные существуют тоже. Они могут занимать больше памяти, чем сама функция. Поэтому, если регулярный вызов функции больше не нужен, то лучше отменить его, даже если функция очень маленькая.

Потребители: then, catch, finally

Объект служит связующим звеном между исполнителем («создающим» кодом или «певцом») и функциями-потребителями («фанатами»), которые получат либо результат, либо ошибку. Функции-потребители могут быть зарегистрированы (подписаны) с помощью методов , и .

Наиболее важный и фундаментальный метод – .

Синтаксис:

Первый аргумент метода – функция, которая выполняется, когда промис переходит в состояние «выполнен успешно», и получает результат.

Второй аргумент – функция, которая выполняется, когда промис переходит в состояние «выполнен с ошибкой», и получает ошибку.

Например, вот реакция на успешно выполненный промис:

Выполнилась первая функция.

А в случае ошибки в промисе – выполнится вторая:

Если мы заинтересованы только в результате успешного выполнения задачи, то в можно передать только одну функцию:

Если мы хотели бы только обработать ошибку, то можно использовать в качестве первого аргумента: . Или можно воспользоваться методом , который сделает тоже самое:

Вызов – это сокращённый, «укороченный» вариант .

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

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

хорошо подходит для очистки, например остановки индикатора загрузки, его ведь нужно остановить вне зависимости от результата.

Например:

Но это не совсем псевдоним , как можно было подумать. Существует несколько важных отличий:

  1. Обработчик, вызываемый из , не имеет аргументов. В мы не знаем, как был завершён промис. И это нормально, потому что обычно наша задача – выполнить «общие» завершающие процедуры.

  2. Обработчик «пропускает» результат или ошибку дальше, к последующим обработчикам.

    Например, здесь результат проходит через к :

    А здесь ошибка из промиса проходит через к :

    Это очень удобно, потому что не предназначен для обработки результата промиса. Так что он просто пропускает его через себя дальше.

    Мы более подробно поговорим о создании цепочек промисов и передаче результатов между обработчиками в следующей главе.

  3. Последнее, но не менее значимое: вызов удобнее, чем – не надо дублировать функции f.

На завершённых промисах обработчики запускаются сразу

Если промис в состоянии ожидания, обработчики в будут ждать его. Однако, если промис уже завершён, то обработчики выполнятся сразу:

Теперь рассмотрим несколько практических примеров того, как промисы могут облегчить нам написание асинхронного кода.

Типы событий мыши

Условно можно разделить события на два типа: «простые» и «комплексные».

Кнопка мыши нажата над элементом.
Кнопка мыши отпущена над элементом.
Мышь появилась над элементом.
Мышь ушла с элемента.
Каждое движение мыши над элементом генерирует это событие.
Вызывается при клике мышью, то есть при , а затем на одном элементе
Вызывается при клике правой кнопкой мыши на элементе.
Вызывается при двойном клике по элементу.

Комплексные можно составить из простых, поэтому в теории можно было бы обойтись вообще без них. Но они есть, и это хорошо, потому что с ними удобнее.

Одно действие может вызывать несколько событий.

Например, клик вызывает сначала при нажатии, а затем и при отпускании кнопки.

В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке → → .

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

На тест-стенде ниже все мышиные события записываются, и если между событиями проходит больше 1 секунды, то они для удобства чтения отделяются линией. Также присутствуют свойства , по которым можно определить кнопку мыши. Мы их рассмотрим далее.

Каждое событие обрабатывается независимо.

Например, при клике события возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка , затем запускается .

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
cos()
cosh()
E
exp()
floor()
LN2
LN10
log()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Оператор запятая

Оператор «запятая» редко используется и является одним из самых необычных. Иногда он используется для написания более короткого кода, поэтому нам нужно знать его, чтобы понимать, что при этом происходит.

Оператор запятая предоставляет нам возможность вычислять несколько выражений, разделяя их запятой . Каждое выражение выполняется, но возвращается результат только последнего.

Например:

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

Запятая имеет очень низкий приоритет

Пожалуйста, обратите внимание, что оператор имеет очень низкий приоритет, ниже , поэтому скобки важны в приведённом выше примере. Без них в сначала выполнится , суммируя числа в , затем оператор присваивания присвоит , а то, что идёт дальше, будет игнорировано

Всё так же, как в

Без них в сначала выполнится , суммируя числа в , затем оператор присваивания присвоит , а то, что идёт дальше, будет игнорировано. Всё так же, как в .

Зачем нам оператор, который отбрасывает всё, кроме последнего выражения?

Иногда его используют в составе более сложных конструкций, чтобы сделать несколько действий в одной строке.

Например:

Такие трюки используются во многих JavaScript-фреймворках. Вот почему мы упоминаем их. Но обычно они не улучшают читабельность кода, поэтому стоит хорошо подумать, прежде чем их использовать.

Цикл «for»

Более сложный, но при этом самый распространённый цикл — цикл .

Выглядит он так:

Давайте разберёмся, что означает каждая часть, на примере. Цикл ниже выполняет для от до (но не включая) :

Рассмотрим конструкцию подробней:

часть
начало Выполняется один раз при входе в цикл
условие Проверяется перед каждой итерацией цикла. Если оно вычислится в , цикл остановится.
шаг Выполняется после тела цикла на каждой итерации перед проверкой условия.
тело Выполняется снова и снова, пока условие вычисляется в .

В целом, алгоритм работы цикла выглядит следующим образом:

То есть, начало выполняется один раз, а затем каждая итерация заключается в проверке условия, после которой выполняется тело и шаг.

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

Вот в точности то, что происходит в нашем случае:

Встроенное объявление переменной

В примере переменная счётчика была объявлена прямо в цикле. Это так называемое «встроенное» объявление переменной. Такие переменные существуют только внутри цикла.

Вместо объявления новой переменной мы можем использовать уже существующую:

Любая часть может быть пропущена.

Для примера, мы можем пропустить если нам ничего не нужно делать перед стартом цикла.

Вот так:

Можно убрать и :

Это сделает цикл аналогичным

А можно и вообще убрать всё, получив бесконечный цикл:

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

Логическое преобразование

Преобразование к происходит в логическом контексте, таком как , и при применении логических операторов.

Все значения, которые интуитивно «пусты», становятся . Их несколько: , пустая строка, , и .

Остальное, в том числе и любые объекты – .

Полная таблица преобразований:

Значение Преобразуется в…
,
Числа Все , кроме , — .
Строки Все , кроме пустой строки —
Объекты Всегда

Для явного преобразования используется двойное логическое отрицание или вызов .

Обратите внимание: строка становится

В отличие от многих языков программирования (например PHP), в JavaScript является , как и строка из пробелов:

Логическое преобразование интересно тем, как оно сочетается с численным.

Два значения могут быть равны, но одно из них в логическом контексте , другое – .

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

… А в логическом контексте левая часть (0) даст , правая («\n0\n») – , так как любая не пустая строка в логическом контексте равна :

С точки зрения преобразования типов в JavaScript это совершенно нормально. При сравнении с помощью «==» – численное преобразование, а в – логическое, только и всего.

Итого

  • – коллекция записей вида , лучше тем, что перебирает всегда в порядке вставки и допускает любые ключи.
  • – коллекция уникальных элементов, также допускает любые ключи.

Основная область применения – ситуации, когда строковых ключей не хватает (нужно хранить соответствия для ключей-объектов), либо когда строковый ключ может быть совершенно произвольным.

К примеру, в обычном объекте нельзя использовать «совершенно любые» ключи. Есть встроенные методы, и уж точно есть свойство с названием , которое зарезервировано системой. Если название ключа даётся посетителем сайта, то он может попытаться использовать такое свойство, заменить прототип, а это, при запуске JavaScript на сервере, уже может привести к серьёзным ошибкам.

WeakMap и WeakSet – «урезанные» по функциональности варианты Map/Set, которые позволяют только «точечно» обращаться к элементам (по конкретному ключу или значению). Они не препятствуют сборке мусора, то есть, если ссылка на объект осталась только в WeakSet/WeakMap – она будет удалена.

Итого

Чтобы писать числа с большим количеством нулей:

  • Используйте краткую форму записи чисел – , с указанным количеством нулей. Например: это с 6-ю нулями .
  • Отрицательное число после приводит к делению числа на 1 с указанным количеством нулей. Например: это ( миллионных).

Для других систем счисления:

  • Можно записывать числа сразу в шестнадцатеричной (), восьмеричной () и бинарной () системах счисления
  • преобразует строку в целое число в соответствии с указанной системой счисления: .
  • представляет число в строковом виде в указанной системе счисления .

Для преобразования значений типа и в число:

Используйте parseInt/parseFloat для «мягкого» преобразования строки в число, данные функции по порядку считывают число из строки до тех пор пока не возникнет ошибка.

Для дробей:

  • Используйте округления , , , или .
  • Помните, что при работе с дробями происходит потеря точности.

Ещё больше математических функций:

Документация по объекту Math

Библиотека маленькая, но содержит всё самое важное

Ссылка на основную публикацию