https://www.tinkoff.ru/solutioncup/frontend/
Было какое-то помутнение рассудка и я почему то не заскринила условия задач 5-12. Поэтому вспоминала их по памяти и там могут быть ошибки в описании, в вариантах ответов или может не совпадать порядок вариантов. Задания, в которых предлагаются варианты ответов, нельзя прогнать через тесты. Результаты вопросов с вариантами ответов неизвестны.
[1] [2] [3] [4] [5] [6] [🤷♀️7]
Дано SVG-изображение размером 500 х 200. Требуется, чтобы в приложении отображалось изображение размером 60 х 25. Выберите правильный набор параметров SVG для масштабирования.
width="60" height="25" viewBox="0 0 500 200"✅width="60" height="25" viewBox="500 0 200 0"width="60" height="25" viewBox="500 200"width="500" height="200" viewBox="60 25 0 0"width="500" height="200" viewBox="60 0 25 0"width="500" height="200" viewBox="60 25"
У элемента заданы width и height, но если принять padding, то ширина и высота увеличиваются. Какое свойство помогает избежать этого?
box-sizing: content-box;box-sizing: border-box;✅box-sizing: initial;
Даны стили и верстка:
<style>
.wrapper {
height: 40px;
}
.wrapper div {
width: 70px;
height: 40px;
}
.z2 {
z-index: 2;
margin-bottom: -40px;
border-right: 20px solid white;
background: green;
}
.z1 {
z-index: 1;
margin-left: 70px;
border-left: 20px solid black;
background: red;
}
</style>
<div class="wrapper">
<div class="z2"></div>
<div class="z1"></div>
</div>Какой из этих вариантов будет отличаться внешне от других?
.z2 { position: static } .z1 { position: static }✅.z2 { position: relative } .z1 { position: static }.z2 { position: relative } .z1 { position: relative }.z2 { position: absolute } .z1 { position: relative }
Дана верстка:
<div class="container">
<div class="div2 left-section">2</div>
<div class="div3 left-section">3</div>
<div class="div4 right-section">4</div>
<div class="div1 right-section">1</div>
<div class="div5 right-section">5</div>
</div>Фрагмент стиля:
.container { width: 50em; }
.left-section { width: calc(100% - 10em); }
.right-section { width: 10em; }
.div1 { height: 7em; background-color: red; }
.div2 { height: 5em; background-color: orange; }
.div3 { height: 7em; background-color: yellow; }
.div4 { height: 5em; background-color: green; }
.div5 { height: 10em; background-color: aqua; }Какие из наборов стилей дают такое расположение?
-
.container { display: flex; flex-direction: column; flex-wrap: wrap; min-height: 12em; }
-
.div3:after { height: 10em; } .container { display: flex; flex-direction: column; flex-wrap: wrap; height: 22em; }
-
✅
.div3 { margin-bottom: 7em; } .container { display: flex; flex-direction: column; flex-wrap: wrap; height: 22em; }
-
.container { display: grid; grid-template-areas: "2 4" "3 1" ". 5"; } .div1 { grid-area: 1; } .div2 { grid-area: 2; } .div3 { grid-area: 3; } .div4 { grid-area: 4; } .div5 { grid-area: 5; }
Какие из вариантов ответов предотвратят перезагрузку страницы?
-
<form onsubmit="return false;" method="post"> <input type="text" /> <button type="submit">Отправить</button> </form>
-
form.addEventListener('submit', (e) => { e.preventDefault(); }) <form method="post"> <input type="text" /> <button type="submit">Отправить</button> </form>
-
form.addEventListener('submit', (e) => { e.stopReload() }) <form method="post"> <input type="text" /> <button type="submit">Отправить</button> </form>
Дан фрагмент кода:
<script async src="script1.js"></script>
<script defer src="script2.js"></script>script1 выполняется позже script2. Какой вариант кода позволит загрузить скрипты в правильном порядке?
-
<script async src="script1.js"></script> <script async src="script2.js"></script>
-
<script defer src="script1.js"></script> <script async src="script2.js"></script>
-
✅
<script defer src="script1.js"></script> <script defer src="script2.js"></script>
Что то с вариантами порядка рендера страницы
Дана функция которая получает результаты трёх лучших игроков:
function getTop3(score) {
return score.sort().reverse().slice(0, 3);
}
getTop3([1, 10, 5, 1, 12, 8])Найдите ошибку и исправьте её.
Решение:
function getTop3(score) {
return score.sort(function(a, b) {
return b - a;
}).slice(0, 3);
}Дана функция:
function replaceCurrencyNameWithSymbol(str, currencyName, currencySymbol) {
return str.replace(currencyName, currencySymbol);
}
replaceCurrencyNameWithSymbol('Приход: 10 руб., сумма: 100 руб.', 'руб.', '₽')Поймите что делает этот код и исправьте ошибку.
Решение:
function replaceCurrencyNameWithSymbol(str, currencyName, currencySymbol) {
return str.replaceAll(currencyName, currencySymbol);
}Дан фрагмент кода:
arr.map(getNumber).filter(isNotNull)
function getNumber(item: string): number | null {
return +item || null
}Напишите типизированную функцию isNotNull.
Решение:
function isNotNull(item: number | null) item is number {
return typeof item === 'number';
}Выберите, какие действия с объектом приведут к такому выводу в консоль:
const object = { name: 'Fred', surname: 'Mercury' };
// ???
console.log({...object}); // -> {surname: Mercury}-
Object.defineProperty(object, 'name', { enumerable: true }) -
Object.defineProperty(object, 'name', { enumerable: false }) -
delete object.name; -
object = {surname: 'Mercury'}
Допишите код так, чтобы в консоль выводилось true:
const object = {};
// TODO: здесь ваш код
console.log(object == '1');Решение:
Object.defineProperty(object, 'toString', {value: () => '1'})Допишите код так, чтобы в консоль выводилось true:
const object = Object.freeze({});
// TODO: здесь ваш код
console.log(object == '1');Решение:
a.__proto__.toString = () => '1'Реализуйте тип – неотрицательное число для работы в функции квадратного корня.
function sqrt<N extends number>(n: NonNegativeNumber<N>): number {
return Math.sqrt(n);
}Решение:
type NonNegativeNumber<N extends number> = number extends N ? N : `${N}` extends '-${string}' ? never : N;Напишите тип для массива, элементами которого могут быть строка или такой же массив (элементами которого могут быть строка или такой же массив и т.д.)
Например, тип должен позволять такое:
const myRecursiveArray = ['test', [], ['test2']];Решение:
type ValueOrArray<T> = T | ValueOrArray<T>[];
type RecursiveArray = ValueOrArray<string>;
Перед вами реализация данных – множества, в которой элементы можно добавлять только один раз. После удаления элемент нельзя добавить снова.
Подумайте, что здесь не так и исправьте ошибку.
class OnceSet extends Set {
added = new Set();
add(el) {
if (this.added.has(el)) {
return this;
}
this.added.add(el);
return super.add(el);
}
}Напишите функцию requestWithRetry, которая принимает функцию запроса и количество раз, которое этот запрос нужно повторять до успешного результата.
Retry должен вернуть промис с результатом или реджектом в случае, если все попытки провалились.
Пример использования:
const results = await requestWithRetry(someFunction, 5);Решение:
/**
* @param request () => Promise<T> функция запроса
* @param attempts number сколько раз пытаемся сделать запрос
* @return Promise<T> с результатом или реджектом
*/
async function requestWithRetry(request, attempts = 1) {
const requestCount = 1;
return new Promise(function(resolve, reject) {
while (requestCount <= attempts) {
try {
const result = request()
resolve(result);
break;
} catch(err) {
if (requestCount < attempts) {
requestCount++;
} else {
reject(err);
break;
}
}
}
})
}
Напишите функцию, которая принимает функцию запроса и максимальное время его ожидания. Возвращает промис с результатом запроса или реджектом в случае, если ответ не получен за назначенное время.
Решение:
/**
* @param request () => Promise<T>
* @param timeout number время ожидания
* @return Promise<T> с результатом или реджектом
*/
async function requestWithTimeout(request, timeout) {
return new Promise(function(resolve, reject) {
const timer = setTimeout(() => {
reject()
}, timeout);
try {
const result = request()
resolve(result);
clearTimeout(timer);
} catch(err) {
reject(err)
}
})
}Реализуйте функцию excludePaths, принимающую объект и список путей, которые надо исключить и возвращающую новый объект без этих путей. Например:
const alice = {
name: 'Alice',
age: 20,
track: {
title: 'Frontend',
score: 100,
}
}
const newObj = excludePaths(alice, ['age', 'track.score']);
console.log(newObj); // -> { name: 'Alice', 'track': {title: 'Frontend'} }Решение:
function excludePaths(obj, paths) {
// реализуйте эту функцию
}От коллег вам достался код, возвращающий N-ю страницу рейтинга участников.
Вам показалось, что код избыточный. Перепишите его более лаконично, не меняя функциональность:
// page 1-based
function getParticipants(arr, track, size, page) {
const arr2 = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i].track === track) {
arr2.push(arr[i]);
}
}
for (let i = 0; i < arr2.lentgh; i++) {
for (let j = i + 1; j < arr2.legth; j++) {
if (arr2[i].name > arr2[j].name) {
const temp = arr2[i];
arr2[i] = arr2[j];
arr2[j] = temp;
}
}
}
const arr3 = [];
const first = size * (page - 1);
for (let i = 0; i < arr2.length; i++) {
if (first <= i && i < first + size) {
arr3.push(arr2[i]);
}
}
return arr3;
}Напишите типизированную функцию getMax, которая принимает на вход массив элементов и функцию сравнения, а возвращает самый большой элемент массива согласно функции сравнения.
Если на вход передан пустой массив, то функция должна возвращать undefined.
Решение:
function getMax(arr, comparator) {
// реализуйте эту функцию и добавьте типизацию
}Вам надо загрузить огромный файл на сервер. Напишите функцию, которая сделает это чанками в несколько потоков. Не меняйте интерфейсы, которые даны в задании.
type Options = {
maxChunks: number;
chunkSize: number;
}
interface Source {
readonly size: number;
read(start: number, end: number): Blob;
}
type SendCb = (data: Blob, offset: number) => Promise<void>;
export async function upload(file: Source, send: SendCb, options: Options): Promise<unknown> {
}Решение:
type Options = {
maxChunks: number;
chunkSize: number;
}
interface Source {
readonly size: number;
read(start: number, end: number): Blob;
}
type SendCb = (data: Blob, offset: number) => Promise<void>;
export async function upload(file: Source, send: SendCb, options: Options): Promise<unknown> {
...
}Напишите декоратор, который логирует переданные в метод аргументы, вернувшееся значение и время исполнения функции в заданном формате.
Пример использования:
class SomeService {
@Logger
requestSomeData(id: number, provider: string): SomeData {
// возвращает {name: 'Alice'}
return loadData(id, provider);
}
}
const service = new SomeService();
const result = service.requestSomeData(1, 'test provider');В консоли появляется:
SomeService.requestSomeData: 0.033ms
arguments: [1, "test-provider"]
result: {"name": "Alice"}
Решение:
// TODO: реализуйте декоратор
function Logger() {
...
}