Задачи для решения
На деструктуризацию
Дан массив. Запишите первый элемент этого массива в переменную 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)
));