Задание 1. Цель задания
Попрактиковаться в использовании сложных структур данных (массив объектов) и работе со свойствами.
Задание
Напишите функцию, фильтрующую массив объектов по значению свойства. Массив, название свойства и нужное значение должны передаваться в качестве аргументов. Пример использования:
let objects = [ { name: 'Василий', surname: 'Васильев' }, { name: 'Иван', surname: 'Иванов' }, { name: 'Пётр', surname: 'Петров' } ]
// fn - функция, которую нужно написать (хорошее название тоже нужно придумать) let result = fn(objects, 'name', 'Иван');
/* Результат выполнения должен быть: [ { name: 'Иван', surname: 'Иванов' } ] */
В конце файла с кодом домашнего задания напишите конструкцию export default {название функции}, чтобы была возможность автоматической проверки получившейся функции.
Проверка результата
Для проверки результата можете воспользоваться автоматическими тестами. Для этого можно запустить команду npm test из консоли.
Критерии оценки
Автоматические тесты для MR проходят успешно. Названия переменных, функций и аргументов достаточно информативные.
Рекомендации к выполнению
Не забывайте о том, что массивы и объекты передаются по ссылке. Поэтому для формирования массива-результата нужно создать новый отдельный массив, а не изменять старый, который пришёл в качестве параметра.
Задание 2. Цель задания
Научиться преобразовывать объекты в другие сущности. Получить базовые навыки для создания и размещения на странице DOM-элементов.
Задание
Напишите функцию, создающую выпадающий список на веб-странице (HTML select) из массива объектов со значениями. Массив должен содержать объекты со свойствами:
value — значение для атрибута value тэга option label — значение для содержимого тэга option (заголовок элемента при открытии списка или выбранного значения) Вторым аргументом функция должна принимать выбранное значение (value выбранного по умолчанию элемента). По умолчанию выбирается 0-й элемент массива значений. Если переданное значение не найдено в массиве элементов, то нужно также выбрать 0-й элемент.
Возвращаемое значение — DOM-элемент select.
Создайте базовую html-разметку в файле index.html. В неё поместите получившийся код с помощью <script src="proxy.php?url=https%3A%2F%2Fgithub.com%2F.%2Fmain.js"></script>. Внутри другого тэга script перед поместите код, который создаст новый select с произвольным массивом значений и поместит его в любое место в body.
Проверка результата
Попробуйте разные комбинации массива элементов и значения по умолчанию. Не забудьте проверить ситуацию с несуществующим в массиве элементов значением по умолчанию.
Критерии оценки
Корректная работа тэга select при различных значениях аргументов. Названия переменных, функций и аргументов достаточно информативные.
Рекомендации к выполнению
Для создания тэгов можно использовать функцию document.createElement('select/option'), которая вернёт объект DOM-элемента, название которого передано в первом параметр.
Для того, чтобы вложить один DOM-элемент в другой, можно воспользоваться методом DOM-элемента append. Например, при наличии элемента select и option в одноимённых переменных можно вложить 2-й в 1-й с помощью конструкции select.append(option).
document.body - это ссылка на DOM-элемент тэга body, в него можно вложить select с помощью того же append.
Для установки атрибута value тэга option нужно просто приравнять к свойству value DOM-элемента нужное значение.
Для размещения текста внутри DOM-элемента можно приравнять нужный текст свойству innerHTML.