Глубокое копирование через JSON
Возможно, вы слышали об использовании оператора spread или Object.assign() для создания поверхностных копий объекта, но знаете ли вы об использовании JSON для глубокого копирования?
Преобразуйте объект в JSON с помощью JSON.stringify(), а затем повторно прогоните его с помощью JSON.parse(), чтобы создать глубокую копию.
Однако помните, что такой подход имеет проблемы с производительностью на больших объектах. Если вам нужна поверхностная копия - лучше использовать оператор spread
#js
Возможно, вы слышали об использовании оператора spread или Object.assign() для создания поверхностных копий объекта, но знаете ли вы об использовании JSON для глубокого копирования?
Преобразуйте объект в JSON с помощью JSON.stringify(), а затем повторно прогоните его с помощью JSON.parse(), чтобы создать глубокую копию.
Однако помните, что такой подход имеет проблемы с производительностью на больших объектах. Если вам нужна поверхностная копия - лучше использовать оператор spread
#js
👍5🔥2
Virtual DOM (Виртуальный DOM)
Это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM. Этот процесс называется согласованием.
Не стоит путать Виртуальный DOM и Shadow DOM (Теневой DOM). Shadow DOM — это браузерная технология, предназначенная в основном для определения области видимости переменных и CSS в веб-компонентах. Виртуальный DOM — это концепция, реализованная библиотеками в JavaScript поверх API браузера.
Подробнее в статье 👈
#react
Это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM. Этот процесс называется согласованием.
Не стоит путать Виртуальный DOM и Shadow DOM (Теневой DOM). Shadow DOM — это браузерная технология, предназначенная в основном для определения области видимости переменных и CSS в веб-компонентах. Виртуальный DOM — это концепция, реализованная библиотеками в JavaScript поверх API браузера.
Подробнее в статье 👈
#react
👍7🔥3❤1🍾1
Удаление дубликатов из массива
Eсть очень простой способ удалить дубликаты из массива с помощью структуры данных Set.
По сути, Set не допускает дублирования значений. Мы можем воспользоваться этим, превратив массив в Set, а затем обратно в массив.
Что примечательно, реализация через Set работает в разы быстрее filter + indexOf подхода
Eсть очень простой способ удалить дубликаты из массива с помощью структуры данных Set.
По сути, Set не допускает дублирования значений. Мы можем воспользоваться этим, превратив массив в Set, а затем обратно в массив.
Что примечательно, реализация через Set работает в разы быстрее filter + indexOf подхода
array.filter((item, index) => array.indexOf(item) != index);#js
👍5🔥3❤1
Фиксированный table-layout
Таблицы очень полезны для отображения различных данных и даже для определенных ситуаций форматирования (но я бы советовал использовать таблицы только для табличных данных). По умолчанию ширина столбцов таблицы устанавливается равной ширине контента, содержащегося в ее ячейках. Это может привести к ужасному дизайну, особенно если у вас есть несколько таблиц, каждая из которых имеет столбцы разного размера.
Но еще хуже то, что поведение по умолчанию может быть непредсказуемым, когда вы впервые с ним сталкиваетесь. Например, вы можете указать ширину столбца в процентах, но браузер просто проигнорирует ваши стили.
Добавляем фиксированный table-layout. Установив это свойство в значение «fixed», вы можете получить более предсказуемый и интуитивно понятный контроль над отображением таблицы. Заработают такие вещи, как overflow: hidden, и столбцы будут именно той ширины, которую вы установили, независимо от содержимого.
#css
Таблицы очень полезны для отображения различных данных и даже для определенных ситуаций форматирования (но я бы советовал использовать таблицы только для табличных данных). По умолчанию ширина столбцов таблицы устанавливается равной ширине контента, содержащегося в ее ячейках. Это может привести к ужасному дизайну, особенно если у вас есть несколько таблиц, каждая из которых имеет столбцы разного размера.
Но еще хуже то, что поведение по умолчанию может быть непредсказуемым, когда вы впервые с ним сталкиваетесь. Например, вы можете указать ширину столбца в процентах, но браузер просто проигнорирует ваши стили.
Добавляем фиксированный table-layout. Установив это свойство в значение «fixed», вы можете получить более предсказуемый и интуитивно понятный контроль над отображением таблицы. Заработают такие вещи, как overflow: hidden, и столбцы будут именно той ширины, которую вы установили, независимо от содержимого.
#css
🔥5❤2👍2
Удаление элементов массива
Используйте splice вместо delete для удаления элемента из массива. Метод delete заменяет элемент undefined значением, а не удаляет его из массива.
Используйте delete для удаления свойств из объектов, а не массивов.
Метод slice принимает несколько аргументов.
Первый - индекс, с которого будет начато изменения массива.
Второй - количество элементов, которые нужно удалить.
Третий и последующие - необязательные параметры. Это добавляемые к массиву элементы. Если их не указывать, то splice просто удалит элементы из массива, как показано в примере.
Следует учитывать, что оба метода мутируют исходный массив/объект. Если вам нужно сохранить исходные данные - создайте копию перед манипуляциями
Используйте splice вместо delete для удаления элемента из массива. Метод delete заменяет элемент undefined значением, а не удаляет его из массива.
Используйте delete для удаления свойств из объектов, а не массивов.
Метод slice принимает несколько аргументов.
Первый - индекс, с которого будет начато изменения массива.
Второй - количество элементов, которые нужно удалить.
Третий и последующие - необязательные параметры. Это добавляемые к массиву элементы. Если их не указывать, то splice просто удалит элементы из массива, как показано в примере.
Следует учитывать, что оба метода мутируют исходный массив/объект. Если вам нужно сохранить исходные данные - создайте копию перед манипуляциями
const copiedItems = [...items]#js
copiedItems.splice(3,1);
👍8🤔2🔥1
Задача: Длина последнего слова
Для заданной строки s, состоящей из слов и пробелов, вернуть длину последнего слова в строке. Примечание: слово — это максимальная подстрока, состоящая только из символов без пробелов.
Пример
Ввод: s = " Привет Мир "
Вывод: 3
Объяснение: Последнее слово "Мир" содержит 3 буквы.
Ответ 👈
#algorithms
Для заданной строки s, состоящей из слов и пробелов, вернуть длину последнего слова в строке. Примечание: слово — это максимальная подстрока, состоящая только из символов без пробелов.
Пример
Ввод: s = " Привет Мир "
Вывод: 3
Объяснение: Последнее слово "Мир" содержит 3 буквы.
Ответ 👈
#algorithms
👍7🔥3🤩2
Случайный элемент массива
Сегодня разберем два способа получения случайного элемента массива: обычный и криптографический.
Преимущество обычного способа в том, что он короток в написании и прост в чтении, даже новичку. Однако, метод Math.random() возвращет псевдослучайное число, что может не подойти, если вам нужна более непредсказуемая генерация чисел. Например, вам нужно свое приложение с блэкджеком и покером. Здесь на выручку приходит метод crypto.getRandomValues, который возращает криптографически стойкие числа. Пример реализации можно увидеть на втором скрине.
В большинстве случаев будет достаточно первого метода, т.к. он быстрее, да и вряд ли вам понадобятся криптографический рандом, чтобы показывать набор случайных карточек в дашборде.
К слову о производительности. Math.random() более чем в 10 раз быстрее своего криптографического аналога
#js
Сегодня разберем два способа получения случайного элемента массива: обычный и криптографический.
Преимущество обычного способа в том, что он короток в написании и прост в чтении, даже новичку. Однако, метод Math.random() возвращет псевдослучайное число, что может не подойти, если вам нужна более непредсказуемая генерация чисел. Например, вам нужно свое приложение с блэкджеком и покером. Здесь на выручку приходит метод crypto.getRandomValues, который возращает криптографически стойкие числа. Пример реализации можно увидеть на втором скрине.
В большинстве случаев будет достаточно первого метода, т.к. он быстрее, да и вряд ли вам понадобятся криптографический рандом, чтобы показывать набор случайных карточек в дашборде.
К слову о производительности. Math.random() более чем в 10 раз быстрее своего криптографического аналога
#js
👍6❤3🔥1
Является ли аргумент числовым?
Подобная функция может пригодиться, если вам нужно проверить данные, полученные из ненадежного источника, например, после парсинга.
1. Отсекаем все типы, кроме строк.
2. Проверяем, является ли аргумент числовым значением с помощью !NaN.
3. Если пункт 2 прошел проверку, то пытаемся получить десятичное число с помощью parseFloat и проверяем полученное значение с помощью того же !NaN.
Учитывайте, что в качестве разделителя чисел валидна только точка ".".
Возможно, у вас появился вопрос: "Почему бы не использовать базовые функции вроде parseInt или Number?". Причина в том, что иногда, они могут вести себя не очевидно. Например, частично парсить parseInt('12px') -> 12, не учитывать дробную часть parseInt('0.5') -> 0 или даже преобразовывать пробелы Number(' ') -> 0
#js
Подобная функция может пригодиться, если вам нужно проверить данные, полученные из ненадежного источника, например, после парсинга.
1. Отсекаем все типы, кроме строк.
2. Проверяем, является ли аргумент числовым значением с помощью !NaN.
3. Если пункт 2 прошел проверку, то пытаемся получить десятичное число с помощью parseFloat и проверяем полученное значение с помощью того же !NaN.
Учитывайте, что в качестве разделителя чисел валидна только точка ".".
Возможно, у вас появился вопрос: "Почему бы не использовать базовые функции вроде parseInt или Number?". Причина в том, что иногда, они могут вести себя не очевидно. Например, частично парсить parseInt('12px') -> 12, не учитывать дробную часть parseInt('0.5') -> 0 или даже преобразовывать пробелы Number(' ') -> 0
#js
👍5❤2🔥2🤩1
React. Частые ошибки: Prop-drilling
Prop-drilling – это передача одного свойства на несколько уровней вниз. Сам React никак не ограничивает глубину передачи пропсов, однако, если слишком увлечься, то можно получить проблемы с производительностью и расширением кодовой базы.
React компоненты перерисовываются каждый раз при изменении пропсов (или, как минимум, пытаются это делать, если компонент мемоизирован). Так вот, если прокидывать проп на несколько уровней ниже, то промежуточные компоненты будут так же перерисовываться, тем самым, понижая производительность.
На помощь может прийти React Context или любой менеджер состояний (например, Redux или MobX). С их помощью можно избавить промежуточные компоненты от передачи пропсов, а так же вынести бизнес логику в отдельные сущности.
P.S. Дока Redux на русском и дока MobX на русском (немного устарела, но концепция сильно не изменилась)
#react
Prop-drilling – это передача одного свойства на несколько уровней вниз. Сам React никак не ограничивает глубину передачи пропсов, однако, если слишком увлечься, то можно получить проблемы с производительностью и расширением кодовой базы.
React компоненты перерисовываются каждый раз при изменении пропсов (или, как минимум, пытаются это делать, если компонент мемоизирован). Так вот, если прокидывать проп на несколько уровней ниже, то промежуточные компоненты будут так же перерисовываться, тем самым, понижая производительность.
На помощь может прийти React Context или любой менеджер состояний (например, Redux или MobX). С их помощью можно избавить промежуточные компоненты от передачи пропсов, а так же вынести бизнес логику в отдельные сущности.
P.S. Дока Redux на русском и дока MobX на русском (немного устарела, но концепция сильно не изменилась)
#react
👍8🔥3❤2
Удовлетворяет ли элемент массива условию?
В начале небольшое пояснение: метод some проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции.
Часто вижу, что вместо some используют
Все три метода, действительно, очень похожи, и вы можете использовать findIndex или find вместо
Кстати, если вы проверяете массив на наличие в нем undefined, то
#js
В начале небольшое пояснение: метод some проверяет, удовлетворяет ли какой-либо элемент массива условию, заданному в передаваемой функции.
Часто вижу, что вместо some используют
[].findIndex(() => ...) !== 0 или даже [].find(() => ...) !== undefined. Все три метода, действительно, очень похожи, и вы можете использовать findIndex или find вместо
some. Причина по которой стоит использовать some – удобочитаемость. Мы же все стремимся к читаемому коду, верно?Кстати, если вы проверяете массив на наличие в нем undefined, то
find – заведомо плохая идея, т.к. независимо от содержимого массива, конструкция вроде arr.find((el) => el === undefined) !== undefined всегда будет возвращать false, потому что невозможно отличить найденный элемент от undefined, который вернулся из-за того, что ни один элемент не удовлетворил условию.#js
👍7🔥3❤2🍾2
Задача: Треугольник Паскаля
Сегодня разберу легкую задачку с leetcode.
Дано целое число rowIndex. Нужно вернуть массив чисел, который соответсвует этой строке в треугольнике Паскаля.
В треугольнике Паскаля каждое число является суммой двух чисел над ним.
Пример 1:
Ввод: rowIndex = 1
Вывод: [1, 1]
Пример 2:
Ввод: rowIndex = 0
Вывод: [1]
Пример 3:
Ввод: rowIndex = 4
Вывод: [1, 4, 6, 4, 1]
Пишите свои версии в комментариях.
Ответ с объяснением 👈
#algorithms
Сегодня разберу легкую задачку с leetcode.
Дано целое число rowIndex. Нужно вернуть массив чисел, который соответсвует этой строке в треугольнике Паскаля.
В треугольнике Паскаля каждое число является суммой двух чисел над ним.
Пример 1:
Ввод: rowIndex = 1
Вывод: [1, 1]
Пример 2:
Ввод: rowIndex = 0
Вывод: [1]
Пример 3:
Ввод: rowIndex = 4
Вывод: [1, 4, 6, 4, 1]
Пишите свои версии в комментариях.
Ответ с объяснением 👈
#algorithms
👍4🔥3❤1
Ловите полезный кастомный хук, который поможет избавиться от бойлерплейта.
Немного пояснений как он работает:
1. Трюк с useRef и useEffect на 8-12 строках нужен для того, чтобы не обязывать всех пользователей оборачивать handler в useCallback. Если просто передавать handler в зависимости useEffect на 14-22 строках, то этот useEffect будет срабатывать каждый ререндер, что не есть хорошо для производительности.
2. isSupported на 15 строке помогает, когда третьим аргументом передается элемент или ref элемента, которые не всегда могут быть в DOM на момент срабатывания функции
P.S. Код хука скину в комменты
#react
Немного пояснений как он работает:
1. Трюк с useRef и useEffect на 8-12 строках нужен для того, чтобы не обязывать всех пользователей оборачивать handler в useCallback. Если просто передавать handler в зависимости useEffect на 14-22 строках, то этот useEffect будет срабатывать каждый ререндер, что не есть хорошо для производительности.
2. isSupported на 15 строке помогает, когда третьим аргументом передается элемент или ref элемента, которые не всегда могут быть в DOM на момент срабатывания функции
P.S. Код хука скину в комменты
#react
👍7🔥3❤2
История ES модулей
Один из подписчиков попросил рассказать подробнее про ES модули. Материала набралось на целую статью с примерами.
Я постарался кратко разобрать Модуль паттерн, CommonJs и EcmaScript Модули, плюсы и минусы каждого из подходов. Если остались вопросы или хотите предложить свои темы для постов – буду ждать вас в комментах.
👉👉👉 Читать статью 👈👈👈
#js
Один из подписчиков попросил рассказать подробнее про ES модули. Материала набралось на целую статью с примерами.
Я постарался кратко разобрать Модуль паттерн, CommonJs и EcmaScript Модули, плюсы и минусы каждого из подходов. Если остались вопросы или хотите предложить свои темы для постов – буду ждать вас в комментах.
👉👉👉 Читать статью 👈👈👈
#js
🔥7👍5🤩1
Чему равны evalX и x?
Anonymous Quiz
29%
evalX: 1, x: 1
44%
evalX: 2, x: 1
21%
evalX: 2, x: 2
7%
evalX: 1, x: 2
👍5🤔2🤯2
🪝Хук useGetLatest🪝
Этот хук создает из объекта геттер, который может помочь избежать многих проблем с лишними ререндерами и утечками памяти. С его помощью можно как оптимизировать большие компоненты, так и создавать собственные хуки. Не думаю, что вы сможете широко применять его в простых компонентах. Я бы советовал составлять пропсы "глупых" компонентов из примитивов (насколько это возможно).
Допустим, есть компонент, который принимает большой объект
Другой вариант - деструктурировать
С помощью
Код, как обычно, в комментах.
#react
Этот хук создает из объекта геттер, который может помочь избежать многих проблем с лишними ререндерами и утечками памяти. С его помощью можно как оптимизировать большие компоненты, так и создавать собственные хуки. Не думаю, что вы сможете широко применять его в простых компонентах. Я бы советовал составлять пропсы "глупых" компонентов из примитивов (насколько это возможно).
Допустим, есть компонент, который принимает большой объект
settings (второй скрин). Нужно при каждом клике по странице делать определенные манипуляции с settings. Многие просто взяли и влепили бы props.settings в зависимости useEffect на 16 строке. Что привело бы к перерегистрации handleClick обработчика при каждом ререндере родительского компонента. Перспектива мрачная.Другой вариант - деструктурировать
settings и добавлять в зависимости useEffect конкретные поля. Уже лучше. Перерегистраций handleClick станет меньше из-за того, что в зависимостях будет не весь объект, а конкретные его части. Но и это можно улучшить.С помощью
useGetLatest useEffect будет срабатывать только один раз, но внутри будет доступ к последним значениям settings.Код, как обычно, в комментах.
#react
👍7🔥2❤1