Тренажёр по JavaScript

Источник: giphy.com

В этом тренажере вы найдете дополнительные задания для закрепления основных навыков написания кода на JavaScript, необходимых для придания интерактивности веб-страницам.

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

Обратите внимание! Задания в этом тренажере не оцениваются. Учебный тренажер в первую очередь даёт вам возможность попрактиковаться, а не тестирует вас.

Задание 1

Напишите программу, которая спрашивает у пользователя его имя и фамилию с помощью prompt и отвечает: Привет, {имя} {фамилия}! с помощью alert.

Ответ:

name = prompt('Введите ваше имя'); lastName = prompt('Введите вашу фамилию'); fullName = name + ' ' + lastName; alert('Привет, ' + fullName + '!');

Задание 2

Напишите программу, которая переводит температуру по Цельсию в температуру по Фаренгейту. Она должна спросить у пользователя количество градусов по Цельсию с помощью prompt и ответить: {X} градусов по Цельсию равны {Y} градусам по Фаренгейту.

Формулы перевода шкал температур

Ответ:

celsius = prompt('Введите количество градусов по Цельсию') fahrenheit = celsius * 9 / 5 + 32; alert(celsius + ' градусов по Цельсию равны ' + fahrenheit + ' градусам по Фаренгейту')

Задание 3

Перепишите данную математическую формулу, используя JavaScript. Программа должна запрашивать с помощью prompt значение X и выдавать соответсвующее значение Y в качестве ответа. Обратите внимание на приоритет операций (важно правильно расставить скобки).

В качестве проверки: при X = 10 программа должна вывести Y = 12.5344.

Ответ:

x = prompt('Введите X'); y = (4 * x ** 2 + 18 - 23 * x) / (5 / 9 * x + 18 * ((x ** 3 / 33) * x) ) + x * (15 / 12); alert('Y = ' + y);

Задание 4

Оператор typeof в JavaScript возвращает строку с типом данных переданного в него значения. Эта строка начинается с маленькой буквы. Например: typeof 123 вернёт строку 'number', а typeof undefined вернёт строку 'undefined'.

Все возможные значения typeof: 'undefined', 'object', 'boolean', 'number', 'bigint', 'string', 'symbol', 'function'.

ВНИМАНИЕ! Из-за особенностей JavaScript typeof null вернёт 'object'. Запомните это и учтите при выполнении задания.

Найдите в коде строки 'SOME' и напишите вместо них нужное название типа — так, чтобы при запуске кода alert написал 'true'.

Исходный код:

a = 12; b = 'number'; c = false; d = null; e = undefined; f = 123.34; g = '1' + 1; h = 15 / 0; i = -'5'; j = 5 == '5' at = typeof a === 'number'; // true bt = typeof b === 'SOME'; // false, а нужно чтобы все были true ct = typeof c === 'SOME'; dt = typeof d === 'SOME'; et = typeof e === 'SOME'; ft = typeof f === 'SOME'; gt = typeof g === 'SOME'; ht = typeof h === 'SOME'; it = typeof i === 'SOME'; jt = typeof j === 'SOME'; alert(at && bt && ct && dt && et && ft && gt && ht && it && jt);

Ответ:

a = 12; b = 'number'; c = false; d = null; e = undefined; f = 123.34; g = '1' + 1; h = 15 / 0; i = -'5'; j = '5' == 5; at = typeof a === 'number'; bt = typeof b === 'string'; ct = typeof c === 'boolean'; dt = typeof d === 'object'; et = typeof e === 'undefined'; ft = typeof f === 'number'; gt = typeof g === 'string'; ht = typeof h === 'number'; it = typeof i === 'number'; jt = typeof j === 'boolean'; alert(at && bt && ct && dt && et && ft && gt && ht && it && jt);

Задание 5

                                
Поменяйте код так, чтобы каждая переменная была объявлена до того, как ей присвоено значение. Пользуйтесь правилом: везде, где возможно, в первую очередь используйте const, если нельзя const, то let. И никогда не используйте var.
                            

Исходный код:

NDS = 0.20 NDFL = 0.13 EXCISE = 0.1 RENT = 40000 FOOD = 15000 OTHER = 15000 MY_SALARY = 120000 ndflTax = MY_SALARY * NDFL; mySalaryNet = MY_SALARY - ndflTax; otherTaxes = mySalaryNet * (NDS + EXCISE); totalAvailable = mySalaryNet - otherTaxes; totalAvailable -= FOOD + OTHER + RENT alert('Зарплата ' + MY_SALARY + ' рублей') alert('Уплачено налогов на сумму ' + (ndflTax + otherTaxes) + ' рублей') alert('Осталось ' + totalAvailable + ' рублей')

Ответ:

const NDS = 0.20 const NDFL = 0.13 const EXCISE = 0.1 const RENT = 40000 const FOOD = 15000 const OTHER = 15000 const MY_SALARY = 120000 const ndflTax = MY_SALARY * NDFL; const mySalaryNet = MY_SALARY - ndflTax; const otherTaxes = mySalaryNet * (NDS + EXCISE); let totalAvailable = mySalaryNet - otherTaxes; totalAvailable -= FOOD + OTHER + RENT alert('Зарплата ' + MY_SALARY + ' рублей') alert('Уплачено налогов на сумму ' + (ndflTax + otherTaxes) + ' рублей') alert('Осталось ' + totalAvailable + ' рублей')

Задание 1

                            
Напишите программу, которая запрашивает у пользователя три числа: Катет A, Катет B, и Гипотенуза C. Программа проверяет по теореме Пифагора эти стороны треугольника и пишет в консоль "Это прямоугольный треугольник!" или "Это не прямоугольный треугольник!". Используйте if/else для проверки условия.
                        

Ответ:

const a = prompt('Введите катет А') const b = prompt('Введите катет B') const c = prompt('Введите гипотенузу C') if (a ** 2 + b ** 2 === c ** 2) { alert('Это прямоугольный треугольник!') } else { alert('Это не прямоугольный треугольник!') }

Задание 2

                            
Напишите программу, которая запрашивает у пользователя три числа и выводит максимальное из них, используйте if/else/else if. Попытайтесь не использовать &&.
                        

Ответ:

const a = prompt('Введите A') const b = prompt('Введите B') const c = prompt('Введите C') if (a > b) { if (a > c) { alert(a) } else { alert(c) } } else if (b > c) { alert(b) } else { alert(c) }

Задание 3

                            
Напишите программу, которая запрашивает у пользователя число N и отвечает "Число {N} четное!" или "Число {N} нечетное!"
                        

Например: 3 → Число 3 нечетное!

Ответ:

const n = prompt('Введите N') if (n % 2 === 0) { alert('Число ' + n + ' четное!') } else { alert('Число ' + n + ' нечетное!') }

Задание 1

                            
Напишите программу, которая выводит в консоль сначала нечетные числа от 0 до 5, а потом четные числа от 5 до 10.
                        

Ответ:

for (let i = 1; i <= 11; i += 2) { if (i > 5) { console.log(i - 1); } else { console.log(i) } }

Задание 2

                            
Напишите программу, которая много раз запрашивает у пользователя число, пока он не введет 0 — тогда выводится сумма этих чисел.
                        

Ответ:

let sum = 0; let a; do { a = prompt('Введите число для суммирования. 0 - остановить'); sum += +a; } while (a != 0); alert(sum);

Задание 3

                            
Напишите программу, которая говорит пользователю "Введите 10", пока он не введёт 10. Затем говорит "Введите 20", потом 40 и т.д. Если пользователь вводит другое число, нужно спросить его ещё раз, пока он не введёт нужное. Когда пользователь введёт больше 100, напишите "Спасибо!" и остановите программу.
                        

Ответ:

let neededNumber = 10; let currentNumber; do { while(currentNumber != neededNumber) { currentNumber = prompt('Введите число ' + neededNumber); } neededNumber *= 2; } while (currentNumber < 100); alert('Спасибо!')

