Нововведения JavaScript ES2020 с простыми примерами

Original author: Carlos Caballero
  • Translation
Представляем вам перевод статьи из блога Carlos Caballero на сайте Medium.com. Ранее мы публиковали материал этого автора о функциях ES10, появившихся в 2019 году.


Фото AbsolutVision с Unsplash

Введение


ES2020 — это версия ECMAScript, актуальная для 2020 года. В ней не так много нововведений по сравнению с ES6, вышедшей в 2015 году, но несколько полезных функций все же есть.

В этой статье новые фичи ES2020 описываются на простых примерах кода. Вы сможете быстро понять их без каких-либо сложных разъяснений.

Конечно, чтобы полностью разобраться в представленных примерах, нужно обладать базовыми знаниями JavaScript.

Нововведения JavaScript в ES2020:

  • метод String.prototype.matchAll;
  • динамический import();
  • тип BigInt;
  • метод Promise.allSettled;
  • объект globalThis;
  • механизм выполнения цикла for-in;
  • оператор Optional Chaining;
  • оператор Nullish Coalescing.

Метод String.protype.matchAll


При сопоставлении строки с регулярным выражением метод matchAll() возвращает итератор по всем результатам, включая группы захвата.



Динамический import()


Динамический import() возвращает промис для объекта пространства имен запрашиваемого модуля. Следовательно, теперь импорты можно присваивать переменной, используя синтаксис async/await.



BigInt — целые числа произвольной длины


BigInt — это седьмой примитивный тип, целое число произвольной длины. Теперь переменные данного типа могут состоять из 253 числовых знаков, они не ограничены числовым значением 9007199254740992.



Метод Promise.allSettled


Метод Promise.allSettled возвращает промис с массивом состояний промисов, но только после того, как все исходные промисы были завершены. Мы говорим, что промис завершен, если он не находится в ожидании, то есть либо выполнен, либо отклонен.



Стандартизованный объект globalThis


Объект globalThis не был стандартизован до появления ES10. В готовом коде его приходилось приводить к стандарту для различных платформ самостоятельно, прописывая нечто громоздкое, как в примере ниже.



Механизм выполнения цикла for-in


Стандарт ECMA-262 оставляет порядок обработки конструкции for (a in b) почти полностью неопределенным, но реальные движки все же пытаются быть последовательными в некоторых случаях.

Неоднократные попытки достичь согласия в определении точного порядка цикла for-in проваливались. Частично это объясняется тем, что все движки имеют свое специфическое применение, что является результатом большой работы, которую совершенно не хотелось пересматривать.

В итоге разработчики различных движков пришли к согласию относительно того, как должно происходить итерирование по свойствам в конструкции for (a in b), чтобы ее поведение могло быть стандартизовано.

Оператор Nullish Coalescing


Обычно при обращении к свойству желательно предоставлять значение по умолчанию, если результат этого обращения — null или undefined. Сейчас типичным способом выражения такого намерения в JavaScript является использование оператора ||.



Этот метод хорошо работает для обычных значений null или undefined, но существует ряд ложных значений, которые могут давать неожиданные результаты.

Оператор Nullish Coalescing (оператор объединения с неопределенным значением) предназначен для более успешной обработки таких случаев и используется с целью проверки равенства с нульарными значениями (null или undefined). Если выражение в левой части оператора ?? оценивается как undefined или null, его правая часть возвращается в качестве результата.



Оператор Optional Chaining


При обращении к свойству, расположенному глубоко в древовидной структуре, зачастую приходится добавлять проверки на существование промежуточных узлов.

Оператор Optional Chaining (оператор опциональных цепочек) позволяет разработчикам обрабатывать много подобных случаев без повторов и/или присвоения промежуточных результатов временным переменным.



Также стоит отметить, что многие API возвращают или object, или null/undefined, а вам может потребоваться извлечь свойство из результата только тогда, когда оно не является null.



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



Заключение


JavaScript — живой язык, и это очень благотворно влияет на веб-разработку. Мы наблюдаем его динамичное развитие с момента появления ES6 в 2015 году, а в этой статье освещаем возможности версии ES2020.

Вероятно, не все эти нововведения окажутся нужными для создания вашего веб-приложения. Но все они позволяют обойтись без хитроумных приемов или написания большого количества кода там, где это требовалось раньше.
Plarium
Разработчик мобильных и браузерных игр

