Взято с asmoth.me
Разбор интересных задач на вакансию
Наткнулся на просторах Пикабу на пост об открытии вакансии frontend разработчика в команду Пикабу собственно. Ну и решил ради интереса поучаствовать.
Далее будет разбор задач, для тех кто хочет попробовать свои силы сам можно перейти по следующим ссылкам на источник.
Пост: https://pikabu.ru/story/myi_ishchem_frontendrazrabotchika_6878895
Сами задачи: https://pikabu.ru/page/interview/jobseeker/?t=frontend
Введение
Нас встречает класс JobSeeker в котором нужно заменить пропуски (серый текст) нужными переменными, операторами, классами и тд тп. Всего в испытании присутствует 9 задач. Чтобы решение засчиталось нужно заменить пропуски корректными значениями, чтобы все проверки прошли успешно.
Assert 1/9
Не мудрствуя лукаво и не поддаваясь страху перед непонятным оператором “+++” здесь вместо someName вставляем valueOf, “+++” всего лишь написанные операторы “++” и “+”. При сравнении обе части выражения приводятся к примитивам и для этого используется метод класса valueOf.
При первом вызове valueOf переменная a = 0, а во время выполнения первая часть возвращает a = 0, а вторая уже a = 1, и возвращается значение 1. При следующем вызове складываются a = 1 и a = 2 и возвращается 3. При третьем вызове возвращается уже 5.
Assert 2/9
Здесь тоже все просто. При первом вызове метода calc аргумент запоминается в массиве, дальше идет объявление переменной fn, в которой если тип аргумента равен функции, то из переменной массива args вызывается метод reduce с передачей туда функции-аргумента. В противном случае мы вызываем из переменной массива метод push с аргументом и возвращается функция в ответ. Таким образом у нас накапливаются значения в массиве, а при передаче функции весь массив обрабатывается функцией-сумматором.
Assert 3/9
В данном случае у меня не сразу получилось и пришлось немного поломать голову. В проверке у нас парсятся данные из строки, при этом эти данные имеют тип объект, должны иметь проперти \u{0030} (значение 0), первое итерируемое проперти должны быть типа объект и приведение нулевого проперти к булеву значению должно быть равно false.
Пробовал разные варианты, сначала это был объект {“0”: {“a”:1}} в котором в нулевом ключе лежало значение объект. Дальше были попытки объявления нескольких ключей, определение минимального ключа. В итоге вспомнилось что typeof массива имеет значение object, так же значение object имеет null. Подставив массив с единственным нулевым значением все проверки сошлись.
Assert 4/9
Если вы разбираетесь в регулярных выражениях то вам не составит труда подставить нужные данные в шаблон. Далее уже нужно вытащить данные из шаблона, для этого понадобится использовать Web Components. Переменная repo это должно быть customElements, т.к. в self у нас находится объект window. Заменяем в Promise строку на “my-name,my-age,loc-city,prof-skills”, далее во время маппинга регистрируем компоненты методом define и возращаем в resolve массив ключ-значение. В конце апгрейдим (метод upgrade) документ и возвращаем на выходе из функции new Map(). Теперь у нас в результате метода getSeekerInfo получается Promise, который возвращает Map откуда мы можем вытаскивать нужные нам значения из шаблона.
Assert 5/9
Здесь у нас метод генератор который должен вернуть массив в котором все числа станут остатками от деления на 256. Если использовать оператор yield то мы “приостанавливаем” выполнение функции-генератора до запроса следующего значения. Но так же есть оператор yield* который может принимать функцию-генератор или итерируемый объект который можно разложить на составляющие. Далее нам нужно заменить класс на что-то итерируемое. Существует несколько встроенных в язык итерируемых объектов: String, Array, TypedArray, Map и Set. TypedArray имеет несколько разновидностей среди которых нам интересен Uint8Array, массив в котором все значения типа Byte (от 0 до 255). У него есть особенность, если в него добавить число значение которого большее 255, то оно просто будет остатком от деления этого числа на 256.
Assert 6/9
Суть задачи — откорректировать html код и получить из него текст чтобы он был равен значению “0123456789”. Первый селектор сделаем “:scope > div:first-child”, будем выбирать из текущего (:scope) элемента первый div и удалим его. Второй селектор сделаем “div:nth-child(1) > div > span”, выберем элемент и поменяем его местами со следующим от него элементом (элементы содержащие 4и 3). Далее при выборе из дерева последнего элемента b, который содержит 8, получим его дочерний элемент который содержит только текст и добавим к нему 1 чтобы значение стало 9. В конце берется родительский элемент и через проперти innerText извлекаются все текстовые данные без самих элементов, убираются лишние невидимые символы и возвращается результатом.
Assert 7/9
В чем тут может быть сакральный смысл?) Здесь нужно просто подставить “[Symbol.hasInstance]”, т.к. этот метод используется внутри проверки на соответствие классу.
Assert 8/9
Здесь даже немного посмеяться над нами решили, потому что заменили бы наш background-color: rgba() на неправильное значение)) Но мы то с вами знаем что в браузере возможно не только rgba значение, но и hsl/hsla как один из возможных вариантов. Воспользовавшись конвертером конвертируем rgba(17, 34, 51, 0) в hsla(210, 50%, 13.3%, 0). Ну а дальше просто указываем ширину width: 200px, но ограничиваем max-width: 100px. Делаем левую границу 5px и box-sizing: border-box и трансформом двигаем элемент на 25 пикселей. И все тесты проходят. Шах и мат!))
Assert 9/9
Выглядит страшно на первый взгляд, больше кода чем в предыдущих испытаниях, но на деле не намного сложней. Для начала нужно создать canvas элемент. Далее в вертексном шейдере добавить переменную gl_Position. В фрагментном шейдере обозначить тип переменной uniform. Далее получаем позицию аттрибута aVertices. И рисуем массивы через метод drawArrays. Читаем полученные точки в которые мы “нарисовали” наши данные из программы шейдера. Найдя нужную точку делаем бинарный сдвиг на 2, т.е. делим число на 4 и получаем нужные нам значения.
Заключение
Задачи не особо сложные, вполне себе даже вероятно их можно нагуглить, но стоит сказать что сделать добротно и интересно
Будет интересно почитать так же про Google Foo.Bar Challenge