Задание 1

                            
Напишите функцию countDown(n), которая получает число {n} в качестве аргумента и печатает в консоль обратный отсчет, начиная с этого числа. Например, countDown(3) напечатает: 3 2 1.
                        

Ответ:

function countDown(n) { for (let i = n; i >= 1; --i) { console.log(i); } } countDown(3);

Задание 2

                            
Напишите функцию getPercents(percent, number), которая возвращает {percent} процентов от {number}.
                        

Пояснение: например, getPercents(30, 200) должно вернуть 60.

Ответ:

function getPercents(percent, number) { return number / 100 * percent; } alert( getPercents(30, 200) );

Задание 3

                            
Напишите функцию repeatWord(word, count), которая принимает слово и количество раз для его повторения. Например, если вызвать repeatWord('слово', 3) функция напечатает "слово1, слово2, слово3" на одной строке.
                        

Ответ:

function repeatWord(word, count) { let words = ''; for (let i = 1; i <= count; ++i) { words += word + i + ', '; } alert(words); } repeatWord('слово', 3)

Задание 4

                            
Напишите функцию createAdder(a), которая возвращает функцию addA, которая принимает b и возвращает a + b.
                        

Исходный код:

// Функции должны принимать аргументы. function createAdder() { return function addA() { return 5; } } const add5 = createAdder(5); alert( add5(5) ) // Должно получиться 10 alert( add5(12) ) // Должно получиться 17

Ответ:

// Функции должны принимать аргументы. function createAdder(a) { return function addA(b) { return a + b; } } const add5 = createAdder(5); alert( add5(5) ) // Должно получиться 10 alert( add5(12) ) // Должно получиться 17

Задание 5

                            
Напишите функцию getMonth(n), которая принимает номер месяца и возвращает его название. Например, getMonth(12) ⇒ 'декабрь'. Используйте if/else.
                        

Ответ:

function getMonth(n) { if (n === 1) return 'январь'; if (n === 2) return 'февраль'; if (n === 3) return 'март'; if (n === 4) return 'апрель'; if (n === 5) return 'май'; if (n === 6) return 'июнь'; if (n === 7) return 'июль'; if (n === 8) return 'август'; if (n === 9) return 'сентябрь'; if (n === 10) return 'октябрь'; if (n === 11) return 'ноябрь'; if (n === 12) return 'декабрь'; return 'неизвестно'; } alert( getMonth(3) )

Задание 1

                            
Напишите функцию sayHello(name, surname, age, greeting), которая принимает в качестве аргументов имя, фамилию, возраст и приветствие. Каждый аргумент должен иметь дефолтное значение, функция должна быть стрелочной и не иметь ключевого слова return.
                        

Например, при вызове sayHello('Дима') функция должна вернуть строку: "Привет, Дима Иванов, тебе 10 лет", а при вызове sayHello('Евгений', 'Петров', 25, 'Здравствуйте, ') функция должна вернуть строку: "Здравствуйте, Евгений Петров, тебе 25 лет". А при вызове без аргументов она должна вернуть: "Привет, Иван Иванов, тебе 10 лет".

Исходный код:

const sayHello = () => 'Привет, Иван Иванов, тебе 10 лет' alert( sayHello() ); alert( sayHello('Дима') ); alert( sayHello('Евгений', 'Петров', 25, 'Здравствуйте, ') );

Ответ:

const sayHello = ( name = 'Иван', surname = 'Иванов', age = 10, greeting = 'Привет, ', ) => (greeting + name + ' ' + surname + ', тебе ' + age + ' лет.') alert( sayHello() ); alert( sayHello('Дима') ); alert( sayHello('Евгений', 'Петров', 25, 'Здравствуйте, ') );

Задание 2

                            
Это задание повторяет предыдущее, но для его решения необходимо использовать шаблонные строки.
                        

Исходный код:

const sayHello = ( name = 'Иван', surname = 'Иванов', age = 10, greeting = 'Привет, ', ) => ( greeting + name + ' ' + surname + ', тебе ' + age + ' лет.' ) alert( sayHello() ); alert( sayHello('Дима') ); alert( sayHello('Евгений', 'Петров', 25, 'Здравствуйте, ') );

Ответ:

const sayHello = ( name = 'Иван', surname = 'Иванов', age = 10, greeting = 'Привет, ', ) => ( `${greeting}${name} ${surname}, тебе ${age} лет.` ); alert( sayHello() ); alert( sayHello('Дима') ); alert( sayHello('Евгений', 'Петров', 25, 'Здравствуйте, ') );

Задание 1

                            
Напишите функцию match, которая принимает 2 строки и возвращает true, если эти строки равны без учета регистра. Например, match('hEllO', 'HELLo') должен вернуть true.
                        

Ответ:

const match = (str1, str2) => { return str1.toLowerCase() == str2.toLowerCase(); } alert( match('hEllO', 'hellO') )

Задание 2

                            
На сайте Reddit ссылки на разделы (сабреддиты) формируются следующим образом: https://reddit.com/r/название_раздела/. Напишите функцию, которая принимает ссылку на раздел и возвращает название раздела.
                        

Ответ:

const getSubredditName = (link) => { const rIndex = link.indexOf('/r/'); const nameStartIndex = rIndex + 3; return link.slice(nameStartIndex, -1); } alert( getSubredditName('https://reddit.com/r/dankmemes/') )

Задание 3

                            
Напишите функцию reverseAndNegate(arr), которая принимает массив чисел и возвращает перевернутый отрицательный массив.
                        

Например: [1, -2, 5, 4] ⇒ [-4, -5, 2, -1].

Ответ:

const reverseAndNegate = (arr) => { return arr.reverse().map(value => -value); } alert( reverseAndNegate([1, -2, 5, 4]) );

Задание 4

                            
Напишите функцию, которая принимает массив чисел и сначала к каждому чётному числу прибавляет 4, у каждого нечётного отнимает 2, потом убирает из массива числа, делящиеся на 13 без остатка и возвращает сумму оставшихся чисел.
                        

В качестве проверки: calculate([15, 2, 3, 5, 6]) должна вернуть 20.

Ответ:

const calculate = (arr) => { return arr .map(v => v % 2 === 0 ? v + 4 : v - 2) .filter(v => !(v % 13 === 0)) .reduce((a, b) => a + b, 0) } alert(calculate([15, 2, 3, 5, 6]))

Задание 5

                            
Напишите функцию transformUpvotes(arr), которая принимает массив сокращенных записей количества лайков ['10k', '2.3k', '5k', '32', '28.4k'] и возвращает массив чисел [10000, 2300, 5000, 32, 28400].
                        

Ответ:

const transformUpvote = strVal => { const hasK = strVal.toLowerCase().includes('k'); if (hasK) { const numPart = strVal.slice(0, -1); return numPart * 1000; } return Number(strVal); } const transformUpvotes = arr => arr.map(transformUpvote); alert( transformUpvotes(['10k', '2.3k', '5k', '32', '28.4k']) )

Задание 1

                            
Напишите функцию getInfo(persons), которая принимает массив объектов, описывающих человека, имеющих поля {name, age}, и возвращает объект со средним возрастом и именем самого старшего человека.
                        

Ответ:

