Всем привет! В этом посте мы рассмотрим, что такое
Что такое enum?
enum позволяет определить набор именованных констант. Использование enum делает код более читабельным и поддерживаемым, позволяя использовать именованные константы вместо магических чисел или строк.
Что такое const enum?
Основные различия:
1.
2. Так как
3.
Что использовать?
- Используйте
- Используйте
Заключение
Выбор между
#typescript
enum в TypeScript и какие существуют варианты объявления. Что такое enum?
enum позволяет определить набор именованных констант. Использование enum делает код более читабельным и поддерживаемым, позволяя использовать именованные константы вместо магических чисел или строк.
Что такое const enum?
const enum - это особый вид перечисления в TypeScript, который полностью удаляется при компиляции, если используется в контексте, где это возможно. Это делает const enum предпочтительным выбором для производительности, поскольку итоговый код становится меньше и быстрее.Основные различия:
1.
enum компилируется в объекты, сохраняя свои ключи и значения, что позволяет выполнять итерацию по enum или обратное преобразование из числа в строку. В отличие от этого, const enum после компиляции оставляет только конкретные значения, тем самым уменьшая размер кода.2. Так как
const enum полностью удаляются при компиляции, они не могут быть использованы для динамических операций, таких как обращение к значениям через ключи или итерация по членам перечисления в рантайме. enum же остается в коде и поддерживает такие операции.3.
const enum может улучшить производительность, поскольку исключает необходимость в создании и обращении к дополнительным объектам в рантайме. Это делает const enum идеальным выбором для высокопроизводительных приложений или там, где размер имеет значение.Что использовать?
- Используйте
enum, если вам нужен полный набор функций TypeScript и JavaScript, таких как обратное отображение (получение имени константы по ее значению) или динамическое обращение.- Используйте
const enum, если вы цените производительность и размер вашего кода. Они особенно полезны в больших проектах, где каждый килобайт на счету.Заключение
Выбор между
enum и const enum в TypeScript зависит от ваших целей: если важна производительность и размер кода, const enum - ваш выбор. Для более гибкого использования и возможности работы с перечислениями в рантайме подойдет enum.#typescript
👍15⚡4❤4🔥2👾1
Вы знаете о свойстве 😏
Что такое scroll-padding?
Пример использования
Представьте, что на вашем сайте есть статья с несколькими разделами и фиксированное меню навигации сверху. Вы хотите, чтобы при выборе раздела в меню страница прокручивалась к этому разделу, но при этом раздел не скрывался за меню.
Посмотреть пример реализации можно здесь - JsFiddle(тык).
Заключение
scroll-padding? Если нет, то этот пост будет для вас полезен. А если да, то просто поддержите реакцией Что такое scroll-padding?
scroll-padding устанавливает отступы внутри контейнера, которые применяются при прокрутке к определенному элементу по якорной ссылке. Это свойство гарантирует, что целевой элемент будет отображаться в пределах видимой области, не перекрываясь другими элементами.Пример использования
Представьте, что на вашем сайте есть статья с несколькими разделами и фиксированное меню навигации сверху. Вы хотите, чтобы при выборе раздела в меню страница прокручивалась к этому разделу, но при этом раздел не скрывался за меню.
Посмотреть пример реализации можно здесь - JsFiddle(тык).
Заключение
scroll-padding позволяет удобно настраивать поведение прокрутки, обеспечивая видимость контента даже при наличии фиксированных элементов на странице.Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤4🔥4👾1
Привет! В этом посте мы рассмотрим, что такое EventBus, как он работает и как вы можете использовать этот паттерн в своих проектах.
Что такое EventBus?
EventBus - это паттерн проектирования, который предоставляет канал для связи между различными компонентами приложения через события. Это означает, что вместо того чтобы вызывать методы одного компонента из другого напрямую, компоненты могут отправлять и принимать события.
Как работает EventBus?
Основная идея заключается в том, что у вас есть централизованный объект, который управляет подписками на события и их оповещениями. Компоненты могут подписываться на события, которые их интересуют, и когда другой компонент отправляет это событие через EventBus, все подписанные компоненты получают уведомление и могут соответствующим образом отреагировать.
Пример реализации в прикрепленном изображении.
Заключение
EventBus позволяет уменьшить связность между компонентами и упрощает обмен данными и состояниями. Использование EventBus может сделать ваш код более чистым, организованным и гибким, что важно для поддержки и масштабирования сложных приложений.
#patterns
Что такое EventBus?
EventBus - это паттерн проектирования, который предоставляет канал для связи между различными компонентами приложения через события. Это означает, что вместо того чтобы вызывать методы одного компонента из другого напрямую, компоненты могут отправлять и принимать события.
Как работает EventBus?
Основная идея заключается в том, что у вас есть централизованный объект, который управляет подписками на события и их оповещениями. Компоненты могут подписываться на события, которые их интересуют, и когда другой компонент отправляет это событие через EventBus, все подписанные компоненты получают уведомление и могут соответствующим образом отреагировать.
Пример реализации в прикрепленном изображении.
Заключение
EventBus позволяет уменьшить связность между компонентами и упрощает обмен данными и состояниями. Использование EventBus может сделать ваш код более чистым, организованным и гибким, что важно для поддержки и масштабирования сложных приложений.
#patterns
👍12🔥4👨💻2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Простой и интересный эффект "пульсации" на чистом CSS, который может использоваться для привлечения внимания к какому-либо действию, например, к подписке. Этот эффект создается с использованием анимаций CSS и
Посмотреть можно тут - JsFiddle(тык)
keyframes, делая кнопку более заметной и привлекательной для пользователя.Посмотреть можно тут - JsFiddle(тык)
🔥12👍7👾3❤1
Всем привет 👋 Сегодня мы узнаем о структуре данных, называемой стеком, который работает по принципу LIFO (Last In, First Out) - последний пришёл, первым ушёл. Это можно сравнить со стопкой тарелок: последнюю поставленную тарелку вы возьмёте первой.
Что такое стек?
Стек - это абстрактная структура данных, представляющая собой коллекцию элементов, с двумя основными операциями:
Почему стек важен?
Основное преимущество стека - простота и эффективность. Добавление и удаление элементов происходит за постоянное время O(1), что делает стек идеальной структурой данных для решения задач, требующих частого доступа к последним добавленным элементам.
Реализация
Заключение
Стек остаётся одной из самых мощных и в то же время простых структур данных. Его принцип работы прост и интуитивно понятен, а примеры использования варьируются от системных вызовов до выполнения алгоритмов
#javascript #datastructures
Что такое стек?
Стек - это абстрактная структура данных, представляющая собой коллекцию элементов, с двумя основными операциями:
push, которая добавляет элемент в конец стека, и pop, которая удаляет последний добавленный элемент. Элементы в стеке следуют принципу LIFO, где последний добавленный элемент будет первым извлеченным.Почему стек важен?
Основное преимущество стека - простота и эффективность. Добавление и удаление элементов происходит за постоянное время O(1), что делает стек идеальной структурой данных для решения задач, требующих частого доступа к последним добавленным элементам.
Реализация
class Stack {
constructor() {
this.items = {}; // Используем объект для хранения элементов
this.count = 0; // Счетчик для отслеживания размера стека
}
// Добавление элемента в стек
push(item) {
this.items[this.count] = item; // Добавляем элемент с индексом, равным текущему размеру стека
this.count++; // Увеличиваем размер стека
}
// Удаление элемента из стека
pop() {
if (this.isEmpty()) {
return undefined;
}
this.count--; // Уменьшаем размер стека
const result = this.items[this.count]; // Сохраняем верхний элемент стека
delete this.items[this.count]; // Удаляем верхний элемент из стека
return result; // Возвращаем удаленный элемент
}
// Проверка, пуст ли стек
isEmpty() {
return this.count === 0;
}
// Возврат верхнего элемента стека
peek() {
if (this.isEmpty()) {
return undefined;
}
return this.items[this.count - 1]; // Возвращаем верхний элемент стека без его удаления
}
// Размер стека
size() {
return this.count;
}
// Очистка стека
clear() {
this.items = {}; // Сбрасываем объект элементов
this.count = 0; // Сбрасываем счетчик размера стека
}
}
// Использование стека
const stack = new Stack();
stack.push('Первый');
stack.push('Второй');
console.log(stack.peek()); // 'Второй'
stack.pop();
console.log(stack.peek()); // 'Первый'
Заключение
Стек остаётся одной из самых мощных и в то же время простых структур данных. Его принцип работы прост и интуитивно понятен, а примеры использования варьируются от системных вызовов до выполнения алгоритмов
#javascript #datastructures
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤6🔥3👾2
Привет всем! Как всегда, начинаем наш понедельник с интересных задачек. Сегодня у нас - реализация кастомного метода
Для начала вспомним, как работает стандартный метод
Алгоритм решения:
1. Определить функцию-метод в прототипе
2. Убедиться, что переданный аргумент является функцией, чтобы обеспечить корректную работу метода.
3. Создать новый массив для хранения элементов, которые пройдут фильтрацию.
4. Итерировать по всем элементам исходного массива.
5. Для каждого элемента вызвать функцию-предикат и, в зависимости от её результата, добавить элемент в новый массив или пропустить его.
6. Вернуть результирующий массив после завершения итерации.
Решение:
Итог
Мы успешно расширили прототип
Встречали ли вы подобные задачи на собеседованиях?
#interview #javascript
filter. Эта задача не только проверит ваше понимание работы нативных методов и прототипов, но и общее логическое мышление.Для начала вспомним, как работает стандартный метод
filter. Он создаёт и возвращает новый массив, содержащий только те элементы исходного массива, для которых функция-предикат возвращает true. Наша задача - реализовать подобное поведение.Алгоритм решения:
1. Определить функцию-метод в прототипе
Array, делая его доступным для всех массивов.2. Убедиться, что переданный аргумент является функцией, чтобы обеспечить корректную работу метода.
3. Создать новый массив для хранения элементов, которые пройдут фильтрацию.
4. Итерировать по всем элементам исходного массива.
5. Для каждого элемента вызвать функцию-предикат и, в зависимости от её результата, добавить элемент в новый массив или пропустить его.
6. Вернуть результирующий массив после завершения итерации.
Решение:
// Добавляем метод customFilter к прототипу Array
Array.prototype.customFilter = function(predicate) {
// Проверка, является ли переданный аргумент функцией
if (typeof predicate !== 'function') {
throw new TypeError(`${typeof predicate} is not a function`);
}
// Инициализация нового массива для отфильтрованных элементов
const result = [];
// Итерация по элементам исходного массива
for (let i = 0; i < this.length; i++) {
// Добавление элемента в результирующий массив, если предикат возвращает true
if (predicate(this[i], i, this)) {
result.push(this[i]);
}
}
// Возврат нового массива с элементами, прошедшими фильтрацию
return result;
};
// Использование кастомного метода customFilter
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.customFilter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // Выведет: [2, 4]
Итог
Мы успешно расширили прототип
Array, добавив к нему наш кастомный метод customFilter. Это не только помогло нам глубже понять механизм работы нативного метода filter, но и показало, как можно расширять стандартные объекты для добавления новой функциональности.Встречали ли вы подобные задачи на собеседованиях?
#interview #javascript
👍27🤯5👾5❤3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Привет 👋
Завтра наступает один из самых теплых и романтических дней в году - День Святого Валентина! В этот день принято дарить своим любимым не только внимание и заботу, но и небольшие знаки внимания. В этом году я предлагаю вам не ограничиваться бумажными открытками. Я подготовил для вас демо валентинки, сделанной с использованием HTML, CSS.
Посмотреть можно тут - JsFiddle(тык)🫰
#javascript #html #css
Завтра наступает один из самых теплых и романтических дней в году - День Святого Валентина! В этот день принято дарить своим любимым не только внимание и заботу, но и небольшие знаки внимания. В этом году я предлагаю вам не ограничиваться бумажными открытками. Я подготовил для вас демо валентинки, сделанной с использованием HTML, CSS.
Посмотреть можно тут - JsFiddle(тык)
#javascript #html #css
Please open Telegram to view this post
VIEW IN TELEGRAM
❤14🦄6👍5⚡1
Всем привет! Сегодня речь пойдет об свойстве
overscroll-behavior имеет три возможных значения:
Пример использования:
Этот код предотвратит "отскок" страницы при достижении верхнего или нижнего края в браузерах, поддерживающих это свойство.
Посмотреть и поскроллить можно тут - JsFiddle(тык)
#css
overscroll-behavior. Это свойство позволяет контролировать поведение прокрутки за пределами документа или элемента, то есть когда пользователь достигает края страницы или элемента и продолжает прокручивать. Это особенно актуально в мобильных браузерах, где стандартное поведение может включать эффект "отскока", что не всегда желательно.overscroll-behavior имеет три возможных значения:
auto - стандартное поведение прокрутки, когда прокрутка может передаваться родительскому элементу.contain - предотвращает распространение прокрутки на родительский элемент, но сохраняет эффекты прокрутки.none - полностью предотвращает прокрутку за пределами элемента, включая эффекты.Пример использования:
body {
overscroll-behavior: none;
}
Этот код предотвратит "отскок" страницы при достижении верхнего или нижнего края в браузерах, поддерживающих это свойство.
Посмотреть и поскроллить можно тут - JsFiddle(тык)
#css
👍15👾5🔥3🤔2❤1
Привет! Сегодня мы разберем один из самых популярных и полезных паттернов проектирования в программировани - паттерн "фабрика".
Что такое фабрика?
Фабрика относится к категории порождающих паттернов проектирования. Суть паттерна заключается в том, чтобы делегировать создание объектов, тем самым избавляя код от прямой зависимости.
Как работает фабрика?
Фабрика предлагает создать отдельный компонент, задача которого - инкапсулировать логику создания объектов. Это значит, что вместо того, чтобы вручную создавать каждый объект с помощью оператора new, вы делегируете эту задачу фабрике, которая определит, какой объект создать, исходя из предоставленных ей данных.
Пример
Допустим, у нас есть приложение, где нужно создавать разные типы уведомлений:
Пример реализации в прикрепленном изображении.
Преимущества паттерна:
- Паттерн позволяет легко внести изменения в процесс создания объектов, не затрагивая код, который использует эти объекты.
- Добавление новых типов объектов не требует изменений в клиентском коде, достаточно расширить функциональность фабрики.
- Детали создания объектов скрыты от клиента, что упрощает использование и поддержку кода.
Заключение
Фабрика позволяет сделать код более модульным, гибким и легко масштабируемым. Ее использование особенно оправдано, когда в вашем приложении присутствует необходимость создавать различные объекты, следующие общему интерфейсу, но имеющие различную реализацию. Надеюсь, этот пост поможет вам понять и применить паттерн "Фабрика" в ваших проектах.
#javascript #patterns
Что такое фабрика?
Фабрика относится к категории порождающих паттернов проектирования. Суть паттерна заключается в том, чтобы делегировать создание объектов, тем самым избавляя код от прямой зависимости.
Как работает фабрика?
Фабрика предлагает создать отдельный компонент, задача которого - инкапсулировать логику создания объектов. Это значит, что вместо того, чтобы вручную создавать каждый объект с помощью оператора new, вы делегируете эту задачу фабрике, которая определит, какой объект создать, исходя из предоставленных ей данных.
Пример
Допустим, у нас есть приложение, где нужно создавать разные типы уведомлений:
error, info, и success. Вместо того, чтобы создавать каждый тип уведомления вручную, мы можем использовать фабрику для упрощения этого процесса.Пример реализации в прикрепленном изображении.
Преимущества паттерна:
- Паттерн позволяет легко внести изменения в процесс создания объектов, не затрагивая код, который использует эти объекты.
- Добавление новых типов объектов не требует изменений в клиентском коде, достаточно расширить функциональность фабрики.
- Детали создания объектов скрыты от клиента, что упрощает использование и поддержку кода.
Заключение
Фабрика позволяет сделать код более модульным, гибким и легко масштабируемым. Ее использование особенно оправдано, когда в вашем приложении присутствует необходимость создавать различные объекты, следующие общему интерфейсу, но имеющие различную реализацию. Надеюсь, этот пост поможет вам понять и применить паттерн "Фабрика" в ваших проектах.
#javascript #patterns
👍10🔥5👾3❤2
Привет, фронтендеры! 👋
На этой неделе канал достиг первой тысячи подписчиков🥳 ! Я не могу выразить всей своей радости от того, что каждый из вас нашёл что-то интересное для себя и подписался. Это по-настоящему мотивирует меня продолжать развивать этот канал.
Огромное спасибо за вашу активность! Ваши вопросы, комментарии и реакция делают этот канал живым. Я надеюсь, что будущие посты будут для вас интересными и полезными, а ваша активность будет и дальше мотивировать меня на создание новых постов)
Хочу напомнить, что под любым постом вы можете предложить тему для постов или предложить любые другие улучшения. Ваше мнение и ваши идеи крайне важны для меня, и я всегда открыт к вашим предложениям и идеям!😉
Спасибо вам за поддержку🤗
На этой неделе канал достиг первой тысячи подписчиков
Огромное спасибо за вашу активность! Ваши вопросы, комментарии и реакция делают этот канал живым. Я надеюсь, что будущие посты будут для вас интересными и полезными, а ваша активность будет и дальше мотивировать меня на создание новых постов)
Хочу напомнить, что под любым постом вы можете предложить тему для постов или предложить любые другие улучшения. Ваше мнение и ваши идеи крайне важны для меня, и я всегда открыт к вашим предложениям и идеям!
Спасибо вам за поддержку
Please open Telegram to view this post
VIEW IN TELEGRAM
❤34👍7 5🔥4
С понедельником 💻 ! Сегодня разберем классику собеседований – реализацию последовательности Фибоначчи.
Что такое последовательность Фибоначчи?
Последовательность Фибоначчи – это ряд чисел, где каждое последующее число является суммой двух предыдущих. Начинается с 0 и 1. То есть, первые числа последовательности выглядят так: 0, 1, 1, 2, 3, 5, 8, 13, 21, и так далее.
Задача
Необходимо реализовать функцию
Алгоритм решения:
1. Проверяем, является ли
2. Инициализируем переменные
3. Задаем цикл
4. В каждой итерации цикла вычисляем следующее число как сумму
5. Обновляем
6. Присваиваем только что вычисленное следующее число переменной
7. После завершения цикла возвращаем
Решение
На самом деле, у этой задачи есть разные варианты решения. Если у вас есть свой вариант решения, не стесняйтесь делиться им в комментариях!
#interview #javascript
Что такое последовательность Фибоначчи?
Последовательность Фибоначчи – это ряд чисел, где каждое последующее число является суммой двух предыдущих. Начинается с 0 и 1. То есть, первые числа последовательности выглядят так: 0, 1, 1, 2, 3, 5, 8, 13, 21, и так далее.
Задача
Необходимо реализовать функцию
fibonacci, которая принимает на вход число n и возвращает n-ое число последовательности Фибоначчи.Алгоритм решения:
1. Проверяем, является ли
n меньшим или равным 1. Если да, возвращаем n, так как первые два числа последовательности Фибоначчи — это 0 для n = 0 и 1 для n = 1.2. Инициализируем переменные
prev и cur значениями 0 и 1, соответственно, которые представляют первые два числа последовательности.3. Задаем цикл
for от 2 до n включительно для вычисления каждого следующего числа последовательности Фибоначчи.4. В каждой итерации цикла вычисляем следующее число как сумму
prev и cur.5. Обновляем
prev значением cur.6. Присваиваем только что вычисленное следующее число переменной
cur.7. После завершения цикла возвращаем
cur как n-ное число последовательности Фибоначчи.Решение
function fibonacci(n) {
if (n <= 1) return n;
let prev = 0;
let cur = 1;
for (let i = 2; i <= n; i++) {
const next = prev + cur;
prev = cur;
cur = next;
}
return cur;
}
На самом деле, у этой задачи есть разные варианты решения. Если у вас есть свой вариант решения, не стесняйтесь делиться им в комментариях!
#interview #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12👾3👨💻2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
В веб-разработке важен не только функционал, но и впечатление, которое оставляет сайт. Один из способов улучшить пользовательский опыт - добавить индикатор загрузки. В этом примере мы реализовали лоадер с использованием HTML и CSS, который отображает процесс загрузки с минимальным количеством стилей. Посмотреть код можно здесь - JsFiddle(тык)
#html #css
#html #css
👍9🔥5❤2👾2
Привет! Сегодня поговорим о не таком уж и часто упоминаемом методе -
Что такое Array.from?
Примеры использования
Второй аргумент функции
А вы знали, что есть еще и второй аргумент? Второй аргумент - это функция, которая вызывается для каждого элемента итерируемого объекта, позволяя не только создать массив, но и трансформировать его элементы. Он сокращает необходимость в дополнительных вызовах
Преимущества:
-
- Преобразует данные в массивы для последующего использования всех методов массива, таких как
- Помогает избежать мутаций. Создавая новый массив, мы не изменяем исходный объект.
Это был краткий разбор
#javascript
Array.from. Этот метод позволяет нам создавать новые массивы из различных объектов, которые можно преобразовать в массив.Что такое Array.from?
Array.from - это статический метод класса Array, который создает новый экземпляр массива из массивоподобного или итерируемого объекта. Другими словами, если у вас есть что-то, что выглядит как массив или ведет себя как массив (например, строка или объект NodeList, полученный с помощью методов DOM, таких как document.querySelectorAll), вы можете превратить это "что-то" в настоящий массив.Примеры использования
// Преобразование строки в массив
let str = "Привет!";
let strArray = Array.from(str);
console.log(strArray); // ["П", "р", "и", "в", "е", "т", "!"]
// Использование с объектами NodeList
let elements = document.querySelectorAll('div'); // представим, что у нас на странице есть div'ы
let elementsArray = Array.from(elements);
elementsArray.forEach(element => console.log(element)); // теперь с этим массивом можно работать как с обычным массивом
Второй аргумент функции
А вы знали, что есть еще и второй аргумент? Второй аргумент - это функция, которая вызывается для каждого элемента итерируемого объекта, позволяя не только создать массив, но и трансформировать его элементы. Он сокращает необходимость в дополнительных вызовах
map, делая код более читаемым и элегантным, а так же уменьшает количество проходов по массиву, что потенциально может повысить производительность вашего кода.const array = Array.from({length: 10}, (v, i) => i + 1);
console.log(array); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Преимущества:
-
Array.from работает с любыми итерируемыми объектами, давая нам гибкость в обработке данных.- Преобразует данные в массивы для последующего использования всех методов массива, таких как
map, filter, reduce и т.д.- Помогает избежать мутаций. Создавая новый массив, мы не изменяем исходный объект.
Это был краткий разбор
Array.from. Надеюсь, это поможет вам лучше понять, как и когда использовать этот метод.#javascript
👍17❤4🆒2👏1👨💻1
Всем привет! 👋
Сегодня узнаем как при помощи CSS превратить обычный текст в элегантный макет с колонками, как в газете. Мы разберемся, как использовать свойства
Про свойства
Свойство
Свойство
Посмотреть демо можно тут - JsFiddle(тык)
Заключение
Использование свойств
#css
Сегодня узнаем как при помощи CSS превратить обычный текст в элегантный макет с колонками, как в газете. Мы разберемся, как использовать свойства
columns и column-rule, чтобы организовать содержимое страницы более привлекательно и читабельно.Про свойства
Свойство
columns в CSS позволяет легко разделить текст на несколько колонок, делая чтение на длинных страницах более комфортным. Это свойство является шорткатом для column-width (ширина колонки) и column-count (количество колонок), позволяя задавать их одной строкой..columns {
columns: 2 200px; /* Ширина колонки 200px и количество колонок 2 */
column-gap: 40px; /* Устанавливаем промежуток между колонками */
}
Свойство
column-rule добавляет разделительную линию между колонками, что придает макету дополнительную изысканность и структуру. Оно работает подобно border, но применяется между колонками..columns {
column-rule: 2px solid #333; /* Добавляет разделительную линию между колонками */
}
Посмотреть демо можно тут - JsFiddle(тык)
Заключение
Использование свойств
columns и column-rule в CSS может значительно ускорить процесс создания адаптивных колонок.#css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤3🔥3👨💻1
Привет 🤝 ! Сегодня мы разберем функцию
Что за функция compose?
Это звучит сложно, но на деле все просто.
Пример реализации
В этом примере мы создали три простые функции:
Зачем использовать?
Использование
Заключение
#javascript
compose. Возможно вам не стоит тащить ее в свой проект, так как чаще всего проще использовать готовое решение из библиотек, но будет полезно знать как она работает.Что за функция compose?
compose - это функция высшего порядка, которая принимает на вход несколько функций и возвращает новую функцию. Эта новая функция, при вызове, запускает цепочку переданных функций так, что результат каждой функции передается как аргумент в следующую. Процесс начинается с крайней правой функции и продвигается к левой.Это звучит сложно, но на деле все просто.
Пример реализации
function compose(...funcs) {
return function(arg) {
return funcs.reduceRight((acc, fn) => fn(acc), arg);
};
}
// Пример использования
const multiplyBy2 = x => x * 2;
const add3 = x => x + 3;
const subtract4 = x => x - 4;
const doMagic = compose(multiplyBy2, add3, subtract4);
console.log(doMagic(5)); // Результат: 8
В этом примере мы создали три простые функции:
multiplyBy2, add3, subtract4. Затем мы использовали compose, чтобы создать новую функцию doMagic, которая применяет эти функции в обратном порядке: сначала вычитает 4, затем добавляет 3, и, наконец, умножает результат на 2.Зачем использовать?
Использование
compose позволяет нам строить сложные операции из простых функций, сохраняя при этом чистоту и читаемость кода. Это не только упрощает отладку и тестирование отдельных частей системы, но и способствует написанию декларативного кода, где мы описываем, что хотим сделать, а не как.Заключение
compose - это не просто функция, это философия построения кода, где композиция и простота лежат в основе решения сложных задач. Попробуйте применить compose в своих проектах и увидите, как это может изменить ваш подход к написанию кода.#javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥5👾2❤1🤯1
Вемс тепирв😄 ! Начнем неделю с разбора не самой сложной, но одной из самых популярных задач. Мы будем работать с анаграммами.
Что такое анаграммы?
Анаграммы - это слова или фразы, полученные путем перестановки букв исходного слова или фразы. Например, "привет" и "тепирв" являются анаграммами.
Задача:
Написать функцию, которая определяет, являются ли две строки анаграммами друг друга.
Алгоритм решения:
1. Сначала обе строки приводятся к нижнему регистру и из них удаляются все символы пробелы. Это делается для того, чтобы избежать различий из-за регистра или пробелов.
2. Для каждой нормализованной строки создается объект, где ключи - это символы строки, а значения - количество их вхождений в строку. Функция
3. Если длины нормализованных строк различаются, то они точно не могут быть анаграммами, и функция возвращает
4. Для каждого символа из первой строки проверяется, совпадает ли количество его вхождений в обеих строках, используя созданные карты подсчета символов. Если для любого символа количество вхождений не совпадает, строки не являются анаграммами, и функция возвращает
5. Если все предыдущие проверки пройдены успешно, строки являются анаграммами, тогда функция возвращает
Решение
Этот пример демонстрирует базовый подход к решению задачи об анаграммах. Мы нормализуем строки, удаляем не нужные символы, сравниваем их длины и подсчитываем количество каждого символа. Если все проверки прошли успешно, строки являются анаграммами.
А у вас есть идеи о том, как можно улучшить или изменить это решение? Или, может быть, у вас есть совершенно другой подход к решению? Делитесь своими мыслями и кодом в комментариях💻
#javascript #interview
Что такое анаграммы?
Анаграммы - это слова или фразы, полученные путем перестановки букв исходного слова или фразы. Например, "привет" и "тепирв" являются анаграммами.
Задача:
Написать функцию, которая определяет, являются ли две строки анаграммами друг друга.
Алгоритм решения:
1. Сначала обе строки приводятся к нижнему регистру и из них удаляются все символы пробелы. Это делается для того, чтобы избежать различий из-за регистра или пробелов.
2. Для каждой нормализованной строки создается объект, где ключи - это символы строки, а значения - количество их вхождений в строку. Функция
buildCharCountMap использует метод reduce для преобразования массива символов строки в объект подсчета символов.3. Если длины нормализованных строк различаются, то они точно не могут быть анаграммами, и функция возвращает
false.4. Для каждого символа из первой строки проверяется, совпадает ли количество его вхождений в обеих строках, используя созданные карты подсчета символов. Если для любого символа количество вхождений не совпадает, строки не являются анаграммами, и функция возвращает
false.5. Если все предыдущие проверки пройдены успешно, строки являются анаграммами, тогда функция возвращает
true.Решение
function isAnagram(str1, str2) {
const normalize = str => str.replace(/\s+/g, "").toLowerCase();
const buildCharCountMap = str => {
return str.split('').reduce((acc, char) => {
acc[char] = acc[char] + 1 || 1;
return acc;
}, {});
};
const normalizedStr1 = normalize(str1);
const normalizedStr2 = normalize(str2);
if (normalizedStr1.length !== normalizedStr2.length) {
return false;
}
const str1CharCount = buildCharCountMap(normalizedStr1);
const str2CharCount = buildCharCountMap(normalizedStr2);
for (let char in str1CharCount) {
if (str1CharCount[char] !== str2CharCount[char]) {
return false;
}
}
return true;
}
console.log(isAnagram("Привет", "тепирв")); // true
console.log(isAnagram("Привет", "Пока")); // false
Этот пример демонстрирует базовый подход к решению задачи об анаграммах. Мы нормализуем строки, удаляем не нужные символы, сравниваем их длины и подсчитываем количество каждого символа. Если все проверки прошли успешно, строки являются анаграммами.
А у вас есть идеи о том, как можно улучшить или изменить это решение? Или, может быть, у вас есть совершенно другой подход к решению? Делитесь своими мыслями и кодом в комментариях
#javascript #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥4🆒3❤2