Шпаргалка javascript на русском

Шпаргалка javascript на русском

Шпаргалка по JavaScript

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

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

Функции и методы

JavaScript позволяет использовать огромное количество методов и функций. Всех и не упомнишь сразу. Шпаргалку позволяет не запутаться в часто используемых функциях. Слева находится список простых методов в JavaScript. Справа DOM методы. Функции находятся в отдельном разделе в нижней части страницы.

Объект XMLHttpRequest является относительно новой частью JavaScript. Объект используется для организации запросов без перезагрузки страницы. Данный объект получил широкое распространение с популяризацией технологии AJAX.

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

  • Переводы , 27 января 2019 в 10:16
  • Артем Гаврилов

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

Содержание

Объявление переменных: var, const, let

В JavaScript переменные объявляют при помощи трёх операторов. При этом заданные через const переменные изменить нельзя, а через var и let — можно. Поэтому если в коде предстоит изменить значение переменной, задавайте её с помощью let , если нет — через const .

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

    Оператор var . Объявленные с его помощью переменные работают в пределах функции и не доступны вне её.

Другой пример, демонстрирующий рамки области переменных:

Переменные при выполнении оператора присваивания перемещаются в начало, что называется «поднятие переменных». Часть кода:

при выполнении понимается как:

Оператор let . Переменные, объявленные с его помощью, имеют блочную область видимости. Кроме того, они не доступны, пока не присвоены и пока их значение нельзя изменить в той же области. На примере, приведённом выше:

Вот как это работает для не доступных до присвоения переменных, объявленных операторами let и const :

Переменные, объявленные с помощью var , доступны до присвоения. При использовании let и const — только после него. Этот феномен получил название «Временные мёртвые зоны». Кроме того, с помощью оператора let нельзя объявить другую переменную:

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

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

Стрелочные функции

Стрелочные функции ввели в обновлении ES6 как альтернативный способ объявления и использования функций.

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

Традиционный код отличается наличием ключевого слова:

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

