Frontend Советы

Уникализация значений в массиве

Задача — написать функцию, принимающую в аргументах массив целых чисел и возвращающую новый массив, состоящий только из уникальных значений первого массива. Эту задачу можно решить в одну строчку. Пример:

unique([1, 1, 2, 2, 2, 1, 3, 7, 3]); // => [1, 2, 3, 7]

Решение — на картинке. В нем используются практически все возможности метода filter — необязательные аргументы index и self. Первый является индексом текущего элемента, а self — это сам обрабатываемый массив.

👉 @frontend_sovet

Форматирование JSON-кода

Вы, вполне вероятно, хорошо знакомы с методом JSON.stringify(). А знаете о том, что с помощью этого метода можно форматировать JSON-код? Это, на самом деле, очень просто.

Метод stringify() принимает три параметра. Это параметры value, replace и space. Два последних параметра в этом списке являются необязательными. Именно поэтому их вы, возможно, раньше не использовали. Для настройки выравнивания JSON-кода необходимо использовать параметр space.

@frontend_sovet

Spread

Spread — это специальный оператор в JavaScript, позволяющий расширять выражения в тех местах, где предусмотрено использование нескольких аргументов.

Объясним подробнее: в примере на картинке функция Math.max() не может принять массив arr, т. к. эта функция в принципе не принимает массивы. Оператор spread (три точки — ...) здесь нужен для того, чтобы передать в функцию массив в виде нескольких отдельных значений.

@frontend_sovet

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

В своей второй книге IT-архитектор, методолог, педагог Александр Бындю раскрывает наиболее эффективный на сегодняшний день метод стратегического планирования, получивший название «Карта гипотез». Карта учит, как достигать намеченной цели через гипотезы, и служит навигатором на этом пути. В основу книги легли годы практики, и с уверенностью можно сказать, что Карта гипотез позволяет создать стратегию достижения для самых амбициозных целей.

У Карты гипотез нет ограничений по области применения или роли пользователя — она будет полезна в самых разных ситуациях, от личного планирования до планирования работы огромной компании. Автор надеется, что его метод, которому посвящена эта книга, послужит вашему благополучию во всех сферах жизни.

Ознакомиться с книгой

Идентичный алфавит

Напишите функцию, принимающую две строки и возвращающую true в случае если строки состоят из одинаковых букв (порядок не важен). Иначе верните false.

isEqualSymbols('кит', 'тик'); // => true
isEqualSymbols('мда', 'да я'); // => false

Решение на картинке. Для ускорения мы сразу отбрасываем вариант, когда строки не равны по длине, далее делаем из строк массивы и сортируем по символам, затем склеиваем обратно и проверяем готовые строки на равенство.

@frontend_sovet

Короткие вычисления в одну цепочку

Тернарный оператор предоставляет простой и быстрый способ выполнения простых – а иногда и не очень простых – условных вычислений.

@frontend_sovet

Напишите код, который при клике на любой div внутри root будет выводить в консоль его id. HTML выглядит следующим образом:


root
id11

id22
id33



Ответ на картинке. Мы навешиваем обработчик на тег root, останавливаем пропагацию, чтобы при клике не вызывать событие у всех элементов, и далее выводим требуемый атрибут.

@frontend_sovet

В чем разница между методами call и apply?

Отличие между call и apply состоит в том, как мы передаем аргументы в вызываемой функции. В apply аргументы передаются в виде массива, в call — через запятую.

@frontend_sovet

Генераторы

Особые функции, работу которых можно приостановить с помощью ключевых слов yield и возобновить позже. Это позволяет использовать совершенно новые концепции JavaScript-программирования.

@frontend_sovet

Генерация пароля с помощью JavaScript

С помощью следующего фрагмента кода мы генерируем пароль, который состоит из 8 символов, которые содержат в себе прописные и строчные буквы, а также, цифры от 0 до 9.

@frontend_sovet

Что такое цикл событий (event loop) и как он работает?

Движок браузера выполняет JavaScript в одном потоке. Для потока выделяется область памяти — стэк, где хранятся фреймы (аргументы, локальные переменные) вызываемых функций.

