JavaScript Мтоды массивов (часть 1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Работа с массивами данных</title>
</head>
<body>
<script>
// Вся работа данного урока проводится в консоли браузера Google Chrome
// ## Работа с массивами данных
// Наши данные
const presidents = [
{ first: 'George', last: 'Washington', born: 1732, died: 1799 },
{ first: 'John', last: 'Adams', born: 1735, died: 1826 },
{ first: 'Ronald', last: 'Reagan', born: 1911, died: 2004 },
{ first: 'Gerald', last: 'Ford', born: 1913, died: 2006 },
{ first: 'Richard', last: 'Nixon', born: 1913, died: 1994 },
{ first: 'John F.', last: 'Kennedy', born: 1917, died: 1963 },
{ first: 'Harry S.', last: 'Truman', born: 1884, died: 1972 },
{ first: 'Grover', last: 'Cleveland', born: 1837, died: 1908 },
{ first: 'Chester A.', last: 'Arthur', born: 1829, died: 1886 },
{ first: 'Abraham', last: 'Lincoln', born: 1809, died: 1865 },
{ first: 'Franklin', last: 'Pierce', born: 1804, died: 1869 },
{ first: 'Lyndon B.', last: 'Johnson', born: 1908, died: 1973 },
{ first: 'Dwight D.', last: 'Eisenhower', born: 1890, died: 1969 },
];
const writers = ['Василий, Жуковский', 'Александр, Грибоедов', 'Александр, Пушкин', 'Владимир, Даль',
'Николай, Языков', 'Федор, Тютчев', 'Николай, Гоголь', 'Алексей, Кольцов', 'Александр, Герцен',
'Иван, Гончаров', 'Михаил, Лермонтов', 'Пётр, Ершов', 'Алексей, Толстой', 'Даниил, Заточник',
'Александр, Радищев', 'Евгений, Баратынский', 'Петр, Вяземский', 'Александр, Бестужев-Марлинский',
'Михаил, Загоскин', 'Сергей, Аксаков', 'Владимир, Одоевский', 'Григорий, Данилевский',
'Алексей, Писемский', 'Дмитрий, Григорович', 'Яков, Полонский', 'Леонид, Андреев',
'Валерий, Брюсов', 'Саша, Черный', 'Юрий, Трифонов', 'Федор, Абрамов',
'Дмитрий, Кедрин', 'Василий, Шукшин'];
// Array.prototype.filter()
// 1. Отфильтровать президентов которые родились в 1700-х годах.
const born1700 = presidents.filter(pres => pres.born >= 1700 && pres.born < 1850); // Новый массив
console.table(born1700);
// Array.prototype.map()
// 2. Создать массив, который содержит только имя и фамилию каждого президента
const firstLast = presidents.map(pres => pres.first + " " + pres.last); // Новый массив
console.table(firstLast);
// Array.prototype.sort()
// 3. Отсортировать президентов по году рождения - от старшего к младшему
// РАсширенный способ
// const oldest = presidents.sort((a,b) => {
// if (a.born > b.born){
// return 1;
// }else{
// return -1;
// }
// });
const oldest = presidents.sort((a, b) => `${a.born > b.born ? 1 : -1}`); // Мутирует исходный массив!!!!
console.table(oldest);
// Array.prototype.reduce()
// 4. Подсчитать общее количество лет жизни всех президентов
// Обязательно задавать начальное значение для total - в данном случае - 0
const totalLived = presidents.reduce((total, pres) => total + (pres.died - pres.born), 0);
console.log(totalLived);
// 5. Отсортировать президентов в зависимости от количества прожитых лет (от большего к меньшему)
const presidentsSorted = presidents.sort((a,b)=>{
const aLived = a.died - a.born;
const bLived = b.died - b.born;
if (aLived > bLived){
return -1;
}else{
return ;
}
})
console.table(presidentsSorted);
// 6. Создать список названий городов (City) и областей (County) Калифорнии содержащих "San"
// https://en.wikipedia.org/wiki/List_of_cities_and_towns_in_California
// Выполняем прямо в браузере
// Находим нужную таблицу
const table = document.querySelector('.plainrowheaders');
// Собираем в массив все ссылки
const links = Array.from(table.querySelector('tbody').querySelectorAll('a'));
// Получаем из ссылок названия
const names = links.map(link => link.textContent);
// Фильтруем названия по значению
const tr = names.filter(city => city.includes('San'));
// Выводим в консоль
console.log(tr);
// 7. Упражнение по сортировке
// Отсортировать массив "writers" по фамилии в алфавитном порядке
const writersName = writers.sort((writerA, writerB) => {
// Получаем фамилию писателя А и B
const [firstA, lastA] = writerA.split(", ");
const [firstB, lastB] = writerB.split(", ");
return `${lastA > lastB ? 1 : -1}`
});
console.table(writersName);
// 8. Упражнение по использованию метода Reduce
// Подсчитать - сколько раз встречается каждый элемент в массиве
const data = ['truck', 'car', 'car', 'truck', 'bike', 'walk', 'car', 'van', 'bike',
'walk', 'car', 'van', 'car', 'truck'];
const dataCount = data.reduce((objCount, transport) => {
if(!objCount[transport]){
objCount[transport] = 0
}
objCount[transport] ++;
return objCount;
}, {});
console.log(dataCount)
// 9. Упражнение по использованию методов .foEach и Object.keys();
// Создать массив, который будет содержать только уникальные значения данного массива:
const fruits = ['apples', 'bananas', 'oranges', 'apples', 'grapes', 'bananas', 'peaches',
'strawberries', 'oranges', 'apricots', 'bananas'];
const uniqueFruits = {}
fruits.forEach((fruit) => {
uniqueFruits[fruit] = true;
});
console.log(Object.keys(uniqueFruits)); // получаем только ключи массива
</script>
</body>
</html>
Комментарии
Отправить комментарий