Мы убрали скобки и ключевое слово, но вывод всё равно x * 2 . Если функция не возвращает значение (имеет побочные эффекты), это происходит ни явно, ни неявно. При необходимости возврата объекта, его заключают в скобки:

  • Единственный аргумент. Если функции присвоено одно значение, скобки можно исключить:
  • Отсутствие аргументов. В случае если аргументы не заданы, необходимо поставить скобки, иначе синтаксис будет неверным:
  • Привязка ключевого слова this к окружению. Чтобы понять тонкости, необходимо знать о поведении this в JavaScript. Для доступа к переменной в функции внутри функции, например, пришлось бы использовать that = this или self = this . А в стрелочных функциях значение this заимствуется из окружения, а не присваивается при создании нового ключевого слова. Например, используем setTimeout в функции myFunc :
  • Теперь в том же коде используем стрелочные функции:

    Читайте также:  Рассчитайте молярность и нормальность

    Параметры функции по умолчанию

    С выходом версии ES2015 значение по умолчанию для параметра функции задаётся при помощи следующего синтаксиса:

    Параметр по умолчанию применяется в двух случаях: когда он не задан или задан параметр undefined . При введении null параметр по умолчанию не применится.

    Деструктурирование объектов и массивов

    Деструктурирование — создание новых переменных путём извлечения данных из объектов и массивов. Например, извлечение параметров this.props из React-проектов.

      Объект. Рассмотрим для всех примеров объект:

    Параметры функции. Деструктурирование применяется для извлечения параметров объектов в функции.
    Без деструктурирования:

    Извлекая параметр person , получим компактную функцию:

    Со стрелочными функциями код становится существенно меньше:

    Массив. Рассмотрим массив:

    Без деструктурирования он выглядит так:

    Методы массивов map/filter/reduce

    Методы массивов пришли в JavaScript из функционального программирования. Используя три этих метода, вы избегаете циклов for и forEach в большинстве ситуаций. Попробуйте вместо for использовать совокупность map , filter и reduce . В первый раз будет сложно, потому что придётся научиться мыслить иначе, но дальше привыкнете. Посчитаем для примера сумму оценок студентов с результатом 10 и выше, используя три этих метода:

    Для более детального наглядного объяснения возьмём массив:

    Что мы тут сделали? .map выполняет итерацию каждого элемента массива numbers и перемещает их в функцию. Цель функции — обработать и вернуть новую переменную, чтобы map мог заменить её.

    Теперь посмотрим на функцию отдельно, чтобы было понятнее:

    Метод часто используется со стрелочными функциями:

    Используем numbers.map(doubleN) и получаем

    , что равно [0, 2, 4, 6, 8, 10, 12] .

    23 апреля , онлайн, беcплатно

    В случае если возвращать массив нет необходимости и нужен цикл с побочными эффектами, используйте for / forEach .
    Array.prototype.filter().

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

    .filter осуществляет итерацию каждого элемента массива numbers и добавляет их в функцию. Цель функции — вернуть булево значение и определить, нужно оно или нет. После чего фильтр возвращает массив только с добавленными значениями.
    Array.prototype.reduce(). Цель метода — сократить переменные до одной после итерации.

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

    .reduce применяется к массиву и использует функцию как первый параметр. Однако в данном случае мы сталкиваемся с исключениями:

    • функция .reduce учитывает 2 параметра: вызываемую на каждом шаге итерации функцию и значение накопительной переменной (acc) на первом шаге итерации.
    • параметры функции: функция, принятая за значение .reduce , имеет 2 других — накопительную переменную (acc) и текущий элемент (n). Накопительная переменная равна возвращаемому на предыдущем шаге итерации значению функции. На первой ступени acc равна значению, принятому за второй параметр .reduce.
    1. acc = 0 , поскольку мы ввели «0» вторым значением для reduce;
      n = 0 , первый элемент массива number .
      Функция возвращает acc + n –> 0 + 0 –> 0
    2. acc = 0 , значение, возвращённое функцией на предыдущей ступени итерации;
      n = 1 , второй элемент массива number .
      Функция возвращает acc + n –> 0 + 1 –> 1
    3. acc = 1 , значение, возвращённое функцией на предыдущей ступени итерации;
      n = 2 , третий элемент массива number .
      Функция возвращает acc + n –> 1 + 2 –> 3
    4. acc = 3 , значение, возвращённое функцией на предыдущей ступени итерации;
      n = 3 , четвёртый элемент массива number .
      Функция возвращает acc + n –> 3 + 3 –> 6
    5. (…действия повторяются до последнего шага)
      acc = 15 , поскольку это значение функция вернула на предыдущей ступени
      n = 6 , последний элемент массива number .
      На последнем шаге функция возвращает acc + n –> 15 + 6 –> 21

    Оператор spread(…)

    Его добавили в обновлении ES2015, чтобы элементы итерации (например массива) можно было использовать в качестве нескольких элементов в коде.

    Возьмём два массива:

    В arr2 первый аргумент — массив, поскольку читает содержимое arr1 . Но нам нужно сделать arr2 массивом, состоящим из последовательности букв. Для этого используем spread и получим необходимый результат:

    • Оставшиеся параметры функции. С их помощью мы можем создать массив с неучтёнными параметрами функции. Объект arguments относится к функциям, равным массиву переданных функции аргументов.

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

    Читайте также:  Настройка сети hyper v windows 10

    Сокращение свойств объекта

    Зададим переменную для свойств объекта. Если её имя совпадёт с названием свойства, можно сделать следующее:

    Если вы объявляли объектный литерал в версиях до ES2015 или хотели использовать переменную в качестве значения свойств объекта, то пришлось бы писать:

    Слишком много повторений, не так ли? Поэтому с выходом ES2015 при совпадении переменной с названием свойства, достаточно такого кода:

    Объекты «промисы»

    Промис — это объект, который используется для упорядочивания синхронных и асинхронных операций. При использовании промисов код становится чище, поэтому они всё чаще встречаются в проектах.

    AJAX-запрос при выполнении не является синхронным, поскольку ответ от ресурса идёт какое-то время. Он может вообще не прийти, если ресурс не доступен (404). Для решения этой проблемы в ES2015 добавили промисы, которые принимают 3 состояния:

    Представим, что нам нужно создать Ajax-запрос до ресурса X. Используем для этого метод jQuery.get() :

    Объект Promise выполняет функцию executor с аргументами resolve и reject . Эти аргументы выполняются по завершении операции как и функции, которые переводят промис из состояния ожидания в состояние выполнения или отклонения. Функция executor выполняется сразу после создания промиса в статусе ожидания. Как только аргументами функции становятся resolve или reject , промис использует необходимые методы.

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

    В случае сдержанного промиса выполняется resolve и функция с методом .then . Иначе выполняется reject и функция с методом .catch . Также обработчик будет выполнен при сдержанном или нарушенном промисе, что приведёт к отсутствию «состояния гонки» между завершением асинхронной операции и применением обработчика.

    Шаблонные литералы

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

    Теговые шаблоны

    Являются расширенной формой шаблонных литералов и позволяют разбирать их с помощью функции. При вызове функции первый аргумент содержит массив строковых значений между интерполированными значениями. Чтобы уместить их все, используйте оператор spread ( . ). Библиотека styled-components написана с применением теговых шаблонов.

    Ниже приведён небольшой пример их работы:

    Другой интересный пример:

    Инструкции импорта и экспорта

    Экспорт функций/объектов из модулей ES6 и импорт значений из них.

    • Именованные импорт/экспорт используют для нескольких величин (ими могут быть лишь объекты первого класса):

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

    Для одного модуля доступен один экспорт по умолчанию. Экспорт может быть функцией, классом, объектом и т.д. Значение рассматривается как «основное», поскольку так его проще импортировать:

    Ключевое слово this

    Поведение этого ключевого слова в JavaScript отличается от других языков и зависит от вызова функции.

    Классы

    JavaScript — прототип-ориентированный язык программирования. Классы ввели как синтаксический сахар для прототип-ориентированного наследования в ES6. Слово «класс» смутит вас, если вы знакомы с классами в других языках программирования. Попробуйте посмотреть иначе: прочитайте о прототипах и их поведении в JavaScript. До ES6 синтаксис прототипов выглядел следующим образом:

    С синтаксисом классов в ES6:

    Ключевые слова extends и super

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

    Ключевое слово super вызывает функции родителя объекта, включая его конструктор. Его следует использовать:

    • до ключевого слова this в конструкторе;
    • с вызовом super(arguments) при передаче аргументов конструктору класса;
    • как вызов дочернего класса super.X() для метода X родительского класса.

    Если бы мы попытались использовать this перед super() в классе Square, появилась бы ошибка ReferenceError:

    Функция async и оператор await

    Для написания асинхронного кода в JavaScript появился синтаксис async / await . Цель нововведения — упростить использование промисов и расширить рамки действий с ними. Для лучшего понимания этого синтаксиса, рекомендуем сначала ознакомиться с промисами. await может использоваться только внутри асинхронной функции.

    Читайте также:  Узнать объем памяти видеокарты windows 10

    async / await используется с промисами, но предполагают более императивный стиль кода. Оператор async определяет асинхронную функцию и всегда возвращает промис. Оператор await приостанавливает выполнение функции async , пока промис не выполнен или отклонён:

    Если в асинхронной функции достигается значение return , промис приобретает возвращённое значение. При выводе ошибки промис переходит в статус «отклонён». В то же время при отсутствии возвращённого значения асинхронной функции, промис возвращается без значения по завершению выполнения асинхронной функции.

    Оператор await ожидает выполнения промиса.

    Функция fetch позволяет выполнить AJAX-запрос.

    Выберем пользователя GitHub с помощью промисов и функции fetch :

    А теперь эквивалент с использованием async / await :

    Async / await подходят в случае с цепочкой взаимосвязанных промисов. Например можно использовать их для получения токена, чтобы выделить пост блога в базе данных, а также информацию об авторе:

    Если не добавить блоки try / catch к выражению await , неперехваченные исключения будут отклонять промис, возвращённый асинхронной функцией. При этом неважно, находятся ли они внутри асинхронной функции или возникли во время await . Использование throw внутри асинхронной функции равноценно отклонённому промису.

    Вот так можно устранить ошибки при помощи промисов:

    то же самое, но с async / await :

    Truthy/Falsy

    Значения, похожие на правду и на ложь в JavaScript, относятся к логическим выражениям. Пример логического выражения — проверка значения оператора if . Значению присваивается true , если оно не равно:

    Примеры логических выражений:

    • проверка значения оператора if .

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

    • после логического оператора NOT ! :

    Оператор возвращает false , если одиночный операнд может стать истинным; иначе возвращает true .

    • C конструктором объектов логических значений:
    • В трёхкомпонентном сравнении:

    myVar проверяется в контексте логического значения.

    Будьте осторожны, сравнивая 2 значения. Значения объекта (которые должны стать истинными) не считаются логическими, но конвертируются в примитивный тип данных. При сравнении объекта с логическим значением, например [] == true , он преобразуется в [].toString() == true :

    Анаморфизмы и катаморфизмы

    • Анаморфизмы. Функции, с помощью которых объекты разворачиваются в более сложные структуры, содержащие объекты того же типа. Представим преобразование целого числа в ряд чисел:
    • Катаморфизмы. Противоположность анаморфизмов: сворачивают объекты с более сложной структурой в простые. В примере product преображает несколько чисел в одно:

    Генераторы

    Ещё один способ записать функцию downToOne — использовать генератор. Эти функции могут приостанавливать выполнение, вернуть промежуточный результат, а затем продолжить выполнение в любой момент. Чтобы инстанцировать объект-генератор, необходимо объявить функцию function * . Перепишем функцию downToOne с использованием генератора:

    Генераторы возвращают итерируемые объекты. Функция next() выполняется до ключевого слова yield , которое возвращает значение во внешний код. Либо до функции yield * , которая передаёт её другой функции-генератору. При возврате результата return функция-генератор считается завершённой. Дальнейшие вызовы функции next() не вернут новых значений.

    Ключевое слово yield * активирует следующую функцию-генератор во время итерации:

    Статические методы

    Ключевое слово static используется в классах для определения статичных методов. Статичные методы функции, принадлежащие объекту класса, но не доступные другим объектам того же класса.

    Вызов статического метода из другого статического метода осуществляется с помощью ключевого слова this . Для нестатических методов этот подход не сработает:

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

    В этой статье специально для веб-разработчиков собраны полезные ссылки и материалы для веб-языков, CMS и графических редакторов.

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

    Ссылка на основную публикацию
    Что такое django python
    Django Тип каркас веб-приложений Автор РазработчикDjango Software FoundationНаписана наPython[2]Интерфейсвеб-интерфейсОперационная системакроссплатформенностьПервый выпуск2005[1]Последняя версия 3.0.4 ( 4 марта2020 ) [3] Лицензиямодифицированная лицензия...
    Чем чистить датчик абсолютного давления
    ВСЁ СВОИМИ РУКАМИ 12.06.2018 . . После покупки Шевроле Лачетти оказалось, что эта первая моя машина, на которой был установлен...
    Чем хорош увлажнитель воздуха отзывы
    у нас на работе стоял, попеременно двигали каждый к себе поближе, ибо да, с ним как-то лучше, мне лично глазам...
    Что такое hangouts и для чего
    Хэкгаутс что это за программа на телефоне Добрый день, друзья. Для смартфонов на разных платформах существуют тысячи программ. Сейчас мы...
    Adblock detector