Список событий, подлежащих обработке, формирует очередь событий. Когда стек освобождается, движок может обрабатывать событие из очереди. Координирование этого процесса и происходит в event loop.

Это, по сути, бесконечный цикл, в котором выполняются многочисленные обработчики событий. Если очередь пустая  — движок браузера ждет, когда поступит событие. Если непустая — первое в ней событие извлекается и его обработчик начинает выполняться. И так до бесконечности.

@frontend_sovet

Тестовое задание - делать или не делать, вот в чем вопрос? Айгуль Билык, HR-директор цифровой лаборатории Hopper IT, рассказала о том, зачем вообще нужны тестовые задания в IT и стоит ли их выполнять.
❓ Тестовое задание — это логичный способ увидеть кандидата в деле. Так рекрутер может оценить уровень профессиональных навыков будущего сотрудника, узнать больше о его типе мышления и кругозоре, проверить его мотивацию.
❗ Для кандидата такое задание, чаще всего, тоже оказывается полезным. Он может познакомиться с будущими обязанностями и лучше понять, какую работу ему предстоит выполнять на рабочем месте.
🗓 В Hopper IT ценят время кандидатов, поэтому обычно предлагают выполнить тестовое задание на финальном этапе собеседования, когда и мы и кандидат уже понимаем, что друг другу, в целом, подходим, но остаются какие-то сомнения.
⏳ Выполнение идеального тестового задания занимает не больше 1-2 часов или меньше —рекрутеру важно не выполнить конкретную работу, а просто посмотреть, как думает и что умеет кандидат.
⛔ Лучше отказаться от тестового задания если оно слишком объемное, требует серьезных временных затрат или задание не релевантно вакансии, на которую вы собеседуетесь.
Было полезно? Оставляйте реакции 🔥 И откликайтесь на вакансии Hopper IT: https://vk.cc/cmH3yi

splice, slice

Данные методы позволяют изменить и вернуть подмассив элементов массива. Разберём подробнее:

splice изменяет массив, у которого вызван, удаляя либо заменяя существующий элемент, и/или добавляя новый. Код на картинке объясняется так: в позиции 1 массива удалить 0 элементов и вставить b.

slice возвращает подмассив (новый массив, содержащий копию части исходного массива) начиная и заканчивая на определённой позиции. Когда конечная позиция не указана, вернётся остаток массива. Важно знать, что этот метод не изменяет массив (как splice), а только возвращает подмассив.

@frontend_sovet

Хочу поделиться интересным игровым симулятором! Самолет вместе с агентством Ар запустили бот «Твой день» — там можно примерить на себе роль разработчика или продакт менеджера, поучаствовать в созвонах и получить интересные задачки.

Хотите попробовать? Тогда переходите в @arrr_day_bot, выбирайте понравившийся проект от Самолета, и вот вы уже в первом рабочем дне, получаете задачи от коллег! В конце вас ждут актуальные вакансии, если понравится и захочется задержаться.

Успейте опробовать симулятор до 18 ноября!

Реклама. Рекламодатель

Форматирование JSON

Скорее всего, вы неоднократно использовали метод JSON.stringify(). А знаете ли вы, что он может самостоятельно форматировать ваш JSON-код?

stringify() может принимать два необязательных параметра (кроме первого – собственно объекта для сериализации):

✔️ replacer – функция для преобразования значений и свойств или массив тех свойств, которые должны войти в сериализованный объект.
✔️ space – число, определяющее количество пробелов перед каждым уровнем вложенности, или строка, которая будет вставлена перед каждым уровнем, например, "\t".

@frontend_sovet

Замена всех подстрок

Метод String.replace() позволяет заменять подстроки при помощи регулярных выражений, но по умолчанию заменяется лишь первое вхождение подстроки. Тем не менее, вы можете исправить это, добавив /g в конец «регулярки».

@frontend_sovet

Как добавить в строку пробелы или другие символы?

padStart добавляет в начало строки символы, пока она не достигнет длины, заданной первым параметром. Вторым параметром можно указать любой символ. padEnd работает аналогично, добавляя символы в конец.

@frontend_sovet