Хороший программист должен знать как работает язык, на котором он пишет. Причем, желательно очень хорошо. Не ради собеседований, ради понимания.
В этом канале мы будем разбирать странные, неочевидные и местами противоречивые особенности JS (и других около стоящих языков), говорить о возможностях стандартной библиотеки и о более выразительных аналогах, изучать лучшие практики написания JS-кода.
В этом канале мы будем разбирать странные, неочевидные и местами противоречивые особенности JS (и других около стоящих языков), говорить о возможностях стандартной библиотеки и о более выразительных аналогах, изучать лучшие практики написания JS-кода.
Стандартная бибилиотка: даты и боль
В новом JS появилась функция форматирования даты в локаль-зависимом виде.
Это простой способ показать дату в привычном пользователю формате. При вызове без параметров локаль подтянеться из среды выполнения.
Использовать в Node.js эту функцию нужно осторожно (например при отправке писем пользователям). Если не указать локаль, то будет использована локаль сервера, она часто не совпадает с локалью пользователей.
На MDN есть неплохая статья про эту функцию.
#stdlib
В новом JS появилась функция форматирования даты в локаль-зависимом виде.
Это простой способ показать дату в привычном пользователю формате. При вызове без параметров локаль подтянеться из среды выполнения.
Использовать в Node.js эту функцию нужно осторожно (например при отправке писем пользователям). Если не указать локаль, то будет использована локаль сервера, она часто не совпадает с локалью пользователей.
На MDN есть неплохая статья про эту функцию.
#stdlib
Числа
Все знают, что
Статья объяснение от Марата Сайтакова
#explain
Все знают, что
0.1 + 0.2 = 0.30000000000000004
. Но это не вина JavaScript.Статья объяснение от Марата Сайтакова
#explain
blog.m4rr.ru
0.1 + 0.2
Присылают мне сегодня комикс про Джаваскрипт. Разберем его
Стандартная бибилиотка: это массив
Узнать, является ли нечто массивом не так просто, как кажется.
Если код выполняется в среде поддерживающей ES5+ (или транспайлится), то доступна функция
Я страстно люблю lodash, но всему свое место и время.
#stdlib
Узнать, является ли нечто массивом не так просто, как кажется.
typeof
вернет object
, а многие свойства массивов присущи и другим объектам.Если код выполняется в среде поддерживающей ES5+ (или транспайлится), то доступна функция
Array.isArray
которая проверяет, евляется ли аргумент массивом. В таком случае можно выкинуть _.isArray
и пользоваться стандартной бибилиотекой.Я страстно люблю lodash, но всему свое место и время.
#stdlib
React Fiber
React — самый популярный JS-фреймворк. И в нем есть много сложных и тонких моментов.
Перевод статьи с обзором React Fiber и внутренних механизмов работы нового API — хуков
#framework
React — самый популярный JS-фреймворк. И в нем есть много сложных и тонких моментов.
Перевод статьи с обзором React Fiber и внутренних механизмов работы нового API — хуков
#framework
Medium
Подробный обзор React Fiber
React — это JavaScript-библиотека для создания пользовательских интерфейсов. В его основе лежит механизм, который отслеживает изменения…
Деньги
Работать с денежными значениями сложно в любом языке, но в JS — особенно. Тут и проблемы с разными валютами, и опасность хранения сумм как чисел с плавающей точкой.
В JS нет подходящих встроенных типов.
Тематическая статья — Как работать с денежными значениями в JavaScript
BigInt
В браузере: поддерживается в новых Chromium, для остальных браузеров — полифил jsbi и клевый сторонний Babel-плагин
В Node.js: в v10.4 добавили поддержку
Что такое BigInt и почему он важен
#link
Работать с денежными значениями сложно в любом языке, но в JS — особенно. Тут и проблемы с разными валютами, и опасность хранения сумм как чисел с плавающей точкой.
В JS нет подходящих встроенных типов.
Money
и Decimal
даже не планируются, а BigInt
еще на stage3 (не принят в стандарт). Потому приходится использовать сторонние библиотеки или писать свои "велосипеды".Тематическая статья — Как работать с денежными значениями в JavaScript
BigInt
В браузере: поддерживается в новых Chromium, для остальных браузеров — полифил jsbi и клевый сторонний Babel-плагин
В Node.js: в v10.4 добавили поддержку
BigInt
.Что такое BigInt и почему он важен
#link
Стандартная бибилиотка: юникодные строки
При обработке пользовательского ввода часто приходится сравнивать его значение с референсом. При наивном сравнении легко допустить ошибку из-за возможности модификации символов в UNICODE.
В типографике используются диакритические знаки для модификации символов.
Для реализации таких изменений в UNICODE предоставили возможность композиции символов.
Сравнение таких символов через === в JavaScript даст false, поэтому для облегчения жизни существует метод
Статья на Medium
#stdlib
При обработке пользовательского ввода часто приходится сравнивать его значение с референсом. При наивном сравнении легко допустить ошибку из-за возможности модификации символов в UNICODE.
В типографике используются диакритические знаки для модификации символов.
Для реализации таких изменений в UNICODE предоставили возможность композиции символов.
Сравнение таких символов через === в JavaScript даст false, поэтому для облегчения жизни существует метод
String.prototype.normalize()
, который возвращает нормализованную строку.Статья на Medium
#stdlib
Стандартная бибилиотка: состояние регулярки
На первый взгляд кажется, что регулярные выражения не могут хранить в себе состояние. Это не так.
Функции
Обойти это можно через свойство
Если поиск ничего не нашел, это свойство автоматически сбрасывается на 0.
#stdlib
На первый взгляд кажется, что регулярные выражения не могут хранить в себе состояние. Это не так.
Функции
test
и exec
начинают проверять строку с последнего совпадения, если регулярное выражение имеет флаг global
(g
).Обойти это можно через свойство
lastIndex
. Нужно установить его на 0
и поиск начнется снова с начала строки.Если поиск ничего не нашел, это свойство автоматически сбрасывается на 0.
#stdlib
React и связные списки
Продолжаем серию постов про внутреннее устройство React. Внутри фреймворка часто используются довольно необычные для JS структуры данных.
Перевод статьи с объяснением, как и почему React использует связные списки в архитектуре Fiber
Предыдущая часть — React Fiber
#framework
Продолжаем серию постов про внутреннее устройство React. Внутри фреймворка часто используются довольно необычные для JS структуры данных.
Перевод статьи с объяснением, как и почему React использует связные списки в архитектуре Fiber
Предыдущая часть — React Fiber
#framework
Medium
Как и почему React использует связные списки в архитектуре Fiber
Это перевод статьи Макса Корецки The how and why on React’s usage of linked list in Fiber to walk the component’s tree
Приведение типов
JS славится своей системой преобразования типов. Александр Майоров в двух статьях рассказывает как она работает и что нужно делать чтобы не допускать ошибок.
Приведение типов в JS:
+ Магия или простые правила?
+ Что еще надо знать в 2019 году
#типы
JS славится своей системой преобразования типов. Александр Майоров в двух статьях рассказывает как она работает и что нужно делать чтобы не допускать ошибок.
Приведение типов в JS:
+ Магия или простые правила?
+ Что еще надо знать в 2019 году
#типы
Новые браузерные API
JavaScript — это больше чем чем язык. Это еще и очень изменчивая среда выполнения (зоопарк устройств, разные браузеры). Единственное, что хоть чуть-чуть упрощает жизнь — стандартизированные браузерные API.
В последние годы появилось много новых API. Тематический доклад — API браузеров, о которых вы могли не слышать
#api #link
JavaScript — это больше чем чем язык. Это еще и очень изменчивая среда выполнения (зоопарк устройств, разные браузеры). Единственное, что хоть чуть-чуть упрощает жизнь — стандартизированные браузерные API.
В последние годы появилось много новых API. Тематический доклад — API браузеров, о которых вы могли не слышать
#api #link
YouTube
API браузеров, о которых вы могли не слышать / Антон Власик
«Что за браузерные API такие, о которых я не знаю?», — спросите вы себя. Представляю вашему вниманию и удивлению некоторые современные возможности браузеров, о существовании которых вы, скорее всего, не слышали. На реальных примерах увидим, как это всё работает…
Решил попробовать новый формат — пазлы.
range
В некоторых программах часто возникает необходимость получить интерал чисел. В Python есть встроенная функция range, в Scala — красивая синтаксическая конструкция 5 to 14 by 3.
В JavaScript можно сделать нечто подобное. Результат в прикрепленной картинке.
Присылайте свои варианты, как это работает, завтра покажу авторское решение.
#puzzle
range
В некоторых программах часто возникает необходимость получить интерал чисел. В Python есть встроенная функция range, в Scala — красивая синтаксическая конструкция 5 to 14 by 3.
В JavaScript можно сделать нечто подобное. Результат в прикрепленной картинке.
Присылайте свои варианты, как это работает, завтра покажу авторское решение.
#puzzle
range
Мы должны изменить прототип Number, добавить туда функцию-генератор, которая и будет выдавать числа в заданном промежутке.
В целом, код простой, но в нем есть два интересных момента.
Две точки
Первая точка относится к числу, а вот вторая уже к вызову функции
Number
В начале функции-генератора нужно привести
Предупреждение
Никогда не делайте так в реальном коде. Изменение прототипов встроенных объектов — очень плохая идея, которая приводит к печальным последствиям.
#puzzle_answer
Мы должны изменить прототип Number, добавить туда функцию-генератор, которая и будет выдавать числа в заданном промежутке.
В целом, код простой, но в нем есть два интересных момента.
Две точки
Первая точка относится к числу, а вот вторая уже к вызову функции
to
на результирующем числе.Number
В начале функции-генератора нужно привести
this
к примитивному значению, иначе первым элементом будет отдана объектная обертка числа, что не хорошо (их нельзя сравнивать между собой, например).Предупреждение
Никогда не делайте так в реальном коде. Изменение прототипов встроенных объектов — очень плохая идея, которая приводит к печальным последствиям.
#puzzle_answer
Решение из прошлого поста не позволяет установить шаг для интеравала. Это не здорово, но в текущую реализацию легко добавить такой параметр.
К сожалению, придется все переписать, на генераторах построить это решение нелья.
Вручную реализуем интерфейс итератора, и добавим резльтирующему объекту метод
#puzzle_answer
К сожалению, придется все переписать, на генераторах построить это решение нелья.
Вручную реализуем интерфейс итератора, и добавим резльтирующему объекту метод
by
, который тоже вернет итератор, но уже с заданным шагом.#puzzle_answer
Последние три поста рассказывали про итераторы. Использовать в жизни те решения, что в них рассматривались нельзя. Но не из-за итераторов, из-за изменения прототипа числа. Ниже прикреплен код аналогичного решения без грязи.
Итератор
Итерируемыми назвают объекты которые можно "перебирать". Например, массив — итерируемый объект. И список DOM-узлов, строки,
Многие встроенные в JS штуки (for-of, srepad-оператор) работают с любым итерируемым объектом. Это позволяет подсовывать им свои реализации, получать выразительный и простой код.
Статья на MDN — The iterable protocol
#stdlib
Итератор
Итерируемыми назвают объекты которые можно "перебирать". Например, массив — итерируемый объект. И список DOM-узлов, строки,
Map
, Set
и arguments
тоже.Многие встроенные в JS штуки (for-of, srepad-оператор) работают с любым итерируемым объектом. Это позволяет подсовывать им свои реализации, получать выразительный и простой код.
Статья на MDN — The iterable protocol
#stdlib