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')

Видалити елемент масиву

Останній елемент

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) => {
// Тіло колбек-функції
});

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((previousValue, element, index, array) => {
// Тіло колбек-функції
}, initialValue);

Не змінює оригінальний масив

Поелементно перебирає оригінальний масив

Повертає все, що завгодно (об’єкт, масив, рядок, число тощо)

Може замінити функціонал будь-якого іншого перебираючого методу масиву та навіть їх комбінацію

const total = [2, 7, 3].reduce((previousValue, number) => {
return previousValue + 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 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" ]