Comments 27

    +2
    Которая уже эта статья про ES20xx с одним и тем же? Третья? Десятая? Почему это лезет в топ? Зачем? Когда уже хабр сделает фичу для фильтрации политоты, маркетингового буллщита и однообразных мусорных постов про js?
      +7
      На правах доли шутки: если это всё выкинуть, вы ж тогда сами побежите жаловаться, что читать нечего.
        +4

        Не побежим. Честное слово. Мы же на хабр заходим чтобы почитать что-нибудь интересное, а не почитать хоть бы что.
        Интересного — пара статей в будний день и хорошо если одна за пару выходных.

          0
          Да не нужно выкидывать. Нужно фичу — фильтр постов. По ключевикам и/или тегам
            +1
            не работает. автор статьи будет стараться охватить большую аудиторию тегами и ключевиками.
              +1

              Отрицательный фильтр по тегам и хабам — тоже. Я бы с удовольствием отфильтровал свою ленту исключив некоторые хабы.

                0
                А если отписаться, то они не исчезнут из ленты?
                  0

                  Статья же в нескольких хабах находится. Они связаны через OR. Так что в общем случае — не исчезнут.

              0

              И ещё по ссылке на оригинал. Чтобы переводы одного и того же группировались.

          +10

          Пишите код текстом, пожалуйста!

            –7
            Обьясните мне пожалуйста, тупому. Мы без этих нововведений сможем прожить?
            Или раньше были задачи, которые тогда были не решаемы, а с этими нововведениями они стали решаемы?
            Пожалуйста, объясните.
              +6

              Да, можем.
              Но вот Optional Chaining крайне полезная фича, пожалуй даже самая полезная со времени выхода es6.
              Насчёт остальных сложно сказать.

              • UFO just landed and posted this here
                  –4
                  Господа минусующие, а что вам не нравится? Вроде ниже люди объяснили, что без этих нововведений можно прожить.

                    0

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

                      –2
                      Да мало ли что вам не нравится. Минусовать за это что ли? Другим аватарка не понравится — тоже минусовать?
                      Вы не способны вспомнить, как выглядит в коде аналог каждой из названных вещей?

                      Способен и что?
                      Или полагаете, что надо обходиться и дальше?

                      А это так плохо, использовать старые наработки?
                        0
                        Да мало ли что вам не нравится. Минусовать за это что ли?

                        Разумеется. Для того минусы и придуманы. Чтобы пресекать то, что не нравится большинству. Если Вы получаете больше минусов, чем плюсов — у Вас два выбора: изменить поведение или покинуть ресурс.


                        А это так плохо, использовать старые наработки?

                        Извините за нескромный вопрос, а они у Вас есть?

                          –1
                          Если мне нравится Фабрицио Патерлини, а общество без ума от Олечки Бузовой, это не значит, что я не прав. Это значит что у каждого есть свое мнение. Если бы я начал поливать творчество и фанатов О. Бузовой — тогда был бы не прав уже я.
                          (попутно захватывая второй вопрос, тот, что нескромный). С javascript'ом дело имею с 2010. Все свои задачи старался делать только на чистом js. И за 10 лет кодовая база довольно обширна. Ajax, drag&drop, dropdown menu etc. Мои решения работают в ff 5, chrome всех версиях и мне этого достаточно. Они не тормозят. Они работают как надо. Сам я использую firefox 49 версии и ставить 68(73) не хочу. Слишком она много потребляет памяти.
                          Покидать я ресурс не собираюсь. У меня есть свое мнение и я вроде как еще обучаем и если вещь действительно хороша я изучу ее как можно доскональнее и найти ей применение.
                          Хотите гнаться за новшествами- гонитесь, ваше право.
                            0
                            это не значит, что я не прав.

                            Это значит, что это общество Вам не подходит. Зачем Вам такое общество? Переходите в то, где Вас понимают.


                            И за 10 лет кодовая база довольно обширна.

                            Отлично. И кто же Вам мешает её использовать? Уверяю, ни одно нововведение в движке старый код не порушит.
                            Более того, даже если новый код будет написан с использованием нововведений, он сможет использоваться совместно со старым.


                            Мои решения работают в ff 5, chrome всех версиях и мне этого достаточно

                            Так себе достижение. Когда я брался за легаси, мои решения работали в IE начиная с 6.


                            У меня есть свое мнение и я вроде как еще обучаем

                            Это ж замечательно. К нововведениям я тоже отношусь нейтрально. Потому что одно дело, когда они появились в стандарте, и совсем другое — когда вымерли браузеры без них. Между этими моментами может лет пять пройти.
                            Но воспринимать нововведения в штыки — извините.


                            А ещё бывает серверный код, который будет запускаться на новом движке, причём, заранее известной версии. Там можно смело пользоваться всем доступным синтаксическим сахаром для сокращения кода.

                              0
                              Товарищ, вы, пожалуйста, не вырывайте из контекста. И не пытайтесь выдавить меня с этого ресурса. Я, ровно как и вы, имею право на свое мнение и мое мнение явно не содержит в себе те идеи, которые должны порицаться и осуждаться.
                              Отлично. И кто же Вам мешает её использовать? Уверяю, ни одно нововведение в движке старый код не порушит.
                              Более того, даже если новый код будет написан с использованием нововведений, он сможет использоваться совместно со старым.

                              Я и использую. И в нововведениях пока надобности не испытываю. Может нет соответствующих задач еще.
                              Так себе достижение. Когда я брался за легаси, мои решения работали в IE начиная с 6.

                              Я им не пользовался изначально и поэтому позволял себе наглость игнорировать его вообще как браузер.
                              Но воспринимать нововведения в штыки — извините.

                              Я в штыки не воспринимаю. Я воспринимаю их холодно и сразу спрашиваю, что я могу убрать в своем старом коде, чтобы заменить его новым и свежим.
                              А ещё бывает серверный код, который будет запускаться на новом движке, причём, заранее известной версии. Там можно смело пользоваться всем доступным синтаксическим сахаром для сокращения кода.

                              Серверу отдаю задачи на python, php, perl, go.
                                0
                                Я им не пользовался изначально и поэтому позволял себе наглость игнорировать его вообще как браузер.

                                Ну, знаете, если Вы пишете игрушечный сайт, Вы можете себе это позволить. Но когда пишете что-то серьёзное, Вы ориентируетесь на то, что стоит у потребителей. Если у нескольких десятков тысяч потребителей винХР и нет права на самостоятельную установку софта — Вы напишете веб-приложение так, чтобы оно работало и у них тоже.


                                Я в штыки не воспринимаю. Я воспринимаю их холодно и сразу спрашиваю, что я могу убрать в своем старом коде, чтобы заменить его новым и свежим.

                                Ничего. Зато новый код Вы можете писать с использованием новых возможностей.


                                Серверу отдаю задачи на python, php, perl, go.

                                Прекрасно. А у меня другие кейсы.
                                У меня большинство пет-проектов — это консольные утилиты на nodejs.

                                  0
                                  Я, ровно как и вы, имею право на свое мнение и мое мнение явно не содержит в себе те идеи, которые должны порицаться и осуждаться.

                                  Тут, видите ли, в чём дело: каждый человек сам для себя решает, какое мнение должно порицаться и осуждаться, а какое не должно.
                                  Сообщество — реализует осреднённую картину мнения многих людей.
                                  Выдавить Вас с сообщества я, разумеется не могу. Более того, пока что не вижу, чтобы Вас тут как-то особо "порицали и осуждали".


                                  Я просто озвучил банальную истину: каждый человек волен выбирать сообщество по себе, но само сообщество — не переделать. Если Вам здесь комфортно — на здоровье. Если не комфортно — поступайте как знаете. Но, моё личное мнение, что там где некомфортно задерживаются только мазохисты.

                        0
                        Да так-то и вообще можно без Javascript прожить.
                        +1
                        Сможем? Да*. Cнужим? Нет.
                        Необходимость писать лаконичный код с минимумом third party-костылей — это достаточно конкретно, чтоб считать задачей?

                        * И успехов с ложными срабатываниями при замещении новоиспеченного globalThis кашей из window, self и global.
                          0
                          задачи, которые тогда были не решаемы
                          Вот, например, BigInt.
                          В Вашей кодовой базе, которую Вы накопили за 10 лет, есть решение для длинной арифметики?
                          В моей — было, но тормозное и глючное, я от него отказался как только BigInt появился в nodejs и в Vivaldi.
                            0
                            Нет, отсутствует. Так как с этим не работал вообще. Не сталкивался.
                          +2
                          image
                          Этот код аж заставил запустить консоль, чтоб перепроверить.
                          const value = values.numberValue || 300;
                          Проверил, выдохнул. Все-таки опечатка была.

                          Only users with full accounts can post comments. Log in, please.