Робота з масиви та обєктами є частина щоденної рутини frontend розробника. Вони широко використовуються для роботи з даними: список зареєстрованих користувачів сайту, список товарів і послуг і тому подібне. Так як робота з масивами даних – основа ефективного функціонування будь якого комерційного сайту, тому набуття практичних навичок з маніпуляції цими обєктами є важливою для розробників. Нижче будуть наведені приклади масивів та обєктів у форматі: теорія + приклад коду + пояснення прикладу.
Трішки теорії – основи масивів в JavaScript
Масив — це структура даних, яка дозволяє зберігати кілька значень в одній змінній. Значення в масиві називаються елементами, і кожен елемент має свій індекс (номер позиції, починаючи з 0). Наприклад:
let fruits = ["яблуко", "банан", "апельсин"];
Як створити масив?
Літерал масиву
let numbers = [1, 2, 3, 4, 5];
Конструктор Array
let emptyArray = new Array(); // порожній масив
let colors = new Array("червоний", "синій");Елементи масиву доступні за їх індексом:
let fruits = ["яблуко", "банан", "апельсин"]; console.log(fruits[0]); // "яблуко" console.log(fruits[1]); // "банан"
Перебір масиву ми робим : циклом for, методом .forEach().
Пошук у масиві робим використовуючи методи масиву:
.indexOf() — повертає індекс першого входження елемента
.includes() — перевіряє, чи є елемент у масиві
Декілька важливих методів масиву:
.splice() — видаляє або додає елементи за індексом
.slice() — повертає копію частини масиву (не змінює оригінал)
.shift() — видаляє перший елемент і повертає його
.pop() — видаляє останній елемент і повертає його
.unshift() — додає елемент на початок масиву
.push() — додає елемент у кінець масиву
Переходим до основного – прості задачі по кодингу масивів
1. Знайти найбільше/найменше число в масиві
const arr = [1, 2, 3, 4, 5];
const max = Math.max(…arr);
const min = Math.min(…arr);
console.log(max, min); // 5, 1
2. Підрахувати кількість повторень елемента в масиві
const arr = [1, 2, 2, 3, 4, 4, 4];
const count = arr.filter(num => num === 4).length;
console.log(count); // 3
3. Реверс масиву
const arr = [1, 2, 3, 4, 5];
const reversed = arr.reverse();
console.log(reversed); // [5, 4, 3, 2, 1]
4. Видалити дублікати з масиву
const arr = [1, 2, 2, 3, 4, 4];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4]
5. Сортувати масив за зростанням і спаданням
const arr = [5, 2, 8, 3];
const ascending = [...arr].sort((a, b) => a - b);
const descending = [...arr].sort((a, b) => b - a);
console.log(ascending, descending); // [2, 3, 5, 8], [8, 5, 3, 2]
6. Знайти суму елементів масиву
const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
7. Перевірити, чи всі елементи масиву позитивні
const arr = [1, 2, 3, -4];
const allPositive = arr.every(num => num > 0);
console.log(allPositive); // false
8. Перевірити, чи масив містить заданий елемент
const arr = [1, 2, 3];
const contains = arr.includes(2);
console.log(contains); // true
9. Знайти індекс заданого елемента
const arr = [1, 2, 3];
const index = arr.indexOf(2);
console.log(index); // 1
10. Об’єднати два масиви
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4]
11. Знайти перший непарний елемент масиву
const arr = [2, 4, 6, 7, 8];
const firstOdd = arr.find(num => num % 2 !== 0);
console.log(firstOdd); // 7
12. Перевірити, чи є хоча б один парний елемент
const arr = [1, 3, 5, 7];
const hasEven = arr.some(num => num % 2 === 0);
console.log(hasEven); // false
13. Знайти кількість елементів більше ніж задане число
const arr = [10, 20, 30, 40];
const count = arr.filter(num => num > 25).length;
console.log(count); // 2
14. Перевірити, чи масив є паліндромом
const arr = [1, 2, 3, 2, 1];
const isPalindrome = JSON.stringify(arr) === JSON.stringify([...arr].reverse());
console.log(isPalindrome); // true
15. Видалити всі нульові значення з масиву
const arr = [0, 1, 2, 0, 3, 0];
const filteredArr = arr.filter(num => num !== 0);
console.log(filteredArr); // [1, 2, 3]
16. Створити масив квадратів чисел
const arr = [1, 2, 3, 4];
const squares = arr.map(num => num ** 2);
console.log(squares); // [1, 4, 9, 16]
17. Обчислити добуток елементів масиву
const arr = [1, 2, 3, 4];
const product = arr.reduce((acc, curr) => acc * curr, 1);
console.log(product); // 24
18. Видалити елемент за його індексом
const arr = [1, 2, 3, 4];
const indexToRemove = 2;
const newArr = arr.filter((_, index) => index !== indexToRemove);
console.log(newArr); // [1, 2, 4]
19. Перетворити масив у рядок
const arr = ['Hello', 'World'];
const str = arr.join(' ');
console.log(str); // "Hello World"
20. Створити масив із унікальних об’єктів за ключем
const arr = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 1, name: 'Alice' }
];
const unique = Array.from(new Map(arr.map(obj => [obj.id, obj])).values());
console.log(unique); // [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
21. Знайти елемент із максимальним значенням властивості
const arr = [{ value: 10 }, { value: 15 }, { value: 5 }];
const maxItem = arr.reduce((prev, curr) => (prev.value > curr.value ? prev : curr));
console.log(maxItem); // { value: 15 }
22. Перемішати масив випадковим чином
const arr = [1, 2, 3, 4, 5];
const shuffled = arr.sort(() => Math.random() - 0.5);
console.log(shuffled);
23. Отримати всі можливі підмасиви
const arr = [1, 2, 3];
const subsets = (array) => {
return array.reduce((subsets, value) => subsets.concat(subsets.map(set => [...set, value])), [[]]);
};
console.log(subsets(arr)); // [[], [1], [2], [1,2], [3], [1,3], [2,3], [1,2,3]]
24. Знайти спільні елементи двох масивів
const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const common = arr1.filter(num => arr2.includes(num));
console.log(common); // [2, 3]
25. Розбити масив на підмасиви заданого розміру
const arr = [1, 2, 3, 4, 5];
const chunkSize = 2;
const chunks = [];
for (let i = 0; i < arr.length; i += chunkSize) {
chunks.push(arr.slice(i, i + chunkSize));
}
console.log(chunks); // [[1, 2], [3, 4], [5]]
26. Знайти другий за величиною елемент масиву
const arr = [1, 3, 4, 5, 0];
const secondMax = [...new Set(arr)].sort((a, b) => b - a)[1];
console.log(secondMax); // 4
27. Знайти відстань між найбільшим і найменшим елементами
const arr = [7, 2, 9, 4];
const distance = Math.max(...arr) - Math.min(...arr);
console.log(distance); // 7
28. Вставити елемент у заданий індекс
const arr = [1, 2, 3, 5];
const indexToInsert = 3;
arr.splice(indexToInsert, 0, 4);
console.log(arr); // [1, 2, 3, 4, 5]
29. Перетворити багатовимірний масив на одномірний
const arr = [[1, 2], [3, 4], [5]];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4, 5]
30. Знайти всі унікальні пари чисел, сума яких дорівнює заданому числу
const arr = [1, 2, 3, 4, 5];
const target = 6;
const pairs = [];
const set = new Set();
for (const num of arr) {
const complement = target - num;
if (set.has(complement)) {
pairs.push([complement, num]);
}
set.add(num);
}
console.log(pairs); // [[2, 4], [1, 5]]
Порада
Ось кілька додаткових завдань нижче, які можуть стати чудовими прикладами для лайв-кодингу на співбесіді. Такі завдання зазвичай спрямовані на оцінку логічного мислення, креативності та вміння оптимізувати рішення:
1. Реалізувати власний метод map
Array.prototype.myMap = function(callback) {
const result = [];
for (let i = 0; i < this.length; i++) {
result.push(callback(this[i], i, this));
}
return result;
};
// Приклад використання
const arr = [1, 2, 3];
const doubled = arr.myMap(num => num * 2);
console.log(doubled); // [2, 4, 6]
2. Перевірити, чи масив є підмасивом іншого масиву
const isSubarray = (arr, sub) => {
const strArr = arr.join(',');
const strSub = sub.join(',');
return strArr.includes(strSub);
};
// Приклад
console.log(isSubarray([1, 2, 3, 4], [2, 3])); // true
console.log(isSubarray([1, 2, 3, 4], [3, 5])); // false
3. Знайти “загублений” елемент у масиві
//Дано два масиви: один із них містить усі елементи, крім одного, який "загубився". Знайти загублений елемент.
const findMissing = (arr1, arr2) => {
return arr1.find(num => !arr2.includes(num));
};
// Приклад
console.log(findMissing([1, 2, 3], [1, 3])); // 2
4. Групувати елементи масиву за значеннями
//Наприклад: групувати всі елементи парні та непарні.
const groupByParity = (arr) => {
return arr.reduce((groups, num) => {
num % 2 === 0 ? groups.even.push(num) : groups.odd.push(num);
return groups;
}, { even: [], odd: [] });
};
// Приклад
console.log(groupByParity([1, 2, 3, 4])); // { even: [2, 4], odd: [1, 3] }
5. Обертати масив на K позицій
//Обертати масив вправо або вліво на задану кількість позицій.
const rotateArray = (arr, k) => {
k = k % arr.length;
return [...arr.slice(-k), ...arr.slice(0, -k)];
};
// Приклад
console.log(rotateArray([1, 2, 3, 4, 5], 2)); // [4, 5, 1, 2, 3]
6. Реалізувати власний метод filter
Array.prototype.myFilter = function(callback) {
const result = [];
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
result.push(this[i]);
}
}
return result;
};
// Приклад
const arr = [1, 2, 3, 4];
const filtered = arr.myFilter(num => num % 2 === 0);
console.log(filtered); // [2, 4]
7. Порахувати всі пари чисел у масиві, які дають задану суму
const countPairs = (arr, target) => {
const seen = new Set();
let count = 0;
arr.forEach(num => {
const complement = target - num;
if (seen.has(complement)) {
count++;
}
seen.add(num);
});
return count;
};
// Приклад
console.log(countPairs([1, 2, 3, 4, 3], 6)); // 2 ([2, 4], [3, 3])
8. Розгорнути частину масиву між двома індексами
const reverseSegment = (arr, start, end) => {
const reversedSegment = arr.slice(start, end + 1).reverse();
return [...arr.slice(0, start), ...reversedSegment, ...arr.slice(end + 1)];
};
// Приклад
console.log(reverseSegment([1, 2, 3, 4, 5], 1, 3)); // [1, 4, 3, 2, 5]
9. Знайти найпопулярніший елемент у масиві
const findMostFrequent = (arr) => {
const freq = arr.reduce((acc, num) => {
acc[num] = (acc[num] || 0) + 1;
return acc;
}, {});
return Object.keys(freq).reduce((a, b) => (freq[a] > freq[b] ? a : b));
};
// Приклад
console.log(findMostFrequent([1, 2, 2, 3, 3, 3])); // 3
10. Об’єднати масив, зберігаючи порядок унікальних елементів
const mergeUnique = (arr1, arr2) => {
return [...new Set([...arr1, ...arr2])];
};
// Приклад
console.log(mergeUnique([1, 2, 3], [3, 4, 5])); // [1, 2, 3, 4, 5]
Ці задачі чудово підходять для лайв-кодингу, оскільки вони тестують базові знання, логіку, а також здатність пояснювати свої дії.
Ці задачі чудово підходять для лайв-кодингу, оскільки вони тестують базові знання, логіку, а також здатність пояснювати свої дії.
Більше теорії по темі Масиви в JavaScript можна прочитати в статті, я туди все максимально написала, що треба знати по цій темі.
