Седьмой день изучения JavaScript — завершение первого этапа!
Это краткое изложение того, что мы узнали о JavaScript за последние шесть дней подряд. Мы кратко обсудили здесь некоторые важные и основные темы JavaScript, такие как String, Array, Object, DOM, кросс-браузерное тестирование, OOP, функциональное программирование, ошибки, область действия, функции тайм-аута, типы, Undefined и другие.
День 1 — Простой JavaScript
В первый день мы узнали о некоторых основных методах, относящихся к String, Array, Math, Numbers и Objects. Основное внимание уделялось адаптации этих тем из документации по JavaScript сети разработчиков Mozilla (MDN).
Функции строк и массивов
При работе с любым языком программирования привыкание к String & Array является обязательной необходимостью. В JavaScript есть множество методов как для строк, так и для массивов. Вот небольшое обсуждение о них -
indexOf()
Для String метод indexOf() возвращает индекс подстроки, которая появляется первой в основной строке.
Принимая во внимание, что для массива этот метод возвращает индекс определенного элемента массива.
lastIndexOf()
Этот метод возвращает позицию индекса подстроки в обратном порядке, что означает последнее вхождение искомой строки.
Для массива возвращает последний индекс элемента, который был найден в массиве.
findIndex()
Этот метод возвращает индекс первого элемента в массиве, который удовлетворяет предоставленной функции проверки. В противном случае возвращается -1, что указывает на то, что ни один элемент не прошел проверку.
Пример:
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) =› element › 13;
console.log(array1.findIndex(isLargeNumber)); // логов: 3
split()
Основываясь на разделителе, этот метод делит строку на несколько подстрок, которые также находятся в упорядоченном наборе. Эти подстроки, наконец, собираются в массив, а затем метод split() возвращает массив.
Пример:
возврат ограниченного количества разбиений —
const myString = «Привет, мир. Как дела?»
const splits = myString.split(‘ ‘, 3)
console.log(splits) // журналы: [«Привет», «Мир.», «Как»]
В целях обобщения мы не описываем все методы, которые мы изучили, а просто рассматриваем некоторые из них сразу.
includes() –для проверки того, включает ли строка другую строку, которая была специально найдена.
replace() —заменить подстроку внутри основной строки.
unshift() — вставляет одно или несколько заданных значений в начало массива или массивоподобного объекта. Этот метод возвращает длину массива.
синтаксис - arr.unshift(elem1[, …[, elemN]])
toUpperCase(), toLowerCase –изменить внешний вид строкового алфавита в соответствии с его именем.
trim() –удаляет пробелы с обоих концов строки. trim() не влияет на значение самой строки.
Числовые функции
parseFloat(), parseInt() –преобразует в именованный тип из строки или других типов.
isNaN() –для проверки того, является ли значение числом или не числом (NaN).
Объекты
seal() –запечатывает объект, предотвращая добавление к нему новых свойств и помечая все существующие свойства как ненастраиваемые.
keys(), values() –возвращает перечисляемый массив имен и значений свойств объекта соответственно.
Математика
abs() – возвращает абсолютное значение числа.
min(), max() —возвращает минимальное и максимальное значение элементов массива.
sin(), cos() –возвращает тригонометрические значения sin и cos заданного числа.
round() –предоставляет округленное значение заданного числа.
sqrt() –выводит значение квадратного корня заданного числа.
Все это было взглядом на первый день обучения с высоты птичьего полета.
День 2. Повторное введение в JavaScript, поля классов, веб-форма, кросс-браузерное тестирование, хранилище на стороне клиента
Во второй день мы пересмотрели базовые концепции JavaScript с кратким повторным введением в этот язык. Мы узнали о полях классов, структурных веб-формах, кросс-браузерных проблемах веб-разработки и некоторых основах клиентского хранилища.
Поля класса
Классы JavaScript поддерживают как общедоступные, так и частные поля и методы. Экземпляр частного класса доступен только в рамках класса, тогда как экземпляры открытого класса доступны из любого места вне или внутри класса.
Общедоступные поля и методы JavaScript:
- Общедоступные статические поля
- Поля открытого экземпляра
- Общедоступные статические методы
- Публичные методы экземпляра
Частные поля и методы -
- Частные статические поля
- Поля частного экземпляра
- Частные статические методы
- Методы частного экземпляра
Ключевое слово this
Для инициализации полей ключевое слово this относится к создаваемому экземпляру класса. Подкласс может получить доступ к прототипу суперкласса, используя ключевое слово «супер».
Геттеры и сеттеры
Геттеры и сеттеры — это методы, которые привязываются к свойству класса и вызываются при установке этого свойства. Синтаксис get и set используется для объявления общедоступного метода получения или установки экземпляра.
Кросс-браузерное тестирование
Чтобы протестировать веб-интерфейс и UX на различных существующих устройствах, разработчики должны выполнить следующие шаги для кросс-браузерного тестирования:
Первоначальное планирование → Разработка → Тестирование/обнаружение → Исправления/итерация
Некоторые доступные коммерческие инструменты, такие как Sauce Labs, Browser Stack, LambdaTest, TestingBot и CrossBrowserTesting, которые выполняют кросс-браузерное тестирование для пользователей, будут более полезными.
Хранилище на стороне клиента
Ниже мы кратко описали некоторые методы хранения, которые используются в веб-технологиях с момента появления веб-браузеров.
i) Файлы cookie (старая концепция)
ii) Web Storage & IndexedDB (текущая концепция)
iii) Cache API (будущая концепция)
Необходимость структурной веб-формы
Веб-формы играют одну из важных ролей в веб-технологиях. Для простоты чтения с экрана и поддержания очень хорошей структуры веб-формы должны состоять из следующих элементов HTML: ‹fieldset›, ‹legend›, ‹label› (должен быть включен атрибут for), ‹abbr›.
IIFE (немедленно вызываемые функциональные выражения)
Если у рекурсивной функции нет имени, ее трудно вызвать для работы. JS позволяет нам назвать выражение функции для этого. Это известно как немедленно вызываемые функциональные выражения или IIFE.
Закрытие
Чтобы вызвать функцию, даже если функция уже возвращена.
Цикл for…of
Используется для итерации структур данных, таких как массивы, строки, карты и т. д.
Цикл for…in
Используется для итерации свойств объекта.
Это был итог второго дня обучения.
День 3 - День «ДОМ»
День 3 был полностью посвящен модели DOM или объектной модели документа, с небольшим штрихом стиля кодирования и обработкой ошибок.
try…catch работает синхронно
При работе с try…catch следует помнить, что сегмент кода работает синхронно. Если мы обрабатываем некоторые методы даты/времени JS, любое исключение, относящееся к этим методам, не будет перехвачено блоком try…catch.
Потому что сама функция выполняется позже, когда движок уже вышел из конструкции try..catch. Лучший способ справиться с этой проблемой — поместить внутрь функции setTimeout() функцию try…catch.
Перенос исключений
Чтобы избежать проверки всех ошибок, генерируемых функцией каждый раз, обертывание исключений было бы намного проще. Это мощная техника обработки низкоуровневых исключений для функций, которая создает ошибки более высокого уровня, а не различные низкоуровневые.
Некоторые идеи о стиле кода
Важным фактором при написании кода является следование некоторым руководствам по стилю.
Популярные руководства по стилю:
- Руководство по стилю Google JavaScript
- Руководство по стилю JavaScript для Airbnb
- СтандартJS
Понятный код
Код должен говорить сам, чтобы программисты могли его легко понять. Если мы напишем спагетти-код, который в конце концов будет пытать нас, чтобы понять, в таком коде нет смысла.
Все в HTML становится частью DOM
Существует 12 типов узлов. На практике используются 4 из них:
- document — «точка входа» в DOM.
- узлы элементов — HTML-теги, строительные блоки дерева.
- текстовые узлы — содержат текст.
- комментарии — никогда не отображаются на выходе, но JS может прочитать их из DOM.
parentElement и parentNode
Свойство parentElement возвращает родителя «элемент», а parentNode возвращает родителя «любой узел». Эти свойства обычно одинаковы: они оба получают родителя.
Пример:
1. оповещение(документ.ЭлементДокумента.родительскийУзел); // документ
2. оповещение (документ.элемент документа.родительский элемент); // нулевой
Нестандартный атрибут HTML через DOM
Если для какого-либо нестандартного HTML-атрибута нет доступных DOM-свойств, но нам нужно работать именно с тем, что написано в HTML, следующие 4 могут быть очень полезными:
- elem.hasAttribute(name) — проверяет на существование.
- elem.getAttribute(name) — получает значение.
- elem.setAttribute(name, value) — устанавливает значение.
- elem.removeAttribute(name) — удаляет атрибут.
Это все о 3-м дне обучения.
День 4 - Сад JavaScript
На четвертый день мы изучили учебную статью с веб-сайта JavaScript Garden. Мы изучили типы, оценку, удаление, тайм-ауты,и область.
Подробнее об обучении 4-го дня вы можете прочитать в этой статье — https://medium.com/@rbiswas596/the-noxious-advantageous-features-of-javascript-5184da9880b.
Конструкторы встроенных типов
Для встроенных типов -
- Если мы используем конструктор с ключевым словом new, он заставит их работать
- Если мы опустим ключевое слово new, оно сделает их объектом.
Приведение типов
в строку -
‘ ‘ + 10 === ‘10’; // истинный
к числу -
+’10’ === 10; // истинный
в логическое значение -
!!‘1’; // истинный
Избегайте eval
В JavaScript есть и другие способы реализовать функции, подобные eval, поэтому их следует избегать.
Не удалять атрибут
В одной строке нельзя удалить глобальные переменные. Но свойства, заданные явно, можно легко удалить.
Подъем — JS за кулисами
Подъем означает подъем или движение вверх. JavaScript имеет мощную скрытую функцию подъема переменных и функций. Либо мы объявляем функцию, а затем используем их, либо наоборот, и то, и другое будет выполняться без каких-либо ошибок в коде.
По этой причине мы можем вызвать любое имя функции до того, как объявим его.
Пространство имен и «анонимная оболочка»
«Анонимная оболочка» может инкапсулировать код в своем собственном пространстве имен. Это не только защищает код от конфликтов имен, но также обеспечивает лучшую модульность программ.
Пример:
(function() {
// автономное «пространство имен»
window.foo = function() {
// замыкание
};
})( ); // немедленно выполнить функцию
День 5 — Привязки блоков ES6, функции, деструктуризация и классы
День 5 был посвящен привязкам блоков ES6, функциям, деструктуризации и классам.
Подробнее об обучении за 5-й день читайте в этой статье — https://medium.com/@rbiswas596/es6-block-bindings-functions-destructuring-classes-144092c27fc4.
Замена IIFE с помощью let
Мы можем заменить IIFE и получить тот же результат, объявив let внутри цикла. В блочной привязке для более чистого кода мы можем использовать let вместо var, в отличие от IIFE. Что делает IIFE, так это объявляет переменную цикла как var. Функция for внутри цикла может каждый раз получать и удерживать новую привязку, объявление переменной цикла letfor сделает работу удобной и легкой.
Оператор спреда (…)
ES6 –
пусть значения = [170, 30, 23, 100];
console.log(Math.max(…values)); // 170
но в ES5 использовался метод apply(), который создавал дополнительный синтаксис и портил первоначальную суть кода.
ES5 –
пусть значения = [170, 30, 23, 100];
console.log(Math.max.apply(Math, values)); // 170
Стрелочные функции и массивы
Обработка элементов массива [.., .., ..] с помощью стрелочной функции(=›) намного проще, чем объявление традиционной функции.
пусть values = [170, 30, 23, 100];
var result = values.sort((a, b) =› a — b);
result // [23, 30, 100, 170]
Разрушение
Техника разбиения требуемой структуры данных.
«… остальные элементы»
Подобно оператору расширения, большую часть времени используется для работы с массивом.
Граждане первого класса ES6
Также называемые функциями первого класса, обеспечивают ожидаемые значения:
i) передается в функцию,
ii) возвращается из функции и
iii) присваивается переменной.
Это был итог 5-го дня обучения.
День 6 — ООП и функциональное программирование
На 6-й день первой недели мы узнали все об объектно-ориентированном подходе и подходе функционального программирования к JavaScript. Темы, которые мы рассмотрели в прошлый день: основные понятия ООП, объектно-ориентированное программирование с помощью JavaScript, объекты, класс, методы, наследование, абстракция, инкапсуляция, стек вызовов, цикл событий и функциональный JavaScript.
Подробнее об обучении 6-го дня читайте в этой статье — https://medium.com/@rbiswas596/object-Oriented-functional-javascript-168069783fcc.
Основные концепции ООП
- Объекты (сущности реального мира)
- Класс (схема объектов — одинаковый дизайн, несколько зданий)
- Наследование (отношения родитель-ребенок/IS-A)
- Полиморфизм (один и тот же метод, несколько возможностей)
- Абстракция (скрытие внутренних реализаций)
- Инкапсуляция (сочетание данных и кода вместе)
Наследование
Когда один объект приобретает все свойства и поведение родительского объекта, это называется наследованием. Он обеспечивает возможность повторного использования кода.
Абстракция
Сокрытие внутренних деталей и демонстрация функциональности называется абстракцией. Например телефонные звонки, внутреннюю обработку мы не знаем.
Инкапсуляция
Инкапсуляция означает объединение кода и данных в единое целое, подобно тому, как различные лекарства помещаются в капсулу.
Стек вызовов
Процедура LIFO, с помощью которой движок браузера выполняет созданный код. Как и в стеке, методы или вызовы функций в JavaScript помещаются в верхнюю часть стека, когда мы их вызываем, и в обратном порядке для случая возврата функции, они появляются первыми после завершения выполнения.
Цикл событий
Цикл событий — это процесс, который ожидает, пока стек вызовов очистится, прежде чем отправлять обратные вызовы из очереди задач в стек вызовов. Как только стек очищается, срабатывает цикл событий, который проверяет очередь задач на наличие доступных обратных вызовов.
Функциональное программирование
Иногда объектно-ориентированный JS становится сложным (прототипы? это?!?). Всегда нет необходимости использовать объектно-ориентированный подход, чтобы добиться цели. С другой стороны, функции можно использовать повторно столько раз, сколько необходимо. Нам не нужно модифицировать весь класс, как если бы мы думали изменить небольшую кодовую базу.
А вот и функциональное программирование, парадигма программирования или стиль кодирования, в котором главную роль играют функции. Он организует ваш код простым способом и сохраняет структуру кода чистой и легкой. Функциональное программирование безопаснее, его легче отлаживать или поддерживать.
В настоящее время использование функционального программирования является тенденцией в JavaScript. У него сложившееся сообщество, что, очевидно, является отличным доказательством того, что этот подход не устарел и его не стоит использовать. Чтобы избежать сложностей, функциональное программирование было бы отличным способом.
Это все о 6-м дне обучения.
Вся статья представляла собой общий краткий итог первой недели изучения JavaScript. Следовательно, веха-1 была завершена сегодня, в 7-й день недели с момента начала.
Спасибо, что прочитали. Лапните, если вам понравилась статья.
Приятного обучения :)