const getInfo = persons => { const ages = persons.map(person => person.age); // формируем новый массив возрастов const averageAge = ages.reduce((a, b) => a + b, 0) / ages.length; // узнаём средний возраст const maxAge = Math.max(...ages); // узнаем максимальное число в массиве возрастов const oldestPerson = persons.find(person => person.age === maxAge); return {averageAge, oldestPerson: oldestPerson.name} } let mass = [{name: 'Kaya', age: 10,}, {name: 'Vitya', age: 20,},{name: 'Kolya', age: 30,}]; console.log(getInfo(mass));

Задание 2

                            
Напишите функцию, которая принимает массив массивов вида [['ключ1', 'значение1'], ['ключ2', 'значение2']] и возвращает объект вида: {ключ1: 'значение1', ключ2: 'значение2'}.
                        

Ответ:

const fromEntries = entries => { const obj = {}; entries.forEach(entry => { obj[entry[0]] = entry[1]; }) return obj; } console.log( fromEntries([ ['key2', 3], ['key1', 'hello'], ]) )

Задание 3

                            
Напишите функцию countChars(str), которая принимает строку и возвращает количество букв в этой строке.
                        

Например: countChars('Арарат') должен вернуть: { а: 3, р: 2, т: 1 }.

Ответ:

const countChars = str => { const chars = {}; str.split('').forEach(char => { const lowerChar = char.toLowerCase(); if (chars[lowerChar] === undefined) { chars[lowerChar] = 0; } ++chars[lowerChar]; }) return chars; } console.log( countChars('Арарат') )

Задание 1

                            
Перепишите функцию так, чтобы она писала 'Hello, {name}' в консоль только при первых трёх вызовах, начиная с 4-го ничего не делала. Используйте замыкания.
                        

Исходный код:

const sayHello = name => { console.log(`Hello, ${name}`); } sayHello('Andrew') sayHello('Andrew') sayHello('Andrew') sayHello('Andrew') sayHello('Andrew') sayHello('Andrew') sayHello('Andrew')

Ответ:

const sayHello = (() => { let countCalls = 0; return name => { if (countCalls >= 3) return; console.log(`Hello, ${name}`); ++countCalls; } })(); sayHello('Andrew') sayHello('Andrew') sayHello('Andrew') sayHello('Andrew') sayHello('Andrew') sayHello('Andrew') sayHello('Andrew')

Задание 2

                            
Переменная, объявленная с помощью var, всплывает и видна на уровне функции, даже если объявлена внутри цикла for. Перепишите программу так, чтобы она печатала от 1 до 10 в консоль. Используйте замыкания.
                        

Исходный код:

for (var i = 0; i < 10; ++i) { setTimeout(() => console.log(i), 0); }

Ответ:

for (var i = 0; i < 10; ++i) { ((i) => { setTimeout(() => console.log(i), 0); })(i) }

Задание 1

                            
Напишите функцию countEverySecond(n), которая каждую секунду печатает в консоль цифру, начиная с 1 и заканчивая {n}.
                        

Ответ:

const countEverySecond = n => { let count = 0; const interval = setInterval(() => { console.log(++count); if (count === n) { clearInterval(interval); } }, 1000); }; countEverySecond(5);

Задание 2

                            
Напишите функцию countEverySecond(n), которая каждую секунду печатает в консоль цифру, начиная с 1 и заканчивая {n}.
                            
Пояснение к заданию: Если в предыдущем задании вы использовали setInterval, перепишите эту функцию с помощью setTimeout  (или наоборот).
                        

Ответ:

const countEverySecond = n => { let count = 0; setTimeout(function go() { console.log(++count) if (count < n) { setTimeout(go, 1000); } }, 1000); }; countEverySecond(5);

Задание 1

                            
Напишите функцию random(min, max), которая принимает минимальное и максимальное значение и возвращает целое случайное число n, такое, что: min ≤ n ≤ max. Эта функция понадобится нам для следующих заданий.
                            
Используйте Math.random(), умножение и сложение.
                        

Исходный код:

const random = (min, max) => { return 5; }; alert( random(0, 1) )

Ответ:

const random = (min, max) => { const rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); }; alert( random(0, 1) )

Задание 2

                            
Сверстайте 5 параграфов с текстом. С помощью JS меняйте цвет фона каждого параграфа на случайный каждую секунду. Создайте массив с названиями цветов ['blue', 'cyan', ...] и с помощью функции из предыдущего задания выбирайте случайный цвет из массива.
                        

Исходный код:

const random = (min, max) => { const rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); };

Ответ:

const random = (min, max) => { const rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); }; const colors = ['red', 'green', 'blue', 'yellow', 'cyan', 'purple']; const getRandomColor = () => { return colors[random(0, colors.length - 1)] }; const paragraphs = document.querySelectorAll('p'); setInterval(() => { paragraphs.forEach(p => { p.style.backgroundColor = getRandomColor(); }) }, 1000);

Задание 3

                            
Напишите функцию, которая принимает HTML в виде строки и возвращает HTML без элементов div (и всего, что внутри), все остальные элементы сохраняются. Используйте createElement, querySelectorAll и innerHTML.
                        

Исходный код:

const removeDivs = html => { return html; } const html = '<div></div>Hello<div><div><p>Hello world</p></div></div> <b>World!</b>'; alert( removeDivs(html)); alert( removeDivs(html) === 'Hello <b>World!</b>'); // Должно быть true

Ответ:

const removeDivs = html => { const root = document.createElement('span'); root.innerHTML = html; const divs = root.querySelectorAll('div'); divs.forEach(div => { div.parentNode.removeChild(div); }) return root.innerHTML; } const html = '<div></div>Hello<div><div><p>Hello world</p></div></div> <b>World!</b>'; alert( removeDivs(html)); alert( removeDivs(html) === 'Hello <b>World!</b>'); // Должно быть true

Задание 1

                            
Создайте кнопку, которая при клике создает другую кнопку, которая, в свою очередь, создаёт другую кнопку, и т.д.
                            
Пояснение: Используйте HTML, JS и CSS.
                        

Ответ:

HTML: <div class="buttons"> <button type="button">Клонировать!</button> </div> CSS: button { padding: 5px 10px; margin-bottom: 5px; } .buttons { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } JS: const createNewButton = (text) => { const newButton = document.createElement('button'); newButton.innerHTML = text; newButton.type = 'button'; newButton.addEventListener('click', () => createNewButton(text)); const container = document.querySelector('.buttons'); container.appendChild(newButton); }; const [button] = document.getElementsByTagName('button'); button.addEventListener('click', () => createNewButton('Клонировать!'));

Задание 2

                            
Создайте раскрывающийся блок (accordion). Сверху блок с заголовком, при нажатии на который снизу показывается блок с текстом, при повторном нажатии блок с текстом скрывается.
                        

Исходный код:

• HTML
• CSS
• JS

Ответ:

const initAccordion = element => { const panel = element.querySelector('.panel'); const header = element.querySelector('.header'); header.addEventListener('click', () => { panel.classList.toggle('panel--opened'); }); } const accordions = document.querySelectorAll('.accordion'); accordions.forEach(initAccordion);

Задание 3

							
Напишите игру: в центре экрана появляется кнопка «Нажми меня». Когда юзер наводит на неё курсор, она сразу же перемещается на случайные координаты.
						

Исходный код:

• HTML
• CSS
• JS

Ответ:

const random = (min, max) => { const rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); }; const button = document.querySelector('button'); button.addEventListener('mouseenter', () => { button.style.left = `${random(10, 90)}%`; button.style.top = `${random(5, 95)}%`; })

Задание 4

                            
Выведите на экран надпись «Ширина экрана {width} пикселей» и обновляйте её при изменении ширины экрана.
                        

Исходный код:

• HTML
• CSS

Ответ:

const button = document.querySelector('button'); const updateWidthLabel = () => { const currentWidth = window.innerWidth; button.innerHTML = `Ширина экрана ${currentWidth} пикселей` } updateWidthLabel(); window.addEventListener('resize', updateWidthLabel);

Задание 1

                            
Создайте иерархию классов животных, используйте ES5 (прототипы и функции-конструкторы). Создайте класс  «Существо» с методом born() — родиться, от него наследуется «Животное», от которого наследуются «Человек», «Птица», «Рыба». От человека наследуется «Китаец». Придумайте для каждого класса методы и поля.
                        

Ответ:

