JavaScript заметки
الذهاب إلى القناة على Telegram
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке. Можно почитать пока компилируется проект :) Сотрудничество: @noname_media Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
إظهار المزيد7 368
المشتركون
-124 ساعات
-167 أيام
-5730 أيام
أرشيف المشاركات
7 369
ES6
ECMAScript 2015, также известный как ES6, является фундаментальной версией стандарта ECMAScript.
ES6 привнёс ряд фундаментальных изменений в язык, которые стали его неотъемлемой частью.
Что принёс с собой этот стандарт:
- стрелочные функции
- новая область
this
- let и const
- промисы
- generators
- классы
- конструктор и ещё многое-многое другое
Как вы могли заметить, практически все крутые фишки, которые используются повсеместно привнёс ES6.
А чтобы писать на крутом синтаксисе со скоростью света, вы можете установить плагин (ES6) сode snippets на свой редактор кода VS Code.
#ES6 #ECMAScript7 369
Мечтаешь быть фронтенд разработчиком, а может ты уже им работаешь?
Тогда тебе это будет интересно! Автор блога Душный разраб🤓 рассказывает, как прошел свой путь:
👉 Как проходят его будни? - читать
👉 Как он учится, меняет места работы? и т.д. - читать
👉 Дает советы по обучению в профессии фронтенд разработчика - читать
Подпишись - если хочешь прокачаться в профессии и кайфовать от своего дела
7 369
Конструкция "switch"
Конструкция
switch заменяет собой сразу несколько if. Она имеет один или более блок case и необязательный блок default.
Переменная x проверяется на строгое равенство первому значению value1, затем второму value2 и так далее.
Если соответствие установлено – switch начинает выполняться от соответствующей директивы case и далее, до ближайшего break (или до конца switch).
Если ни один case не совпал – выполняется (если есть) вариант default.
#конструкция_switch #синтаксис7 369
Устал от дорогих курсов? Не получается устроиться на работу?
Канал За Фронтенд поможет тебе. В нем находится информация с курсов стоимостью 50 000 - 100 000 Р, а также много полезного материала от опытных разработчиков, и все это в удобном формате, простыми, понятными словами абсолютно бесплатно.
Хочешь развиваться и не стоять на месте, то скорее подписывайся - @za_frontend
7 369
Массивы
Довольно часто мы понимаем, что нам необходима упорядоченная коллекция данных, в которой присутствуют 1-й, 2-й, 3-й элементы и т.д.
Например, она понадобится нам для хранения списка чего-либо: пользователей, товаров, элементов HTML и т.д.
В этом случае использовать объект неудобно, так как он не предоставляет методов управления порядком элементов. Мы не можем вставить новое свойство «между» уже существующими. Объекты просто не предназначены для этих целей.
Для хранения упорядоченных коллекций существует особая структура данных, которая называется массив, Array.
Чтобы создать массив можно воспользоваться оператором new или просто поставить квадратные скобки.
#массивы #array
7 369
Думаешь как улучшить написание кода?
А думать и не надо, в Tool Of Life давно все за тебя придумали!
Здесь собраны самые полезные онлайн-инструменты 🛠️, которые помогут прокачать навыки и ускорить твою верстку.
Начни уже прямо сейчас и результат увидишь уже через пару дней👇🏻
7 369
Стиль кода
Код должен быть максимально читаемым и понятным.
Это и есть искусство программирования – взять сложную задачу и написать такой код для её решения, который и правильно работает, и легко читается, понятен для людей.
Для этого нужен хороший стиль написания кода.
Вот вам пару советов:
- Следуйте стандартам оформления кода.
- Давайте наглядные имена.
- Комментируйте и документируйте.
- Не повторяйтесь.
- Разделяйте код на короткие, обособленные части.
#стиль_кода #code_style
7 369
Когда изучаешь JavaScript, информации много не бывает!
@webcoderofficial рассказывает важные концепции js, в профиле много примеров кода и тестовых задач для проверки своих знаний!
А также огромное количество советов, рекомендаций и учебных пособий. Плюс у него вы всегда сможете найти макет для практики верстки в свое портфолио!
7 369
typeof
Часто бывает необходимо определить тип данных с которым ты работаешь и для этого есть оператор
typeof.
Он возвращает строку, указывающую тип операнда.
Всего существует 8 возвращаемых значений:
- "undefined" - тип undefined
- "bigint" - тип bigint
- "boolean" - тип boolean
- "number" - тип number
- "string" - тип string
- "symbol" - тип symbol
- "function" - тип функция
- "object" - любой другой тип
#типы_данных #typeof7 369
Хочешь через игры повышать навыки программирования?
В Game of IT Thrones ты можешь совмещать обучение программированию с играми, не превращая зазубривание информации в рутину.
Здесь собраны только лучшие игры, которые помогут твоему прогрессу.
Стань на уровень выше 👇🏻
7 369
Обработка ошибок, "try..catch"
Конструкция
try..catch состоит из двух основных блоков: try, и затем catch.
Работает она так:
- Сначала выполняется код внутри блока try {...}.
- Если в нём нет ошибок, то блок catch(err) игнорируется: выполнение доходит до конца try и потом далее, полностью пропуская catch.
- Если же в нём возникает ошибка, то выполнение try прерывается, и поток управления переходит в начало catch(err). Переменная err (можно использовать любое имя) содержит объект ошибки с подробной информацией о произошедшем.
Пример кода на картинке выше ☝️
#обработка_ошибок #try_catch7 369
F.prototype
Как мы помним, новые объекты могут быть созданы с помощью функции-конструктора
new F().
Если в F.prototype содержится объект, оператор new устанавливает его в качестве [[Prototype]] для нового объекта.
JavaScript использовал прототипное наследование с момента своего появления. Это одна из основных особенностей языка.
Но раньше, в старые времена, прямого доступа к прототипу объекта не было. Надёжно работало только свойство "prototype" функции-конструктора, описанное в этой главе. Поэтому оно используется во многих скриптах.
Обратите внимание, что F.prototype означает обычное свойство с именем "prototype" для F. Это ещё не «прототип объекта», а обычное свойство F с таким именем.
Пример на картинке выше ☝️
#прототипы #f_prototype7 369
Константы
Чтобы объявить константную, то есть, неизменяемую переменную, используйте
const вместо let
Переменные, объявленные с помощью const, называются «константами». Их нельзя изменить. Попытка сделать это приведёт к ошибке.
Если программист уверен, что переменная никогда
не будет меняться, он может гарантировать это
и наглядно донести до каждого, объявив её через const.
#const #переменные7 369
Инкремент/декремент
Одной из наиболее частых числовых операций является увеличение или уменьшение на единицу.
Для этого существуют даже специальные операторы:
Инкремент
++ увеличивает переменную на 1.
Декремент -- уменьшает переменную на 1.
Инкремент/декремент можно применить только к переменной. Попытка использовать его на значении, типа 5++, приведёт к ошибке.
#операторы #инкремент #декремент7 369
Let
Для создания переменной в JavaScript используется ключевое слово
let.
Переменная – это «именованное хранилище» для данных. Можно использовать переменные для хранения товаров, посетителей и других данных.
#let #переменные7 369
BigInt
BigInt - это встроенный объект, который предоставляет способ представлять целые числа больше 2^53 - 1, наибольшего числа, которое JavaScript может надёжно представить с Number примитивом. Это максимальное значение можно получить, обратившись к Number.MAX_SAFE_INTEGER.
В некотором смысле он похож на Number, но отличается в некоторых ключевых моментах — его нельзя использовать с методами во встроенном объекте Math и нельзя смешивать в операциях с любыми экземплярами Number.
#BigInt #типы_данных7 369
Промисы
Promise - это объект, представляющий результат успешного или неудачного завершения асинхронной операции. Так как большинство людей пользуются уже созданными промисами, это руководство начнём с объяснения использования вернувшихся промисов до объяснения принципов создания.
В сущности, промис - это возвращаемый объект, в который вы записываете два колбэка вместо того, чтобы передать их функции.
Например, вместо старомодной функции, которая принимает два колбэка и вызывает один из них в зависимости от успешного или неудачного завершения операции (см. рисунок выше).
#promise7 369
Методы пользующиеся регулярными выражениями
Регулярные выражения используются в методах
test и exec объекта RegExp и с методами match, replace, search, и split объекта String.
exec() - метод RegExp, который выполняет поиск совпадения в строке. Он возвращает массив данных.
test() - метод RegExp, который тестирует совпадение в строке. Возвращает либо истину либо ложь.
match() - метод String, который выполняет поиск совпадения в строке. Он возвращает массив данных либо null если совпадения отсутствуют.
search() - метод String, который тестирует на совпадение в строке. Он возвращает индекс совпадения, или -1 если совпадений не будет найдено.
replace() - метод String, который выполняет поиск совпадения в строке, и заменяет совпавшую подстроку другой подстрокой переданной как аргумент в этот метод.
split() - метод String, который использует регулярное выражение или фиксированную строку чтобы разбить строку на массив подстрок.
#регулярки #методы7 369
Коллекция Map
Map - реализация простого ассоциативного массива (словаря). Он содержит данные в виде набора пар ключ/значение (ключи уникальны) и предоставляет методы для доступа и манипулирования этими данными.
Также как и объект, словарь позволяет:
— получать значение по ключу, а также проверять наличие ключа
— добавлять/удалять пары ключ/значение
— перезаписывать значение по ключу (ключи уникальны).
— итерироваться по ключам
Преимущества над объектами:
— Ключи словаря могут быть любого типа (а не только строки).
— Словарь хранит свой размер (не надо вычислять).
— Натуральный порядок обхода элементов ( в порядке добавления) с помощью for...of.
— Словарь не подмешивает ключи из прототипа (в отличие от объекта).
#словари #map