Фронтенд Гайд

Как работают map, reduce и filter ? Спросят с вероятностью 7% map, reduce и filter — это методы массивов, которые позволяют обрабатывать и трансформировать массивы функциональным способом. Метод map Создает новый массив, в котором каждый элемент является результатом вызова предоставленной функции на каждом элементе исходного массива. Как он работает ✅Итерирует по каждому элементу массива. ✅Применяет к каждому элементу функцию. ✅Возвращает новый массив с результатами вызова функции для каждого элемента.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

В этом примере функция умножает каждый элемент массива numbers на 2, и результат сохраняется в новом массиве doubled. Метод reduce Применяется к массиву и сводит его к одному значению. Функция принимает аккумулятор и текущий элемент, производит операцию и возвращает новый аккумулятор. Как он работает ✅Итерирует по каждому элементу массива. ✅Применяет к каждому элементу функцию, которая обновляет аккумулятор. ✅Возвращает единственное значение — аккумулятор.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

Здесь reduce суммирует все элементы массива, начиная с аккумулятора, равного 0. Метод filter Создает новый массив, содержащий все элементы исходного массива, для которых функция-условие возвращает true. Как он работает ✅Итерирует по каждому элементу массива. ✅Применяет к каждому элементу функцию-условие. ✅Возвращает новый массив с элементами, прошедшими условие.

const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

В этом примере filter создает новый массив, содержащий только четные числа из массива numbers. ✅map: создает новый массив, преобразуя каждый элемент по заданной функции. ✅reduce: сводит массив к одному значению, применяя функцию к каждому элементу. ✅filter: создает новый массив, содержащий только элементы, которые соответствуют условию.

🖥 Бесплатный фоновый ремувер заднего фона, работающий в вашем браузере на базе WebGPU (с использованием transformer.js)

Кубик крутится - страница грузится 🤪 Прелоадер с простым эффектом вращения куба, выполненный без JS. p.s. буквы на сторонах куба можно менять на свои.

Успей ухватить 7 дней бесплатного обучения фронтенд-разработке! 🔥 С нас обучение, практика и помощь с выходом на фриланс. Скоро Роман Чернов, веб-разработчик с 10-летним стажем, проведёт онлайн-интенсив с практикой и обратной связью. На эти 7 дней план такой: - Сверстаешь веб-сайт на HTML + CSS; - Реализуешь функционал на JavaScript; - Используешь фронтенд-фреймворк Angular; - Подключишь Backend и загрузишь сайт на хостинг; - Получишь советы по доработке своего проекта. В итоге ты разработаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов. 👉 Забрать бесплатно 7 дней обучения frontend-разработке А тем, кто ещё только думает переходить в IT, дадим пошаговый план как стать успешным frontend-разработчиком с нуля.

🖥 Интересная идея для прелоадера страницы на чистом CSS Фигурки тетриса бесконечно складываются в правильном порядке — выглядит довольно оригинально Может неплохо сказаться на конверсии

⚡️ Анимация Пикачу в коробке Анимированный пикачу в коробке отрисован и анимирован с помощью чисто CSS. Отдельные элементы графики сделаны с помощью DIV’ов и затем стилизованы. Чтобы запустить анимацию нужно нажать на верх коробки и потянуть курсов в сторону. Попробуйте сами. Там же вы найдёте код проекта: