Новичок в JavaScript? Выделите 5 минут своего драгоценного времени и прочтите это!! Уверяю вас, это не пропадет даром,
Прежде чем начать большой доклад, давайте поговорим о самой распространенной и интересной проблеме: Какая лучшая IDE для JavaScript?
Почему IDE так важны?
Я считаю, что IDE играет очень важную роль в разработке программного обеспечения. Выбранная вами IDE может решить, полюбите ли вы разработку программного обеспечения или в конечном итоге возненавидите ее!!
Проще говоря, подумайте, что вы куда-то идете!! Использование IDE в этом сценарии похоже на использование джипа 4×4!! Ехать на 4×4 намного лучше, чем ходить пешком, верно??
Лучшие редакторы JavaScript IDE и исходного кода для использования
- Веб-шторм. среда разработки JavaScript премиум-класса.
- Код Visual Studio. бесплатная версия: меньше функций; высокая ценность.
- Атом. сильный претендент на звание лучшей бесплатной интегрированной среды разработки JavaScript
Я лично предпочитаю WebStrom. Я хотел сказать здесь, что они заслуживают того, чтобы попробовать.
В этой статье мы рассмотрим некоторые ключевые функции, которые вы можете протестировать в браузере Chrome (версия ≥76) или Node.js (версия ≥11) CLI.
Давайте начнем с некоторых основных вещей.
1 Область применения
Просто область видимости означает переменный уровень доступа. Область видимости — это рамка для переменных, функций и объектов. Ограничения на переменные и определить, есть ли у вас доступ к переменной или нет.
Вы должны иметь четкое представление о концепции области действия, потому что она поможет вам разделить логику в вашем коде.
- Локальная область действия – переменные, которые можно использовать только в определенной части вашего кода.
- Глобальная область действия — эту переменную можно использовать в любом месте кода, даже в функциях.
учтите, что в приведенном ниже коде переменная имя должна иметь глобальную область действия, она может быть доступна внутри функции, а переменная message должна быть локальной областью действия, к ней можно получить доступ только внутри функции,
2. Закрытие JavaScript
В JavaScript замыкание — это просто функция внутри другой функции, которая имеет доступ к переменной внешней функции. Закрытие имеет три варианта объема.
- Имеет доступ к своей области.
- Имеет доступ к переменной внешней функции.
- Имеет доступ к глобальной переменной.
Без понятия, верно? в порядке. Давайте проясним с некоторыми примерами,
В приведенном выше примере внутренняя функция display() является замыканием. Эта внутренняя функция будет иметь доступ к переменной name, которая является частью области действия внешней функции Guest. Здесь родительская область не будет иметь доступа к переменной «имя» дочерней области.
Хорошо, давайте рассмотрим реальный сценарий. Подумайте о том, что вам нужно регулярно вызывать API и получать некоторые данные. API аутентифицируется с помощью токена. Таким образом, вы должны передать токен каждой конечной точке API. См. приведенный ниже код, реализованный с помощью замыканий.
3. Прототип
Проще говоря, прототип — это свойство функции JavaScript. Когда мы создаем функцию в JavaScript, механизм JavaScript добавляет к созданной функции с помощью конструктораprototype. strong> свойство по умолчанию.
Давайте будем практичными. Теперь напишите функцию, которая принимает id и имяв качестве параметров функции следующим образом и выходит из своего объекта-прототипа:
вывод консоли следующим образом:
User.prototype вышел из созданного объекта-прототипа функции. Там мы видим два атрибута
constructor__proto__
Затем выйдем из системы User.prototype.construcor
Звучит знакомо? волшебный выход. это похоже на функцию, которую мы определили несколько секунд назад. Как я описал выше, когда мы создаем функцию, она создает еще один объект, называемый объектом-прототипом.
В порядке. Давайте проверим некоторые факты,
Хорошо, тогда все факты, о которых я говорю выше, доказаны!
Теперь мы знаем теорию, и этопросто ссылка на другой объект, содержащая общие атрибуты/свойства для всех экземпляров объекта. Атрибут прототипа объекта указывает объект, от которого он наследует свойства. Проверьте ниже,
Объект животное наследует свойства объекта Array.
Чтобы лучше понять, давайте рассмотрим еще один пример.
Смотрите вывод,
getName, getExpireDate, calculateAmount, getPrice и printPrice являются свойствами объекта Product, объект Milk может наследовать все его свойства.
4. Деструктуризация
Синтаксис деструктурирующего присваивания — это выражение JavaScript, позволяющее распаковывать значения из массивов или свойства объектов в отдельные переменные.
Хорошо, представьте, что у вас есть массив объектов, и он содержит некоторые конфигурации. Все конфигурации приложения настраиваются в массиве объектов. Но вы хотите несколько конфигураций. В таком сценарии разрушение очень помогает.
Еще один пример. Вы разрабатываете какое-то приложение и хотите хранить все сообщения пользователей в одном месте. Это хорошая практика и простота управления всеми сообщениями пользователей. Подумайте, к сожалению, некоторые пользовательские сообщения неверны или опечатаны. Теперь вам нужно открыть файл сообщения пользователя и изменить его. Это все. Проблема в том, что все пользовательские сообщения не используются на одной странице. На одной странице используется всего несколько сообщений. В таком сценарии мы используем деструктурирование. См. ниже, как это реализуется,
Смотрите вывод,
5. Оператор спреда
Оператор spread распаковывает итерируемые объекты в отдельные элементы. Давайте рассмотрим разные сценарии, когда это полезно.
Давайте посмотрим несколько примеров,
I. Объединение двух массивов
Вывод будет таким,
II. Распространение объекта
вывод будет как,
6. Функции обратного вызова
Функция, которая передается в качестве аргумента другой функции и может быть вызвана позже через некоторое время, называется функцией обратного вызова.
Зачем нам нужны обратные вызовы?
Да, это самый распространенный вопрос новичков в JavaScript. Я объясню это на простых примерах.
Парень 1: Эй, чувак, я хочу что-нибудь сделать, когда пользователь кликнет туда, перезвони мне, когда это произойдет, хорошо?
Парень 2: Привет братан. Он щелкнул прямо сейчас.
Давайте попробуем на некоторых примерах.
В приведенном выше примере функция Execute the printMessage вызывается через 2 секунды.
Вывод будет таким,
Метод callMe вызывается методом greet.
7. Обещание JavaScript
Обещание представляет возможное завершение или сбой асинхронной операции и его результирующее значение.
В порядке. Хватит громких разговоров. Давайте разберемся в этом на нескольких простых примерах.
Основная идея заключается в том, что Promise — это лучший способ обработки асинхронныхопераций. С помощью promise мы можем узнать, успешно завершена асинхронная операция или нет.
Обещание может иметь одно из трех состояний.
- Ожидание — onFulfilled() будет вызвано (например, было вызвано resolve())
- Выполнено - onRejected() будет вызван (например, был вызван reject())
- Отклонено - еще не выполнено или отклонено
Поясним это на примерах.
В порядке. Затем мы выполняем приведенный выше код с status = true.
Затем мы пробуем то же приложение с status = false.
Цепочка обещаний
Говоря о обещаниях, волшебство заключается в том, что .then() всегда возвращает новое обещание, можно связывать обещания с точным контролем над тем, как и где обрабатываются ошибки. Увидеть ниже,
Просто представьте, что вам нужно вычислить некоторые данные после успешного вызова API и после расчетовзахотеть перейти на другую страницу. Затем вы можете выполнить расчетную часть внутри firstthen(), а после этого навигация может выполняться в второмthen() область действия.
См. ниже другой пример.
Методы промисов JavaScript
Вывод
На данный момент мы рассмотрели некоторые важные концепции JavaScript. Как правило, каждая из этих концепций очень полезна для нашей следующей серии постов. Кроме того, ниже выкладываю шпаргалку по javascript.
Отсылка:
