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" ]