Skip to content

Latest commit

 

History

History
650 lines (475 loc) · 20.1 KB

README.md

File metadata and controls

650 lines (475 loc) · 20.1 KB
Raw

image

IT's Tinkoff Cup 2023 Frontend

https://www.tinkoff.ru/solutioncup/frontend/

Было какое-то помутнение рассудка и я почему то не заскринила условия задач 5-12. Поэтому вспоминала их по памяти и там могут быть ошибки в описании, в вариантах ответов или может не совпадать порядок вариантов. Задания, в которых предлагаются варианты ответов, нельзя прогнать через тесты. Результаты вопросов с вариантами ответов неизвестны.

Ответы и решения от Тинькофф

[1] [2] [3] [4] [5] [6] [🤷‍♀️7]

[10] [11] [12] [13] [14] [15]

[16] [17] [18] [19] [20] [21]

[22] [23] [24] [25]

1

Дано SVG-изображение размером 500 х 200. Требуется, чтобы в приложении отображалось изображение размером 60 х 25. Выберите правильный набор параметров SVG для масштабирования.

  1. width="60" height="25" viewBox="0 0 500 200" ✅
  2. width="60" height="25" viewBox="500 0 200 0"
  3. width="60" height="25" viewBox="500 200"
  4. width="500" height="200" viewBox="60 25 0 0"
  5. width="500" height="200" viewBox="60 0 25 0"
  6. width="500" height="200" viewBox="60 25"

2

У элемента заданы width и height, но если принять padding, то ширина и высота увеличиваются. Какое свойство помогает избежать этого?

  1. box-sizing: content-box;
  2. box-sizing: border-box; ✅
  3. box-sizing: initial;

3

Даны стили и верстка:

<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>

Какой из этих вариантов будет отличаться внешне от других?

  1. .z2 { position: static } .z1 { position: static } ✅
  2. .z2 { position: relative } .z1 { position: static }
  3. .z2 { position: relative } .z1 { position: relative }
  4. .z2 { position: absolute } .z1 { position: relative }

4

Дана верстка:

<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; }

Какие из наборов стилей дают такое расположение?

flex

  1. .container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 12em;
}
  2. .div3:after {
  height: 10em;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 22em;
}

  3. ✅

    .div3 {
  margin-bottom: 7em;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 22em;
}
  4. .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; }

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>

6

Дан фрагмент кода:

<script async src="script1.js"></script>
<script defer src="script2.js"></script>

script1 выполняется позже script2. Какой вариант кода позволит загрузить скрипты в правильном порядке?

  1.   <script async src="script1.js"></script>
  <script async src="script2.js"></script>
  2.   <script defer src="script1.js"></script>
  <script async src="script2.js"></script>

  3. ✅

      <script defer src="script1.js"></script>
  <script defer src="script2.js"></script>

7

Что то с вариантами порядка рендера страницы

10

Дана функция которая получает результаты трёх лучших игроков:

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);
}

11

Дана функция:

function replaceCurrencyNameWithSymbol(str, currencyName, currencySymbol) {
  return str.replace(currencyName, currencySymbol);
}

replaceCurrencyNameWithSymbol('Приход: 10 руб., сумма: 100 руб.', 'руб.', '₽')

Поймите что делает этот код и исправьте ошибку.

Решение:

function replaceCurrencyNameWithSymbol(str, currencyName, currencySymbol) {
  return str.replaceAll(currencyName, currencySymbol);
}

12

Дан фрагмент кода:

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';
}

13

Выберите, какие действия с объектом приведут к такому выводу в консоль:

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'}

14

Допишите код так, чтобы в консоль выводилось true:

const object = {};
// TODO: здесь ваш код
console.log(object == '1');

Решение:

Object.defineProperty(object, 'toString', {value: () => '1'})

15

Допишите код так, чтобы в консоль выводилось true:

const object = Object.freeze({});
// TODO: здесь ваш код
console.log(object == '1');

Решение:

a.__proto__.toString = () => '1'

16

Реализуйте тип – неотрицательное число для работы в функции квадратного корня.

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;

17

Напишите тип для массива, элементами которого могут быть строка или такой же массив (элементами которого могут быть строка или такой же массив и т.д.)

Например, тип должен позволять такое:

const myRecursiveArray = ['test', [], ['test2']];

Решение:

type ValueOrArray<T> = T | ValueOrArray<T>[];
type RecursiveArray = ValueOrArray<string>;

18

Перед вами реализация данных – множества, в которой элементы можно добавлять только один раз. После удаления элемент нельзя добавить снова.

Подумайте, что здесь не так и исправьте ошибку.

class OnceSet extends Set {
  added = new Set();
  
  add(el) {
    if (this.added.has(el)) {
      return this;
    }
    
    this.added.add(el);
    return super.add(el);
  }
}

19

Напишите функцию 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;
	}
      }
    }
  })
}

20

Напишите функцию, которая принимает функцию запроса и максимальное время его ожидания. Возвращает промис с результатом запроса или реджектом в случае, если ответ не получен за назначенное время.

Решение:

/**
 * @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)
    }
  })
}

21

Реализуйте функцию 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) {
  // реализуйте эту функцию
}

22

От коллег вам достался код, возвращающий 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;
}

23

Напишите типизированную функцию getMax, которая принимает на вход массив элементов и функцию сравнения, а возвращает самый большой элемент массива согласно функции сравнения.

Если на вход передан пустой массив, то функция должна возвращать undefined.

Решение:

function getMax(arr, comparator) {
  // реализуйте эту функцию и добавьте типизацию
}

24

Вам надо загрузить огромный файл на сервер. Напишите функцию, которая сделает это чанками в несколько потоков. Не меняйте интерфейсы, которые даны в задании.

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> {
  ...
}

25

Напишите декоратор, который логирует переданные в метод аргументы, вернувшееся значение и время исполнения функции в заданном формате.

Пример использования:

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() {
  ...
}