Задачи для решения

На деструктуризацию

Дан массив. Запишите первый элемент этого массива в переменную elem1, второй - в переменную elem2, третий - в переменную elem3, а все остальные элементы массива - в переменную arr.

Решение:

let newArr = ['первый', 'второй', 'третий', 'четвертый', 'пятый', 'шестой', 'седьмой'];
let [elem1, elem2, ...arr] = newArr;
document.write(elem1 + '| '+ elem2 + '|' +arr);

Дан массив. Запишите последний элемент этого массива в переменную elem1, а предпоследний - в переменную elem2.

Решение:

let newArr = ['первый', 'второй', 'третий', 'четвертый', 'пятый', 'шестой', 'седьмой'];
newArr.reverse();
let [elem1, elem2] = newArr;
document.write(elem1 + '|'+ elem2);

Дан массив. Запишите второй элемент этого массива в переменную elem2. Первый элемент никуда записывать не надо.

Решение:

let newArr = ['первый', 'второй', 'третий', 'четвертый', 'пятый', 'шестой', 'седьмой'];
let [, elem2] = newArr;
document.write(elem2);

Дан массив. Запишите второй элемент этого массива в переменную elem2, третий - в переменную elem3. Если в массиве нет третьего элемента - запишите в переменную elem3 значение 'eee', а если нет второго - в переменную elem2 запишите значение 'bbb'. Первый элемент никуда записывать не надо.

Решение:

let newArr = ['первый', 'второй'];
let [, elem2 = 'bbb', elem3 = 'eee'] = newArr;
document.write(elem2);

Дан объект {name: 'Петр', 'surname': 'Петров', 'age': '20 лет'}. Запишите соответствующие значения в переменные name, surname и age.

Решение:

let user = {
	name: 'Пётр',
	surname: 'Петров',
	age: '20 лет'
};

let{name, surname, age} = user;
document.write(name + ' ' + surname + ' ' + age);

Дан объект {name: 'Петр', 'surname': 'Петров', 'age': '20 лет', }. Запишите соответствующие значения в переменные name, surname и age. Сделайте так, чтобы, если какое-то значение не задано - оно принимало следующее значение по умолчанию: {name: 'Аноном', 'surname': 'Анонимович', 'age': '? лет'}.

Решение:

let user = {
	//name: 'Пётр',
	surname: 'Петров',
	//age: '20 лет'
};

let{name = 'Аноним', surname = 'Анонимович', age = '? лет'} = user;
document.write(name + ' ' + surname + ' ' + age);

На итераторы

Дан массив, выведите его элементы последовательно на экран.

Решение:

let arr = ['elem1', 'elem2', 'elem3'];
for (let curr of arr){
	alert(curr);
}

Дан массив, выведите его элементы последовательно на экран в обратном порядке (подсказка: сначала перевернем массив через reverse).

Решение:

let arr = ['elem1', 'elem2', 'elem3'];
arr.reverse();
for (let curr of arr){
	alert(curr);
}

Дан массив с числами, найдите сумму элементов этого массива.

Решение:

let arr = [1, 2, 3, 4, 5];
var sum = 0;
for (let curr of arr){
	sum += curr;
}
alert(sum);

Дана строка. С помощью for-of подсчитайте количество букв 'о' в ней.

Решение:

let str = 'Дана строка. С помощью for-of подсчитайте количество букв о в ней. ';
let i = 0;
for (let symb of str) {
	if (symb == 'о') {i++};
}
alert(i);

На функции

Сделайте функцию, которая получает имя пользователя и выводит на экран 'Привет, Имя' (вместо Имя - полученное параметром имя). По умолчанию (то есть если не передать параметр) функция должна выводить 'Привет, Аноним'.

Решение:

function func(a = 'Аноним') {
	alert('Привет, '+ a );
}

let name = 'Юзернейм';
func();

Дан объект с настройками, например, {id: 'elem', color: 'blue', border: '1px solid red', font: '15px Arial'}. Сделайте функцию, которая получает этот объект, извлекает из него все настройки в соответствующие переменные и для элемента с указанным id (в нашем случае это 'elem') ставит заданные CSS свойства. В объекте могут быть только эти ключи, однако, какой-либо ключ (кроме id) может быть не задан - в этом случае пусть возьмутся следующие значения по умолчанию: color: 'blue', border: '1px solid red', font: '15px Arial'.

Решение:

let options = {
	id: 'elem',
	color: 'blue',
	border: '1px solid red',
	font: '15px Arial'
};

function func({id, color = 'blue', border='1px dotted red', font='15px Tahoma'}) {
	let e = document.getElementById(id);
	let str = 'color:'+color+'; border:'+border+'; font:'+font;
	e.style.cssText = str;
}

func(options);

Даны абзацы с числами. Сделайте так, чтобы по нажатию на абзац начинал тикать таймер, который каждую секунду будет увеличивать на единицу число в этом абзаце. По нажатию на другой абзац должно происходить то же самое - он тоже начнет тикать.

Решение:

<p>0</p>
<p>0</p>
<p>0</p>
var parags = document.querySelectorAll('p');
parags.forEach(elem => elem.addEventListener('click',
	() => window.setInterval(
	() => elem.innerHTML=Number(elem.innerHTML) +1, 1000)
));