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

Область

В первом примере мы используем простую программу цикла for. В JavaScript мы используем «var» для определения переменной. Как только мы запустим это, мы увидим, что он печатает от 0 до 9, потому что мы определяем цикл для запуска 10 раз и печатаем как внутреннее значение (9), так и последнее значение (10).

Если мы используем let” для определения переменных, это означает, что переменные не видны за пределами их области видимости. В приведенном ниже коде область действия переменной k находится внутри цикла for. При обращении к переменной k в строке 7 выдает ошибку.

Когда мы используем "var", он печатается без ошибок. Недостатком является то, что когда мы используем длинный код, мы не можем найти ошибку, так как область действия «var» велика. Когда мы используем "let" вместо "var", это гарантирует, что эффект будет внутри фигурных скобок ({}) в коде.

Когда мы используем const вместо var, снова возникает та же ошибка, когда мы объявляем переменную внутри цикла for. Когда мы используем const вне цикла for, в строке объявления мы должны инициализировать переменную const, иначе это выдаст ошибку.

Постоянное определение

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

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

Функция стрелки

Мы можем использовать стрелку для определения функции. Если мы передаем 2 аргумента (например, X и Y), а затем нам нужны скобки, а если есть только 1 аргумент, скобки не требуются.

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

Большинство людей неправильно понимают, что функция и функция стрелки ведут себя одинаково. Но это неправда.

Обработка объектов

Давайте посмотрим, как современный JavaScript обрабатывает объекты и что нового. В приведенном ниже коде вы можете видеть, что "SQRT2" — это просто ключ, и у него нет двухпарной пары ключ/значение. Итак, что происходит, когда вы определяете переменную типа let SQRT2 = Math.SQRT2this, вы можете указать то же самое внутри объекта. Тогда вам не нужно определять стоимостную сторону этого.

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

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

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

Замораживание объектов

Давайте проверим приведенный ниже пример, чтобы понять это. Просто мы определяем страну объекта как «Шри-Ланка» и снова устанавливаем другой объект как «США». Теперь вы можете видеть, что он печатает названия обеих стран.

Затем мы раскомментируем строку номер 3, чтобы включить метод замораживания. Это заморозит объект, чтобы никто не мог его изменить.

Если мы хотим иметь объект, который переходит от функции к функции или от службы к службе, и если вы не хотите изменять значение объекта, мы можем использовать этот «метод замораживания». Этот «метод замораживания» только сначала замораживает -level и не замораживает объекты внутреннего уровня.

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

В приведенном выше примере мы видим имя в переменной первого уровня, а p1 и p2 — переменные второго уровня. Замораживание применяется только к переменной первого уровня, такой как имя. Вот почему имя не изменилось. p1 меняется, потому что метод заморозки на это не влияет.

Шаблон

Шаблон очень простой, и в нем особо нечего понимать, но давайте разберемся в этом на примере ниже.

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

Переопределение функции

В Java имя конструкции совпадает с именем класса, но в JavaScript мы используем ключевое слово constructor для определения конструктора. Мы можем переопределить функцию чем угодно, когда мы вызываем объект (строка номер 24). Таким образом, у нас могут быть функции в классе, но во время выполнения мы можем переопределять функции, если захотим.

Деструктурировать

Есть несколько способов справиться с деструкцией. Давайте по одному.

1-й способ:вместо строк 1 и 2, показанных в приведенном ниже коде (поскольку и PI, и SQRT2 взяты из математического класса), мы можем написать эти две строки так, как мы пишем в строке 4.

2-й способ: здесь мы определяем квадратную функцию с парой свойств. Затем мы определяем другую функцию с именем area2, которая использует базовое свойство в функции Square для вычисления площади квадрата. Таким образом, для вычисления функции area2 квадратная функция не требуется, потому что мы можем сказать, что функция area2 получает базовое свойство из квадратной функции.

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

Для этого мы используем ту же базу и, кроме того, добавили округление со значением по умолчанию, которое используется для округления выходного значения. В строке № 23 у нас не было значения по умолчанию, но оно автоматически округляется до трех знаков после запятой, а в строке № 24 мы передаем значение по умолчанию для округления до 5 знаков после запятой.

4-й способ. В этом примере мы используем функцию с деструктуризацией и без нее, чтобы показать разницу. Как только мы запустим код, как вы можете видеть, после выполнения будут созданы 2 текстовых файла. Когда мы используем деструктурирование, мы можем игнорировать fs и напрямую писать код в виде строк с номерами 43 и 45.

5-й способ: В этом примере мы используем массивы. В приведенном ниже коде вы можете видеть, что есть 5 значений, но 4 свойства. Как только вы запустите его, вы увидите, что апрель пропущен, а май установлен на 50. Но когда мы печатаем значения, он может автоматически пропустить 40 и напечатать 50, что эквивалентно мае.

6-й способ: В этом примере мы используем тот же пример, что и ранее. Как только мы запустим код, вы увидите, что 10 назначено месяцу1, а другие значения назначены другим месяцам, потому что у других месяцев есть новый массив.

7-й способ: в этом примере у нас есть объект данных, и он имеет типы автомобиля, игры и человека. Через этот объект данных каждый тип может оценивать свои свойства в объекте данных. Как только мы зарегистрируем объект человека, вы увидите, что он печатает имя этого человека, город, страну и возраст. А транспортные и игровые свойства не таковы. В строке 81 мы копируем объект в другой объект.

Обещание

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

В функции fetchWebPage мы передаем URL-адрес и можем сказать «тогда». Это означает, что когда он будет завершен, сделайте что-нибудь (для этого примера мы получаем длину). Есть и другие вещи, которые мы можем добавить, такие как catch (может поймать, если есть какая-либо ошибка) и, наконец (это можно использовать, как только все будет сделано, это сработает независимо от того, успешно это или нет) и т. д. После запуска он возвращает длина.

Для второго примера мы используем приведенный выше код. Мы используем функцию readWebPage. Здесь мы не вы, вместо этого мы используем функцию fetchWebPage и собираемся печатать длину ответа. Как только мы запустим это, он покажет вывод как undefined. Это произойдет потому, что он переходит к строке номер 25 и вызывает fetchWebPage, но до того, как придет результат, в строке номер 26 мы пытаемся получить длину. поэтому мы не ждем, пока придут результаты. Вот почему вывод получается неопределенным.

Здесь у нас есть ключевые слова, называемые async и await ключевыми словами. При вызове fetchWebPage это вернет объект обещания и будет ждать, пока обещание не будет разрешено. Как только обещание разрешается, оно переходит к следующей строке. Если мы удалим ключевое слово await, вывод снова будет неопределенным. Таким образом, ключевое слово await допустимо только для асинхронной функции, и удаление ключевого слова async не будет работать.

~конец~