====== array \ масив ======
===== обява масиву =====
const myArray1 = [1, 2, 3]
const myArray2 = new Array(1,2,3,4)
===== створення массиву з іньшого типу змінної (Array.from)=====
let resslug = 'лпапг шгнеенгш щшгненгш';
let tempargs = Array.from(resslug );
===== Зміна значення в масиві =====
myArray2[2] = 'sddg'
===== Зміна розмірності масиву =====
не рекомендується змінювати розмірність руками
myArray.lenght = 4
===== Додавання нового єлемента =====
==== по індексу ====
4 - наступний після останього індекса
myArray2[4] = true
==== push - у кінець ====
myArray2.push('dvdv')
myArray2.push('a','b','c','d')
==== unshift - У початок ====
myArray2.unshift('dvdv')
==== flat (вирівеювання рівня вкладенності массиву) ====
myArray.flat(2)
де **2** - кількість вкладень масива у масиві що треба перенести на 1й рівень вкладенності.
замість **2** можна викоритовувати **infinity**
===== Видалити елемент масиву =====
==== Останній елемент ====
myArray2.pop()
**pop** повертає останній видалений елемент
const lastpos = myArray2.pop()
==== Перший елемент ====
myArray2.shift()
**shift** повертає перший видалений елемент
const lastpos = myArray2.shift()
==== З індексу кількість ====
myArray.splice(fromIndex,numberToDelete)
===== Обхід елементів масива =====
==== Перебираючі методи ====
У більшості методів колбек-функції, які є їхнім аргументом, отримують три наступні параметри:
* першим параметром буде значення поточного елемента масиву currentValue
* другим параметром буде індекс поточного елемента масиву index
* третім параметром буде посилання на сам вихідний масив array
array.method((item, idx, arr) => {
// логіка, яка буде виконуватися на кожній ітерації
});
==== forEach (без повернення значень) ====
**forEach** - перебирає всі єлементи масива і для кожного виконує парадаваєму анонімну функцію. Нічого не повертає і не змінює
const myArray = [1, 2, 3]
myArray.forEach(elementOfMassiv=>console.log(elementOfMassiv*2))
// Стрілочна анонімна функція
numbers.forEach((number, index) => {
console.log(`Index ${index}, value ${number}`);
});
const numbers = [5, 10, 15, 20, 25];
// Класичний for
for (let i = 0; i < numbers.length; i += 1) {
console.log(`Index ${i}, value ${numbers[i]}`);
}
// Перебираючий метод forEach
numbers.forEach(function (number, index) {
console.log(`Index ${index}, value ${number}`);
});
==== map (з поверненням значень) ====
**map** - перебирає всі єлементи масива і для кожного виконує парадаваєму анонімну функцію + повертає значення у новий массив
const planets = ["Earth", "Mars", "Venus", "Jupiter"];
const planetsInUpperCase = planets.map(planet => planet.toUpperCase());
console.log(planetsInUpperCase); // ["EARTH", "MARS", "VENUS", "JUPITER"]
const planetsInLowerCase = planets.map(planet => planet.toLowerCase());
console.log(planetsInLowerCase); // ["earth", "mars", "venus", "jupiter"]
// Оригінальний масив не змінився
console.log(planets); // ["Earth", "Mars", "Venus", "Jupiter"]
- коротка стрілочна функція
const myArray = [1, 2, 3]
const myArray2 = myArray.map(elementOfMassiv=>elementOfMassiv*3)
- повна стрілочна функція
const myArray = [1, 2, 3]
const myArray2 = myArray.map((elementOfMassiv)=>{
return elementOfMassiv*3
})
- анонімний функціональний вираз
const myArray = [1, 2, 3]
const myArray2 = myArray.map(function (elementOfMassiv){
return elementOfMassiv*3
})
Функція має повертати масив імен усіх користувачів (властивість name) із масиву users.
**Приклад: Функція має повертати масив імен усіх користувачів (властивість name) із масиву users.**
const getUserNames = (array) => {
const newArray = [];
array.forEach(element => {
newArray.push(element.name);
});
return newArray;
};
==== flatMap ====
Метод flatMap(callback) аналогічний методу map(), але застосовується у випадках, коли результат — це багатовимірний масив, який необхідно «розгладити». Розгладжує тільки один рівень.
const students = [
{ name: "Mango", courses: ["mathematics", "physics"] },
{ name: "Poly", courses: ["science", "mathematics"] },
{ name: "Kiwi", courses: ["physics", "biology"] },
];
const mappedCourses = students.map(student => student.courses);
console.log(mappedCourses) // [["mathematics", "physics"], ["science", "mathematics"], ["physics", "biology"]]
const flattenedCourses = students.flatMap(student => student.courses);
console.log(flattenedCourses) // ["mathematics", "physics", "science", "mathematics", "physics", "biology"];
==== через цикл for of ====
for (let myElem of array){
console.log(myElem);
}
==== через цикл for in ====
не рекомендується
for (const key in myArray){
console/log(myArray[key])}
===== slice - повертає новий масив, що містить копію частини вихідного масиву =====
slice(begin, end) повертає новий масив, що містить копію частини вихідного масиву, не змінюючи його. Копія створюється від індексу begin до, але не включаючи індекс end.
begin - ідекс
const planets = ["Earth", "Mars", "Venus", "Jupiter", "Saturn"];
console.log(planets.slice(0, 2)); // ['Earth', 'Mars']
===== splice =====
Змінює вміст масиву, видаляючи або замінюючи існуючі елементи.
array.splice(З_якого_індекса, кількість_на_видалення,замість_вставити_єл1,замість_вставити_єл2,.... );
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]
===== indexOf - визначення індексу першого входження елемента elem у масиві (з початку)=====
використовується для визначення індексу першого входження елемента elem у масиві. Він повертає індекс елемента, якщо він знайдений, або -1, якщо елемент не знайдений. Метод indexOf() виконує сувору рівність (===) при порівнянні елементів.
const clients = ["Mango", "Ajax", "Poly", "Kiwi", "Poly"];
console.log(clients.indexOf("Poly")); // 2
console.log(clients.indexOf("Monkong")); // -1
===== lastIndexOf - визначення індексу першого входження елемента elem у масиві (з кіньця) =====
===== length - длина масиву =====
Array.length
===== includes =====
Перевіряє чи є якесь значення у масиві і поверта true або false
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// Expected output: true
===== split (розділяє строку) =====
Перетворює строку на масив. Символ-показник розділення затираєтся.
const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');
console.log(words[3]);
// Expected output: "fox"
===== Обїеднання масивів =====
==== concat - для об'єднання двох або більше масивів ====
не вважаючи на кількість массивів всередині - усе одно буде одомірний массив
const firstArray = ["Mercury", "Venus"];
const secondArray = ["Mars", "Jupiter"];
const result = firstArray.concat(secondArray);
console.log(result); // ["Mercury", "Venus", "Mars", "Jupiter"];
const result = [].concat(array1, array2, array3);
==== join - Обеднання єлементів масива у строку ====
**join** - join(delimiter) дозволяє об'єднати елементи масиву в рядок. У результуючому рядку елементи будуть розділені символом або групою символів, зазначених у delimiter.
const words = ["JavaScript", "is", "amazing"];
console.log(words.join("")); // 'JavaScriptisamazing'
===== filter - відбір в масиві=====
Метод filter(callback) використовується для єдиної операції — фільтрації масиву. Під фільтрацією масиву мається на увазі відбір усіх елементів з колекції за певним критерієм.
* Не змінює оригінальний масив.
* Поелементно перебирає оригінальний масив.
* Повертає новий масив.
* Додає в масив, що повертається, елементи, які задовольняють умову колбек-функції.
* Якщо колбек повернув true, елемент додається в масив, що повертається.
* Якщо колбек повернув false, елемент не додається в масив, що повертається.
* Якщо жоден елемент не задовольнив умову, повертає порожній масив.
array.filter((element, index, array) => {
// Тіло колбек-функції
});
після return пишемо саме умову по котрій треба умова відбору
const result = myArray.filter((elem, inx, array)=> {
return elem>0&&elem > 15;
});
const values = [51, -3, 27, 21, -68, 42, -37];
const positiveValues = values.filter(value => value >= 0);
console.log(positiveValues); // [51, 27, 21, 42]
// до positiveValues потрапили всі елементи масиву values, які задовольнили умову колбека, тобто були >= 0
const negativeValues = values.filter(value => value < 0);
console.log(negativeValues); // [-3, -68, -37]
// до negativeValues потрапили всі елементи масиву values, які задовольнили умову колбека, тобто були < 0
const bigValues = values.filter(value => value > 1000);
console.log(bigValues); // []
// до negatibigValues eValues потрапили всі елементи масиву values, які задовольнили умову колбека, тобто були > 1000
console.log(values); // [51, -3, 27, 21, -68, 42, -37]
// Оригінальний масив values не змінився
===== find - пошук в масиві=====
Метод find(callback) дозволяє знайти і повернути перший відповідний елемент, що задовольняє умову, після чого перебирання масиву припиняється. Тобто він, на відміну від методу filter(callback), шукає до першого збігу.
* Не змінює оригінальний масив
* Поелементно перебирає оригінальний масив
* Повертає перший елемент, що задовольняє умову, тобто коли колбек повертає true
* Якщо жоден елемент не задовольнив умову, тобто для всіх елементів колбек повернув false, метод повертає undefined
const colorPickerOptions = [
{ label: "red", color: "#F44336" },
{ label: "green", color: "#4CAF50" },
{ label: "blue", color: "#2196F3" },
{ label: "pink", color: "#E91E63" },
{ label: "indigo", color: "#3F51B5" },
];
colorPickerOptions.find((option) => option.label === "blue"); // { label: "blue", color: "#2196F3" }
colorPickerOptions.find((option) => option.label === "pink"); // { label: "pink", color: "#E91E63" }
colorPickerOptions.find((option) => option.label === "white"); // undefined
===== every =====
Метод every(callback) перевіряє, чи задовольняють усі елементи умову колбек-функції.
// Усі елементи більші або дорівнюють нулю? - так
[1, 2, 3, 4, 5].every((value) => value >= 0); // true
// Усі елементи більші або дорівнюють нулю? - ні
[1, 2, 3, -10, 4, 5].every((value) => value >= 0); // false
const products = [
{ name: "apple", quantity: 2 },
{ name: "orange", quantity: 5 },
{ name: "plum", quantity: 0 },
];
const hasEveryProduct = products.every(product => product.quantity > 0);
console.log(hasEveryProduct); // false
===== some =====
Метод some(callback) перевіряє, чи задовольняє хоча б один елемент умову колбек-функції.
// Чи є хоча б один елемент, що більший або дорівнює нулю? - так
[1, 2, 3, 4, 5].some(value => value >= 0); // true
// Чи є хоча б один елемент, що більший або дорівнює нулю? - так
[-7, -20, 3, -10, -14].some(value => value >= 0); // true
// Чи є хоча б один елемент, що менший від нуля? - ні
[1, 2, 3, 4, 5].some(value => value < 0); // false
// Чи є хоча б один елемент, що менший від нуля? - так
[1, 2, 3, -10, 4, 5].some(value => value < 0); // true
===== ...spread розбирання массивів =====
Розпилення / Розбирання
const lastWeekTemps = [14, 25, 11];
console.log(...lastWeekTemps );
Розпилили і зібрали новий масив
const lastWeekTemps = [14, 25, 11];
const currentWeekTemps = [23, 17, 18];
const allTemps = [...lastWeekTemps, ...currentWeekTemps];
console.log(allTemps); // [14, 25, 11, 23, 17, 18]
===== ...rest збирання невикористані єлементів =====
function foo(...arr){
console.log(arr);
}
foo(1,2,3);
===== reduce =====
Метод reduce(callback, initialValue) використовується для послідовної обробки кожного елемента масиву із збереженням проміжного результату.
- 1-й параметр (обов’язковий) — колбек-функція, яка "опрацьовує" кожен елемент масиву;
- 2-й параметр (не обов’язковий) — initialValue початкове значення акумулятора.
Тобто метод reduce() використовується, коли необхідно взяти «багато» і привести до «одного». У повсякденних завданнях його застосування зводиться до роботи з числами.
array.reduce((AccumValue, element, index, array) => {
// Тіло колбек-функції
}, initialValue);
* Не змінює оригінальний масив
* Поелементно перебирає оригінальний масив
* Повертає все, що завгодно (об’єкт, масив, рядок, число тощо)
* Може замінити функціонал будь-якого іншого перебираючого методу масиву та навіть їх комбінацію
const total = [2, 7, 3].reduce((AccumValue, number) => {
return AccumValue + number;
}, 0);
console.log(total); // 12
- Початкове значення акумулятора 0
- перша ітерація колбек-функції 0 + 2 поверне 2
- друга ітерація колбек-функції 2 + 7 поверне 9
- третя ітерація колбек-функції 9 + 3 поверне 12
Приклад
const students = [
{ name: "Mango", score: 83 },
{ name: "Poly", score: 59 },
{ name: "Ajax", score: 37 },
{ name: "Kiwi", score: 94 },
{ name: "Houston", score: 64 },
];
// Назва акумулятора може бути довільною, це просто параметр функції
const totalScore = students.reduce((total, student) => {
return total + student.score;
}, 0);
const averageScore = totalScore / students.length;
===== Сортування масссивву =====
==== toSorted ====
Метод toSorted() сортує елементи масиву. Повертає новий масив із відсортованими елементами
const players=[
{id: "player-1", name: "Mango", timePlayed: 30},
{id: "player-2", name: "Poly", timePlayed: 50},
];
const result=players.toSorted((player1,player2)=>{
return player1.timePlayed-player2.timePlayed})
const scores = [61, 19, 74, 35, 92, 56];
const ascendingScores = scores.toSorted();
console.log(scores); // [61, 19, 74, 35, 92, 56]
console.log(ascendingScores); // [19, 35, 56, 61, 74, 92]
==== sort====
Метод sort() сортує елементи масиву. модифікує оригінальний масив
const array = [1, 5, 3, 2, 4];
// sort() модифікує оригінальний масив
array.sort();
console.log(array); // [1, 2, 3, 4, 5]
==== Свій порядок сортування чисел ====
Для зазначення свого порядку сортування методу toSorted(compareFunction) потрібно передати колбек-функцію з двома параметрами.
Це функція порівняння (compare function), порядок сортування залежить від її результату. Метод toSorted() буде викликати її для двох довільних елементів.
==== Сортування за зростанням ====
const scores = [61, 19, 74, 35, 92, 56];
const ascendingScores = scores.toSorted((a, b) => a - b);
console.log(ascendingScores); // [19, 35, 56, 61, 74, 92]
==== Сортування за спаданням ====
const scores = [61, 19, 74, 35, 92, 56];
const descendingScores = scores.toSorted((a, b) => b - a);
console.log(descendingScores); // [92, 74, 61, 56, 35, 19]
==== localeCompare ====
Для сортування рядків в алфавітному порядку, за зростанням або спаданням, використовується метод рядків localeCompare().
"a".localeCompare("b"); // -1
"b".localeCompare("a"); // 1
"a".localeCompare("a"); // 0
"b".localeCompare("b"); // 0
const students = ["Jacob", "Artemis", "Solomon", "Adrian", "Kai", "Ganymede"];
const inAlphabetOrder = students.toSorted((a, b) => a.localeCompare(b));
console.log(inAlphabetOrder); // [ "Adrian", "Artemis", "Ganymede", "Jacob", "Kai", "Solomon" ]
const inReversedOrder = students.toSorted((a, b) => b.localeCompare(a));
console.log(inReversedOrder); // [ "Solomon", "Kai", "Jacob", "Ganymede", "Artemis", "Adrian" ]