function Thing(name) { this.name = name; } Thing.prototype.born = function() { console.log(`${this.name} родился`); } function Animal(name, maxAge) { Thing.call(this, name); this.maxAge = maxAge; } Animal.prototype = Object.create(Thing.prototype); Animal.prototype.constructor = Animal; function Bird(name, maxAge) { Animal.call(this, name, maxAge); } Bird.prototype = Object.create(Animal.prototype); Bird.prototype.constructor = Bird; Bird.prototype.fly = function(distance) { console.log(`Птица по имени ${this.name} пролетает ${distance} метров!`) } function Fish(name, maxAge, isSeaFish) { Animal.call(this, name, maxAge); this.isSeaFish = isSeaFish; } Fish.prototype = Object.create(Animal.prototype); Fish.prototype.constructor = Fish; Fish.prototype.swim = function(distance) { console.log(`Рыба по имени ${this.name} проплывает ${distance} метров!`) } function Human(name, maxAge, height) { Animal.call(this, name, maxAge); this.height = height; this.inventions = []; } Human.prototype = Object.create(Animal.prototype); Human.prototype.constructor = Human; Human.prototype.invent = function(item) { this.inventions.push(item); console.log(`Я, ${this.name}, изобрел ${item.name}`); } function Chinese(name, maxAge, height) { Human.call(this, name, maxAge, height); } Chinese.prototype = Object.create(Human.prototype); Chinese.prototype.constructor = Chinese; Chinese.prototype.buildWall = function() { console.log(`Я, ${this.name}, помогаю строить Великую Китайскую Стену!`) } const ying = new Chinese('Ying', 72, 167); ying.born(); ying.invent({ name: 'Кирка' } ); ying.buildWall(); console.log(ying instanceof Thing) // Должно быть true console.log(ying instanceof Animal) // Должно быть true console.log(ying instanceof Human) // Должно быть true console.log(ying instanceof Chinese) // Должно быть true console.log(ying instanceof Fish) // Должно быть false console.log(ying instanceof Bird) // Должно быть false

Задание 2

                            
Перепишите иерархию из предыдущего задания, используя ES6-классы (extends, super).
                        

Ответ:

class Thing { constructor(name) { this.name = name; } born() { console.log(`${this.name} родился`); } } class Animal extends Thing { constructor(name, maxAge) { super(name); this.maxAge = maxAge; } } class Bird extends Animal { fly(distance) { console.log(`Птица по имени ${this.name} пролетает ${distance} метров!`) } } class Fish extends Animal { swim(distance) { console.log(`Рыба по имени ${this.name} проплывает ${distance} метров!`) } } class Human extends Animal { constructor(name, maxAge, height) { super(name, maxAge); this.height = height; this.inventions = []; } invent(item) { this.inventions.push(item); console.log(`Я, ${this.name}, изобрел ${item.name}`); } } class Chinese extends Human { buildWall() { console.log(`Я, ${this.name}, помогаю строить Великую Китайскую Стену!`) } } const ying = new Chinese('Ying', 72, 167); ying.born(); ying.invent({ name: 'Кирка' } ); ying.buildWall(); console.log(ying instanceof Thing) // Должно быть true console.log(ying instanceof Animal) // Должно быть true console.log(ying instanceof Human) // Должно быть true console.log(ying instanceof Chinese) // Должно быть true console.log(ying instanceof Fish) // Должно быть false console.log(ying instanceof Bird) // Должно быть false

Задание 1

                            
Напишите функцию multiply(a, b), которая умножает a на b с помощью сложения и рекурсии.
                        

Ответ:

const multiply = function mult(a, b) { if (a === 0 || b ===0) { return 0 } if (b < 0) { return -1 * mult(a, -1 * b); } if (b === 1) { return a; } else { return a + mult(a, b - 1) } } console.log( multiply(3, 5), multiply(-3, 5), multiply(3, -5), multiply(-3, -5), )

Задание 2

                            
Напишите функцию pow(a, b), которая возводит a в степень b с помощью умножения и рекурсии.
                        

Ответ:

const pow = function power(a, b) { if (a === 0) { return 0 } if (b === 0) { return 1; } if (b < 0) { return 1 / power(a, -1 * b); } if (b === 1) { return a; } else { return a * power(a, b - 1) } } console.log( pow(2, 2), pow(-2, 2), pow(2, -2), pow(-2, -2), )

Задание 3

                            
Числа Фибоначчи — последовательность чисел, в которой первые два числа равны 1 и 1, а каждое последующее число равно сумме двух предыдущих чисел.
                        

Напишите функцию fib(n), которая возвращает n-ое число Фибонначи.

Ответ:

const fib = function fibonacci(n) { if (n <= 2) return 1; return fibonacci(n - 2) + fibonacci(n - 1); } console.log( fib(3), fib(5), fib(10), fib(12), )

Задание 4

                            
Напишите функцию len(str), которая принимает строку и рекурсивно считает её длину. Свойство str.length использовать нельзя.
                        

Ответ:

const len = function length(str, n = 0) { if (str === '') return n; return length(str.slice(1), n + 1); } console.log( len('hello'), len(''), len('111111111111'), )

Задание 5

                            
Переверните строку с помощью рекурсии.
                        

Ответ:

const reverse = function rev(str) { if (str === '') return str; const lastIdx = str.length -1; return str[lastIdx] + rev( str.slice(0, lastIdx) ) } console.log( reverse('hello'), reverse(''), reverse('1234567890'), )

Задание 6

                            
Факториал числа n (n!) — это произведение натуральных чисел от 1 до n. Напишите функцию fac(n).
                        

Ответ:

const fac = function factorial(n) { if (n <= 1) { return n; } return n * factorial(n - 1); } console.log( fac(3), fac(1), fac(5), fac(10), )

Задание 1

                            
Напишите функцию containsDigit(str), которая возвращает true, если {str} содержит хотя бы одну цифру. Используйте регулярные выражения.
                        

Исходный код:

const containsDigit = (str) => { ... } alert(containsDigit('sdlfjsdlfj')) alert(containsDigit('adlkfja;lkdfjg3'))

Ответ:

const containsDigit = (str) => { return Boolean(str.match(/\d/)); } alert(containsDigit('sdlfjsdlfj')) alert(containsDigit('adlkfja;lkdfjg3'))

Задание 2

                            
Напишите регулярное выражение, которое валидирует только четные числа. Создайте функцию isEven(n), принимающую Number {n} и возвращающую true, если n — четное.
                        

Ответ:

const isEven = (n) => { const nStr = String(n); return Boolean( nStr.match(/-?\d*[24680]$/) ); } console.log( isEven(0), isEven(1), isEven(2), isEven(-13), isEven(-14), isEven(13), isEven(14), )

Задание 3

                            
Напишите функцию validatePhoneNumber(str), которая возвращает true, если str — это номер телефона в формате +7 (987) 654-32-10 или +7 (4212) 53-53-53.
                        

Ответ:

const validatePhoneNumber = (str) => { const mobile = /^\+\d \(\d{3}\) \d{3}-\d{2}-\d{2}$/.source; const home = /^\+\d \(\d{4}\) (\d{2}-){2}\d{2}$/.source; const phoneRegexp = new RegExp(`(${mobile})|(${home})`, 'g'); return Boolean( str.match(phoneRegexp) ); } console.log( validatePhoneNumber('+7 (987) 654-32-10'), validatePhoneNumber('+7 (4212) 53-53-53'), validatePhoneNumber(' +7 (4212) 53-53-53'), validatePhoneNumber('+7 (4212) 53-53-53 '), validatePhoneNumber('+7(4212) 53-53-53'), validatePhoneNumber('+7(4212) 523'), )

Задание 4

                            
Для подключения к базе данных используется адрес типа jdbc:mysql://sdasdasdasd:szdasdasd:dfsdfsdfsdf/sdfsdfsdf?user=root&password=12345. Напишите функцию, которая принимает этот адрес в виде строки и возвращает ту же строку, но со звёздочками вместо пароля. Пароль находится после password=.
                        

Ответ:

const hideDBPassword = jdbcAddr => { const passRegex = /password=(\S+)/g; const passMatch = passRegex.exec(jdbcAddr); if (!passMatch) { return jdbcAddr; } const pass = passMatch[1]; const stars = Array.from({ length: pass.length }).fill('*').join(''); const censuredAddr = jdbcAddr.replace(pass, stars); return censuredAddr; } console.log( hideDBPassword('jdbc:mysql://sdasdasdasd:szdasdasd:dfsdfsdfsdf/sdfsdfsdf?user=root&password=12345') );

Задание 5

                            
Напишите функцию, принимающую строку и заменяющую все гласные на их индекс в строке.
                            
Например: "Здравствуйте ребята" ⇒ "Здр3вств8йт11 р14б16т18!"
                        

Ответ:

const replaceVowels = str => { const vowelRegexp = /[уеыаоэёяию]/gi const chars = str.split(''); const vowels = chars.reduce((vowels, char, idx) => { if (char.match(vowelRegexp)) { vowels.push({ char, idx }); } return vowels; }, []) let newStr = str; vowels.forEach(({ char, idx }) => { newStr = newStr.replace(char, idx); }) return newStr; } console.log( replaceVowels('Здравствуйте Ребята!') );

Задание 1

                            
Напишите функцию serverMock(latency, cb), которая принимает необходимую задержку и callback.
                            
Callback должен принимать массив products, содержащий объекты товаров. Каждый товар содержит поля price (случайное число от 300 до 10000) и name (случайное наименование из массива наименований).
                            
Функция через {latency} миллисекунд вызывает cb со случайно сгенерированным массивом товаров длиной от 5 до 10.
                            
Используйте функцию random(min, max), написанную ранее.
                        

Ответ:

const random = (min, max) => { const rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); }; const productNames = [ 'Орехи', 'Морковь', 'Спаржа', 'Печенье', 'Наушники', 'Молоко', 'Сок', 'Контейнер', 'JS-разработчик', 'Прямые руки', 'Водка', ]; const getRandomProductName = () => { return productNames[random(0, productNames.length - 1)]; }; const getRandomPrice = () => random(300, 10000); const serverMock = (latency, cb) => { const products = Array.from({ length: random(5, 10) }) .map(() => ({ name: getRandomProductName(), price: getRandomPrice(), })); setTimeout(() => { cb(products); }, latency) }; serverMock(3000, (products) => { console.log(products); });

Задание 2

                            
Используя функцию из предыдущего задания, создайте три «сервера».
                            

                                
Первый принимает {номер продукта} и возвращает продукт, у которого есть поле {номер стеллажа на складе}.
                                
Второй сервер принимает {номер стеллажа на складе} и {номер продукта} и возвращает {номер коробки}.
                                
Третий сервер принимает {номер коробки} и возвращает вес продукта.
                            
                            
Напишите функцию, которая принимает номер продукта, последовательно обращается к этим «серверам» и возвращает вес коробки, в которой этот продукт находится. Каждый сервер должен иметь 400мс {latency}.
                        

Ответ:

const LATENCY = 400; const getProduct = (productIdx, cb) => { const productsById = { 0: { name: 'Орехи', rackId: 1 }, 1: { name: 'Морковь', rackId: 1 }, 2: { name: 'Спаржа', rackId: 1 }, 3: { name: 'Печенье', rackId: 2 }, 4: { name: 'Наушники', rackId: 2 }, 5: { name: 'Молоко', rackId: 2 }, 6: { name: 'Сок', rackId: 1 }, 7: { name: 'Контейнер', rackId: 1 }, 8: { name: 'JS-разработчик', rackId: 1 }, 9: { name: 'Прямые руки', rackId: 2 }, 10: { name: 'Водка', rackId: 2 }, }; setTimeout(cb, LATENCY, productsById[productIdx]); }; const getBoxIdx = (rackId, productIdx, cb) => { const rackIdToBoxes = { // rackId: boxes: { boxId0: productId2, boxId1: productId0 } 1: [2, 0, 1, 6, 7, 8], 2: [5, 3, 4, 10, 9], }; setTimeout(cb, LATENCY, rackIdToBoxes[rackId].indexOf(productIdx)); }; const getBoxMass = (rackId, boxId, cb) => { const boxIdToMass = { // rackId: boxes: { boxId0: massProductId2, boxId1: massProductId0 } 1: [10, 11, 12, 13, 14, 15], 2: [16, 17, 18, 19, 20], } setTimeout(cb, LATENCY, boxIdToMass[rackId][boxId]); }; const printProductMass = (productIdx) => { getProduct(productIdx, ({ name, rackId }) => { getBoxIdx(rackId, productIdx, (boxId) => { getBoxMass(rackId, boxId, (boxMass) => { console.log(`Коробка №${boxId} c ${name} находится на стеллаже №${rackId} и весит ${boxMass} кг`); }); }); }); }; printProductMass(10);

Задание 1

                            
Напишите функцию checkLuck(chance), которая принимает chance в процентах и возвращает true с вероятностью {chance}%, а false — с вероятностью {100 - chance}%. То есть, если вызвать checkLuck(30) миллион раз, то примерно 300 тысяч раз она должна вернуть true. Функция понадобится для следующих задач. Вызовите функцию миллион раз, чтобы проверить её работоспособность.
                        

Ответ:

const checkLuck = (chancePercents = 50) => { const probability = chancePercents / 100; return Math.random() <= probability; } const tries = { [true]: 0, [false]: 0, } for (let i = 0; i < 1000000; ++i) { tries[checkLuck(30)]++; } console.log(tries);

Задание 2

                            
Перепишите serverMock, используя Promise. С вероятностью 30% Promise должен упасть с ошибкой.
                            
Напишите функцию serverMock(latency), которая принимает необходимую задержку и возвращает Promise с массивом products, содержащим объекты товаров. Каждый товар содержит поля price (случайное число от 300 до 10000) и name (случайное наименование из массива наименований). Через {latency} миллисекунд функция вызывает resolve() со случайно сгенерированным массивом товаров длиной от 5 до 10. Выведите в консоль массив товаров и ошибку, если она произошла.
                        

Исходный код:

const random = (min, max) => { const rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); }; const productNames = [ 'Орехи', 'Морковь', 'Спаржа', 'Печенье', 'Наушники', 'Молоко', 'Сок', 'Контейнер', 'JS-разработчик', 'Прямые руки', 'Водка', ]; const getRandomProductName = () => { return productNames[random(0, productNames.length - 1)]; }; const getRandomPrice = () => random(300, 10000); const serverMock = (latency, cb) => { const products = Array.from({ length: random(5, 10) }) .map(() => ({ name: getRandomProductName(), price: getRandomPrice(), })); setTimeout(() => { cb(products); }, latency) }; serverMock(3000, (products) => { console.log(products); });

Ответ:

const random = (min, max) => { const rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); }; const checkLuck = (chancePercents = 50) => { const probability = chancePercents / 100; return Math.random() <= probability; } const productNames = [ 'Орехи', 'Морковь', 'Спаржа', 'Печенье', 'Наушники', 'Молоко', 'Сок', 'Контейнер', 'JS-разработчик', 'Прямые руки', 'Водка', ]; const getRandomProductName = () => { return productNames[random(0, productNames.length - 1)]; }; const getRandomPrice = () => random(300, 10000); const getRandomProducts = () => { return Array.from({ length: random(5, 10) }) .map(() => ({ name: getRandomProductName(), price: getRandomPrice(), })); } const serverMock = (latency, cb) => { return new Promise((res, rej) => { setTimeout(() => { const shouldFail = checkLuck(30); if (shouldFail) { rej('Connection error'); } else { res( getRandomProducts() ); } }, latency) }) }; serverMock(2000) .then(products => { console.log(products); }) .catch(err => { console.log(err); })

Задание 3

                            
Напишите функцию promiseTimeout(ms, promise), которая принимает время таймаута в миллисекундах и промис и возвращает новый промис с ограничением времени на его resolve/reject.
                            
