Изучайте новейшую грамматику JavaScript вместе
По сей день JavaScript по-прежнему остается самым популярным языком веб-разработки в мире. От этого выиграли бесчисленные предприятия и отдельные разработчики. Стоит отметить, что после рождения V8 производительность JavaScript резко возросла, что принесло NodeJS в этом столетии. Продукты, как разработчики, мы также постоянно разрабатываем популярные модели разработки и стандарты спецификации кода, которые подходят для общественности.
Каждый год TC39 выпускает новейшие грамматики JavaScript, поэтому давайте взглянем на самые популярные из них, завершившие свои этапы.
1. Необязательный оператор цепочки оператор
Автор：Габриэль Изенберг, Клод Паш, Дастин Савери.
Почему всем нравится функция необязательный оператор цепочки? Я полагаю, что вы часто будете сталкиваться с ситуацией, когда объект и его значение ключа могут быть нулевыми или неопределенными в повседневной разработке, поэтому мы написали это раньше:
Ну, если иерархия объектов неглубокая, это нормально, но когда уровней больше трех — это кошмар, и читабельность кода станет очень плохой, так что есть ли элегантное решение? Да! Это необязательный оператор цепочки, давайте посмотрим, что это такое
Необязательный оператор связывания оператор (
?.) позволяет считывать значение свойства, расположенного глубоко внутри цепочки связанных объектов, без необходимости проверять правильность каждой ссылки в цепочке. .
Отлично, давайте попробуем преобразовать приведенный выше код:
Гораздо изящнее, не так ли? Необязательный оператор цепочки позволяет разработчику обрабатывать многие из этих случаев, не повторяясь и/или не присваивая промежуточные результаты во временных переменных.
Необязательный оператор цепочки очень удобен при работе с функциями:
Потрясающий! Очень удобно использовать этот синтаксис, когда дочерний компонент React обращается к родительскому компоненту.
Примечание. Необязательную цепочку нельзя использовать для необъявленных корневых объектов, но можно использовать для неопределенных корневых объектов.
Кроме того, необязательный оператор цепочки не поддерживается в следующих сценариях.
- Дополнительная конструкция:
new A?.() - Необязательный литерал шаблона:
a?.`string` - Литералы конструктора или шаблона в/после опциональной цепочки:
new A?.b(),a?.b`string` - Необязательное присвоение свойства:
a?.b = c
Подводя итог, хотя необязательный оператор цепочки имеет некоторые неподдерживаемые моменты, его преимуществ намного больше, чем его недостатков. Это действительно может значительно улучшить нашу ежедневную разработку, поэтому, пожалуйста, не стесняйтесь рассказывать об этом своим коллегам. Используйте его, поверьте мне, вам понравится этот синтаксис.
2. Импорт
Автор：Доменик Деникола.
Зачем импортировать? Разве это не стандартный синтаксис es? Нет, импорт, упомянутый здесь, больше касается асинхронной и динамической загрузки, средства Tree-Shaking. Что касается того, почему существует это предложение, нам нужно понять недостатки статической компиляции. Современный синтаксис высокого уровня, используемый в веб-разработке, включая введение сторонних библиотек, таких как D3, Mui, Mixpanel или некоторых файлов проекта, мы должны использовать оператор импорта для одновременной загрузки всех сторонних модулей, но на самом деле мы надеемся, что сможем запускать динамически загружать некоторые модули приложения JavaScript, потому что мы знаем только то, что модуль загружает во время выполнения, но иногда мы хотим использовать код без загрузки некоторых модулей для достижения цели динамической загрузки .
Итак, какие сценарии необходимо загружать динамически? Или в целях оптимизации производительности вы хотите использовать динамическую загрузку?
- При статическом импорте значительно замедляется загрузка вашего кода и маловероятно, что импортируемый код вам понадобится, или он вам не понадобится до более позднего времени.
- При статическом импорте значительно увеличивается использование памяти вашей программой, и маловероятно, что вам понадобится код, который вы импортируете.
- Когда модуль, который вы импортируете, не существует во время загрузки
- Когда строку спецификатора импорта необходимо создавать динамически. (Статический импорт поддерживает только статические спецификаторы.)
- Когда импортируемый модуль имеет побочные эффекты, и вам не нужны эти побочные эффекты, если не выполняется какое-либо условие. (Рекомендуется не иметь никаких побочных эффектов в модуле, но иногда вы не можете контролировать это в зависимостях вашего модуля.)
Используйте динамический импорт только при необходимости. Статическая форма предпочтительнее для загрузки первоначальных зависимостей и может быть более полезной с инструментами статического анализа и дрожанием дерева.
Чтобы динамически импортировать модуль, ключевое слово import может вызываться как функция. При таком использовании возвращается обещание.
Пример динамического импорта
Отличный динамический импорт может применяться в нескольких сценариях, например при загрузке разных модулей в соответствии с разными условиями, что может эффективно повысить производительность и удобство для пользователей.
3. Нулевой оператор объединения
Автор：Габриэль Изенберг
Нулевой оператор объединения (??) — это логический оператор, который возвращает свой правый операнд, когда его левый операнд равен null или undefined, и в противном случае возвращает свой левый операнд.
Это можно рассматривать как частный случай логического оператора ИЛИ (||), который возвращает правый операнд, если левый операнд является любым ложным значением, а не только нулевым или неопределенным.
Стоит отметить, что использование нулевого оператора объединения с необязательным оператором цепочки значительно повышает удобочитаемость и удобство сопровождения кода.
Давайте рассмотрим простой пример
Хорошо, это ничем не отличается от || оператора, не волнуйтесь, давайте посмотрим на другой пример, чтобы понять
что случилось? code возвращает0 ? почему? На практике ноль часто является допустимым значением, которое не следует заменять значением по умолчанию. Так что ?? поступает правильно.
С использованием ?? с && или ||
Из соображений безопасности JavaScript запрещает использование ?? вместе с операторами && и ||, если приоритет явно не указан в скобках.
Код ниже вызывает синтаксическую ошибку:
Краткое содержание
- Нулевой оператор объединения
??обеспечивает короткий способ выбора первого «определенного» значения из списка. - Оператор
??имеет очень низкий приоритет, лишь немного выше, чем?и=, поэтому рассмотрите возможность добавления круглых скобок при его использовании в выражении. - Запрещено использовать его с
||или&&без явных скобок.
4. Глобальное это
Автор：Джордан Харбанд
Вас когда-нибудь беспокоило обслуживание этого или window или global global объектов? Да, они действительно отстой. Да, трудно написать переносимый код ECMAScript, который обращается к глобальному объекту. В Интернете он доступен как window или self или this или frames; на node.js это global или this , например:
Кроме того, es6-shim пришлось переключиться с Function('return this')() из-за проблем CSP, так что текущая проверка для обработки браузеров, узлов, веб-воркеров и фреймов:
5. Массив.прототип.at()
Автор：Shu-yu Guo Tab Atkins Jr.
Метод at() принимает целочисленное значение и возвращает элемент с этим индексом, допуская положительные и отрицательные целые числа. Отрицательные целые числа отсчитываются от последнего элемента в массиве.
Синтаксис: at(index)
Параметры: index Индекс (позиция) возвращаемого элемента массива. Поддерживает относительную индексацию с конца массива при передаче отрицательного индекса; т. е. если используется отрицательное число, возвращенный элемент будет найден путем обратного отсчета от конца массива.
Возвращаемое значение: элемент в массиве, соответствующий заданному индексу. Возвращает undefined, если данный индекс не может быть найден.
Давайте посмотрим примеры:
Хорошо, это выглядит намного удобнее, чем использование array[array.length — 1] для получения последнего элемента.
Возможные проблемы:.at() также может быть несовместимым с Интернетом по неизвестным причинам.
Полифилл
Заключение
В этой статье мы узнали о нескольких самых популярных функциях синтаксиса, что действительно интересно, потому что это действительно может повысить эффективность нашей разработки, и это еще реже для тех, кто внес свой вклад в стандарт языка JS, большое спасибо. ты.