То есть, если у нас есть некая функция fetchData(), получающая данные с сервера и возвращающая промис, а мы вызовем promiseTimeout(1000, fetchData()), но сервер будет отвечать дольше одной секунды, то мы должны получить reject('Timeout').
                            
Используйте Promise.race().
                        

Ответ:

const promiseTimeout = (ms, promise) => { const timeout = new Promise((resolve, reject) => { setTimeout(() => { reject(new Error(`Timed out in ${ms} ms.`)); }, ms); }); return Promise.race([timeout, promise]); }; const fetchData = () => new Promise((res, rej) => { setTimeout(() => { res('Fetched data'); }, 1001) }) promiseTimeout(1000, fetchData()) .then(msg => console.log(msg)) .catch(err => console.log(err))

Задание 4

                            
Напишите функцию flipCoin() — подбросить монетку. Монетка летит от 50 до 200 миллисекунд. И с шансом 50% выпадает орёл (heads) или решка (tails). То есть функция возвращает promise со строкой 'heads' или 'tails'.
                            
Используйте функции random(min, max) и checkLuck(chance) из предыдущих заданий.
                            
Подбросьте 100000 монет одновременно и посчитайте, сколько раз выпала решка, а сколько — орёл. Используйте Promise.all().
                        

Ответ:

const random = (min, max) => { const rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); }; const checkLuck = (chancePercents = 50) => { const probability = chancePercents / 100; return Math.random() <= probability; } const flipCoin = () => new Promise((res, rej) => { setTimeout(() => { if ( checkLuck(50) ) { res('heads'); } else { res('tails'); } }, random(50, 200)); }); const flips = Array.from({ length: 100000 }) .map(() => flipCoin()); Promise.all(flips).then(results => { const counts = results.reduce((counts, result) => { counts[result]++; return counts; }, {tails: 0, heads: 0}); console.log('With Promise.all', counts); });

Задание 5

                            
Перепишите задачу с тремя «серверами», используя промисы. Каждый сервер должен с вероятностью 10% выдавать ошибку со своим названием, то есть делать reject(). Выведите эту ошибку в консоль, если она случится.
                        

Переделав функцию из предыдущего задания, создайте три «сервера»:

• Первый принимает {номер продукта} и коллбек, возвращает в коллбек продукт, у которого есть поля: {номер стеллажа на складе} и {имя продукта}.
• Второй сервер принимает {номер стеллажа на складе} и {номер продукта} и возвращает {номер коробки}.
• Третий сервер принимает {номер стеллажа на складе} и {номер коробки}, возвращает {вес коробки}.

Напишите функцию, которая принимает номер продукта, обращается к этим «серверам» и пишет в консоль:

                            
Коробка №{номер коробки} c {имя продукта} находится на стеллаже №{номер стеллажа на складе} и весит {вес коробки} кг.
                        

Ответ:

const LATENCY = 400; const checkLuck = (chancePercents = 50) => { const probability = chancePercents / 100; return Math.random() <= probability; }; const getProduct = (productIdx, cb) => { const productsById = { 0: { name: 'Орехи', rackId: 1 }, 1: { name: 'Морковь', rackId: 1 }, 2: { name: 'Спаржа', rackId: 1 }, 3: { name: 'Печенье', rackId: 2 }, 4: { name: 'Наушники', rackId: 2 }, 5: { name: 'Молоко', rackId: 2 }, 6: { name: 'Сок', rackId: 1 }, 7: { name: 'Контейнер', rackId: 1 }, 8: { name: 'JS-разработчик', rackId: 1 }, 9: { name: 'Прямые руки', rackId: 2 }, 10: { name: 'Водка', rackId: 2 }, }; return new Promise((res, rej) => { setTimeout(() => { if (checkLuck(10)) { rej('getProduct failed'); } else { res(productsById[productIdx]) } }, LATENCY); }); }; const getBoxIdx = (rackId, productIdx, cb) => { const rackIdToBoxes = { // rackId: boxes: { boxId0: productId2, boxId1: productId0 } 1: [2, 0, 1, 6, 7, 8], 2: [5, 3, 4, 10, 9], }; return new Promise((res, rej) => { setTimeout(() => { if (checkLuck(10)) { rej('getBoxIdx failed'); } else { res(rackIdToBoxes[rackId].indexOf(productIdx)) } }, LATENCY); }); }; const getBoxMass = (rackId, boxId, cb) => { const boxIdToMass = { // rackId: boxes: { boxId0: massProductId2, boxId1: massProductId0 } 1: [10, 11, 12, 13, 14, 15], 2: [16, 17, 18, 19, 20], }; return new Promise((res, rej) => { setTimeout(() => { if (checkLuck(10)) { rej('getBoxMass failed'); } else { res(boxIdToMass[rackId][boxId]) } }, LATENCY); }); }; const printProductMass = productIdx => { let rackIndex; let productName; let boxIndex; getProduct(productIdx) .then(({ name, rackId}) => { rackIndex = rackId; productName = name; return getBoxIdx(rackIndex, productIdx); }) .then(boxId => { boxIndex = boxId; return getBoxMass(rackIndex, boxId) }) .then(boxMass => { console.log(`Коробка №${boxIndex} c ${productName} находится на стеллаже №${rackIndex} и весит ${boxMass} кг`); }) .catch(err => { console.log(`Ошибка: ${err}`) }) } printProductMass(10);

Задание 1

                            
Перепешите последнюю функцию задачи с тремя «серверами» с помощью async/await.
                        

Исходный код:

const LATENCY = 400; const checkLuck = (chancePercents = 50) => { const probability = chancePercents / 100; return Math.random() <= probability; }; const getProduct = (productIdx, cb) => { const productsById = { 0: { name: 'Орехи', rackId: 1 }, 1: { name: 'Морковь', rackId: 1 }, 2: { name: 'Спаржа', rackId: 1 }, 3: { name: 'Печенье', rackId: 2 }, 4: { name: 'Наушники', rackId: 2 }, 5: { name: 'Молоко', rackId: 2 }, 6: { name: 'Сок', rackId: 1 }, 7: { name: 'Контейнер', rackId: 1 }, 8: { name: 'JS-разработчик', rackId: 1 }, 9: { name: 'Прямые руки', rackId: 2 }, 10: { name: 'Водка', rackId: 2 }, }; return new Promise((res, rej) => { setTimeout(() => { if (checkLuck(10)) { rej('getProduct failed'); } else { res(productsById[productIdx]) } }, LATENCY); }); }; const getBoxIdx = (rackId, productIdx, cb) => { const rackIdToBoxes = { // rackId: boxes: { boxId0: productId2, boxId1: productId0 } 1: [2, 0, 1, 6, 7, 8], 2: [5, 3, 4, 10, 9], }; return new Promise((res, rej) => { setTimeout(() => { if (checkLuck(10)) { rej('getBoxIdx failed'); } else { res(rackIdToBoxes[rackId].indexOf(productIdx)) } }, LATENCY); }); }; const getBoxMass = (rackId, boxId, cb) => { const boxIdToMass = { // rackId: boxes: { boxId0: massProductId2, boxId1: massProductId0 } 1: [10, 11, 12, 13, 14, 15], 2: [16, 17, 18, 19, 20], }; return new Promise((res, rej) => { setTimeout(() => { if (checkLuck(10)) { rej('getBoxMass failed'); } else { res(boxIdToMass[rackId][boxId]) } }, LATENCY); }); }; const printProductMass = productIdx => { let rackIndex; let productName; let boxIndex; getProduct(productIdx) .then(({ name, rackId}) => { rackIndex = rackId; productName = name; return getBoxIdx(rackIndex, productIdx); }) .then(boxId => { boxIndex = boxId; return getBoxMass(rackIndex, boxId) }) .then(boxMass => { console.log(`Коробка №${boxIndex} c ${productName} находится на стеллаже №${rackIndex} и весит ${boxMass} кг`); }) .catch(err => { console.log(`Ошибка: ${err}`) }) } printProductMass(10);

Ответ:

const LATENCY = 400; const checkLuck = (chancePercents = 50) => { const probability = chancePercents / 100; return Math.random() <= probability; }; const getProduct = (productIdx, cb) => { const productsById = { 0: { name: 'Орехи', rackId: 1 }, 1: { name: 'Морковь', rackId: 1 }, 2: { name: 'Спаржа', rackId: 1 }, 3: { name: 'Печенье', rackId: 2 }, 4: { name: 'Наушники', rackId: 2 }, 5: { name: 'Молоко', rackId: 2 }, 6: { name: 'Сок', rackId: 1 }, 7: { name: 'Контейнер', rackId: 1 }, 8: { name: 'JS-разработчик', rackId: 1 }, 9: { name: 'Прямые руки', rackId: 2 }, 10: { name: 'Водка', rackId: 2 }, }; return new Promise((res, rej) => { setTimeout(() => { if (checkLuck(10)) { rej('getProduct failed'); } else { res(productsById[productIdx]) } }, LATENCY); }); }; const getBoxIdx = (rackId, productIdx, cb) => { const rackIdToBoxes = { // rackId: boxes: { boxId0: productId2, boxId1: productId0 } 1: [2, 0, 1, 6, 7, 8], 2: [5, 3, 4, 10, 9], }; return new Promise((res, rej) => { setTimeout(() => { if (checkLuck(10)) { rej('getBoxIdx failed'); } else { res(rackIdToBoxes[rackId].indexOf(productIdx)) } }, LATENCY); }); }; const getBoxMass = (rackId, boxId, cb) => { const boxIdToMass = { // rackId: boxes: { boxId0: massProductId2, boxId1: massProductId0 } 1: [10, 11, 12, 13, 14, 15], 2: [16, 17, 18, 19, 20], }; return new Promise((res, rej) => { setTimeout(() => { if (checkLuck(10)) { rej('getBoxMass failed'); } else { res(boxIdToMass[rackId][boxId]) } }, LATENCY); }); }; const printProductMass = async productIdx => { try { const { rackId, name } = await getProduct(productIdx); const boxId = await getBoxIdx(rackId, productIdx); const boxMass = await getBoxMass(rackId, boxId); console.log(`Коробка №${boxId} c ${name} находится на стеллаже №${rackId} и весит ${boxMass} кг`); } catch(err) { console.log(`Ошибка: ${err}`) } } printProductMass(10);

Задание 2

                            
Напишите функцию delay(ms), которую можно использовать в виде await delay(100) в асинхронных функциях, чтобы остановить выполнение на 100 мс. Посчитайте от 1 до 10 секунд в консоль, используя эту функцию и обычный цикл for.
                        

Ответ:

const delay = ms => { return new Promise((res) => setTimeout(res, ms)); } (async () => { for (let i = 1; i <= 10; ++i) { await delay(1000); console.log(i); } })();

Задание 1

                            
Создайте функцию range(min, max), возвращающую Iterable объект от {min} до {max}.
                        

Пояснение к заданию:

for (let i of range(0, 5)) { console.log(i); // Должен напечатать от 0 до 5 }

Ответ:

const range = (min, max) => { return { [Symbol.iterator]: () => { let current = min; let last = max; return { next() { if (current > max) { return { done: true }; } else { return { done: false, value: current++ }; } }, } } } }; for (let i of range(0, 5) ) { console.log(i); }

Задание 2

                            
Создайте Iterable, бесконечно возвращающий числа Фибоначчи.
                            
*Число Фибоначчи — последовательность чисел, которая начинается с 1, 1, 2, 3, 5. Каждое последующее число равно сумме двух предыдущих.
                        

Ответ:

const fib = { [Symbol.iterator]: () => { let prev = 1; let prevPrev = 1; let currentIdx = 0; const done = false; return { next() { if (currentIdx++ <= 2) { return { done, value: 1 } } const value = prev + prevPrev; prevPrev = prev; prev = value; return { done, value }; }, }; } }; let counter = 0; for (let i of fib ) { console.log(i); if (counter++ === 15) { break; } }

Задание 3

                            
Перепишите прошлое задания, используя генератор function* getFib().
                        

Ответ:

function* getFib() { let prev = 1; let prevPrev = 1; for (let i = 0;; ++i) { if (i <= 2) { yield 1; } else { const value = prev + prevPrev; prevPrev = prev; prev = value; yield value; } } } let counter = 0; for (let i of getFib() ) { console.log(i); if (counter++ === 15) { break; } }

Задание 4

                            
Напишите асинхронный бесконечный генератор подбрасывания монетки async function* flipCoins(). С 50% шансом он возвращает 'tails' или 'heads'. Монетка подбрасывается 200-400 мс.
                            
Подбросьте монетку 10 раз используя for await.
                            
С помощью performance.now(), который возвращает время прошедшее с 1970 года в миллисекундах, определите, сколько времени заняло подбросить 10 монеток.
                        

Ответ:

const random = (min, max) => { const rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); }; const checkLuck = (chancePercents = 50) => { const probability = chancePercents / 100; return Math.random() <= probability; } const flipCoin = () => { if ( checkLuck(50) ) { return 'heads'; } else { return 'tails'; } }; async function* flipCoins() { while(true) { await new Promise(res => setTimeout(() => res(), random(200, 400))); yield flipCoin(); } } (async () => { let counter = 0; const startTime = performance.now(); for await (let result of flipCoins()) { console.log(result); if (++counter === 10) break; } const endTime = performance.now(); console.log(`Time passed: ${endTime - startTime}ms`); })();

Задание 1

                            
Напишите функцию isValidJson(str), которая возвращает true, если str — валидный JSON.
                        

Ответ:

const isValidJson = str => { if (!str || typeof str !== 'string') { return false; } try { JSON.parse(str) return true; } catch(e) { return false; } } console.log([ 'a;lsdkjfa;lkejr', JSON.stringify({}), JSON.stringify({ hello: 'world' }), JSON.stringify({ date: new Date() }), JSON.stringify([1,2,3,4,5]), '', 928374928374928347, ].map(isValidJson));

Задание 2

                            
Как известно, объект new Date() не сериализуется с помощью JSON.stringify(). Напишите функции serialize(arr) и deserialize(str).
                            
serialize принимает массив элементов, среди которых могут быть объекты типа Date. Каждый такой объект превратите в timestamp и сериализуйте его с помощью JSON.stringify().
                            
А deserialize(str) должен принимать строку полученную с помощью serialize() и возвращать массив объектов, среди которых снова должны появиться объекты типа Date.
                            
Объекты типа Date возможны только на первом уровне вложенности (внутри массива).
                            
Внимание: возможно перепутать timestamp и просто число, учтите это.
                        

Ответ:

const arr = [ new Date(), { hello: 'word' }, new Date(234234234), { a: 'b' }, 239470293704957, [1, 2, 3, 4, 5], '1970-01-03T17:03:54.234Z', ]; const VERY_UNCOMMON = ')(*&#@)(*!----ЦЫ1В2JWO)'; const serialize = arr => { const serializable = arr .map(obj => { if (obj instanceof Date) { return `${VERY_UNCOMMON}${obj.getTime()}`; } return obj; }) return JSON.stringify(serializable); }; const deserialize = json => { const parsed = JSON.parse(json); return parsed .map(entry => { if (typeof entry === 'string' && entry.includes(VERY_UNCOMMON)) { const timestamp = entry.replace(VERY_UNCOMMON, ''); return new Date( Number(timestamp) ) } return entry; }) } console.log(arr); const str = serialize(arr); console.log(deserialize(str));

Задание 3

                            
Перепишите функцию memo(fn) так, чтобы её можно было использовать для {fn} с 2+ аргументами. Сериализуйте аргументы для запоминания в JSON. Подумайте, какие есть ограничения и минусы у такого подхода.
                        

Ответ:

const slowCalculation = (n, m) => { for (let i = 0; i < 1000000000; ++i); return n * 100 * m; }; const memo = fn => { let lastArgs = {}; let lastReturn; return (...args) => { const currentArgs = JSON.stringify(args); if (currentArgs === lastArgs) { return lastReturn; } lastArgs = args; lastReturn = fn(...args); return lastReturn; }; }; console.log( slowCalculation(10, 20) ); console.log( slowCalculation(10, 20) ); const memoizedCalculation = memo(slowCalculation); console.log( memoizedCalculation(20, 30) ) // Эти два должны вывестись одновременно setTimeout(() => { console.log( memoizedCalculation(30, 40)) console.log( memoizedCalculation(30, 40)) }, 3000);

Задание 1

                            
Напишите функцию createCounter(n), которая создает объект с методами count(), увеличивающий {n} на 1, print(), печатающий {n} в консоль, и set(n), устанавливающий новый {n}.
                        

Ответ:

const createCounter = n => { return { n, set(n) { this.n = n; }, count() { this.set(this.n + 1); }, print() { console.log(this.n); } } } const counter = createCounter(5); counter.print(); counter.count(); counter.print(); counter.set(2); counter.print(); counter.count(); counter.print();

Задание 2

Добавьте возможность цепного вызова методов counter:

const counter = createCounter(5); counter .print() // 5 .set(0) .count() .print() // 1 .count() .print() // 2

Ответ:

const createCounter = n => { return { n, set(n) { this.n = n; return this; }, count() { this.set(this.n + 1); return this; }, print() { console.log(this.n); return this; } } } const counter = createCounter(5); counter .print() // 5 .set(0) .count() .print() // 1 .count() .print() // 2

Задание 3

Исправьте код так, чтобы this не терялось.

Исходный код:

• HTML
• CSS
• JS

Ответ:

class Counter { constructor(n) { this.state = { n }; this.root = document.getElementById('root'); this.render(); this.increment = this.increment.bind(this); this.decrement = this.decrement.bind(this); } increment() { this.setState({ n: this.state.n + 1 }); } decrement() { this.setState({ n: this.state.n - 1 }); } setState(newState) { this.state = { ...this.state, ...newState, }; this.render(); } render() { this.root.innerHTML = ''; this.root.innerHTML = this.state.n; } } const buttonIncrement = document.querySelector('.increment'); const buttonDecrement = document.querySelector('.decrement'); const counter = new Counter(5); buttonIncrement.addEventListener('click', counter.increment); buttonDecrement.addEventListener('click', counter.decrement);

Задание 4

                            
Снова исправьте код так, чтобы this не терялось. Вспомните про стрелочные функции.
                        

Исходный код:

const five = { a: 5, add(b) { console.log(this.a + b); return 'PRINTED!'; }, } const withLogging = fn => { return arg => { console.log(`Function ${fn.name} called with ${arg}:`) const returned = fn.call(this, arg); console.log(`Function ${fn.name} returned ${returned}`) return returned; } } five.add = withLogging(five.add); five.add(10); five.add(5); five.add(-5);

Ответ:

Задание 5

                            
Еще раз перепишите функцию memo(fn) так, чтобы её можно было использовать для методов объекта (чтобы this в теле fn не терялся).
                            
Пояснение: используйте call или apply.
                        

Ответ:

const calculator = { three() { return 3; }, slowCalculation(n, m) { for (let i = 0; i < 1000000000; ++i); return n * m * this.three(); } }; const memo = fn => { let lastArgs = {}; let lastReturn; return function(...args) { const currentArgs = JSON.stringify(args); if (currentArgs === lastArgs) { return lastReturn; } lastArgs = args; lastReturn = fn.call(this, ...arguments); // lastReturn = fn.apply(this, arguments); return lastReturn; }; }; console.log( calculator.slowCalculation(30, 40) ); console.log( calculator.slowCalculation(30, 40) ); calculator.slowCalculation = memo(calculator.slowCalculation); console.log( calculator.slowCalculation(20, 30) ) // Эти два должны вывестись одновременно setTimeout(() => { console.log( calculator.slowCalculation(30, 40)) console.log( calculator.slowCalculation(30, 40)) }, 3000);

Задание 1

                            
Напишите функцию print(iterable), которая принимает Set или Map и печатает в консоль значения этих структур в виде "key: {key}, value: {value}", если это Map, и просто "value: {value}", если это Set.
                        

Ответ:

const print = iterable => { for (let entry of iterable) { if (Array.isArray(entry)) { const [key, value] = entry; console.log('key:', key); console.log('value:', value); } else { console.log('value:', entry); } } }; const map = new Map() .set({}, 'empty') .set('empty', {}) .set('hello', 'world') .set(() => {}, {fn: 'function'} ); print(map); const set = new Set([ 'hello', 'hello', 'hello', 'empty', 'world', () => {}, {}, {} ]) print(set);

Задание 2

                            
Напишите функцию uniqueChars(str), которая принимает строку и возвращает количество уникальных символов в строке.
                        

Ответ:

const unique = str => { return new Set(str.split('')).size; } const str = 'abcabcabcabca abcabcabbbbcbabcbac'; console.log( unique(str) )

Задание 3

                            
Напишите функцию onlyUniqueLength(arr), которая принимает массив строк и удаляет дублирующиеся по длине строки. То есть: onlyUniqueLength(['1', '2', '3', '44']) ⇒ ['1', '44'].
                            
Остаться должна именно первая найденная строка каждой длины, порядок гарантирован.
                        

Ответ:

const onlyUniqueLength = arr => { const map = new Map(); arr.reverse('').forEach(word => { map.set(word.length, word); }) return [...map.values()].reverse(); } const arr1 = ['1', '2', '3', '44'] console.log( onlyUniqueLength(arr1) ) const arr2 = ['1', '2', '3', '44', '55', '66', '777', '987']; console.log( onlyUniqueLength(arr2) )

Задание 4

                            
Напишите функцию, которая принимает объект массивов и возвращает Map Set-ов.
                        

Ответ:

const transformObjectOfArraysToMapOfSets = obj => { const entriesWithSets = Object.entries(obj) .map(([key, value]) => [key, new Set(value)]); return new Map(entriesWithSets); } const obj = { ones: [1,1,1,1,1,1,1,1,1,1,1,1,1,11,11,1111,11,1], twos: [2,2,2,2,2,2,2,2222,22,222222,222,2,2,2,22], threes: [3,33,3333,333,33,33,3,3333,33,3,3,3,3,3], } console.log(transformObjectOfArraysToMapOfSets(obj));

Задание 5

                            
И ещё раз перепишите memo(fn) так, чтобы аргументы и возвращаемое значение хранились в new Map(), а для сравнения аргументов вместо JSON.stringify использовалась функция hash, принимающая аргументы возвращающая нечто, что легко сравнить (например строки или числа). Кэшируйте все вызовы, переименуйте memo в withCache.
                            
Сигнатура должна теперь выглядеть следующим образом: withCache(fn, hash).
                        

Ответ:

const calculator = { three() { return 3; }, slowCalculation(n, m) { for (let i = 0; i < 1000000000; ++i); return n * m * this.three(); } }; const withCache = (fn, hash) => { const cache = new Map(); return function(...args) { const currentArgs = hash(...args); if (cache.has(currentArgs)) { return cache.get(currentArgs); } const newReturn = fn.apply(this, arguments); cache.set(currentArgs, newReturn) return newReturn; } }; console.log( calculator.slowCalculation(30, 40) ); console.log( calculator.slowCalculation(30, 40) ); const hash = (a, b) => String(a) + `,${b}`; calculator.slowCalculation = withCache(calculator.slowCalculation, hash); console.log( calculator.slowCalculation(20, 30) ) // Эти два должны вывестись одновременно setTimeout(() => { console.log( calculator.slowCalculation(30, 40)) console.log( calculator.slowCalculation(30, 40)) }, 3000);