array \ масив

const myArray1   =   [1, 2, 3]

const myArray2   = new Array(1,2,3,4)

let resslug =   'лпапг шгнеенгш щшгненгш';
let tempargs = Array.from(resslug );

myArray2[2] = 'sddg'

не рекомендується змінювати розмірність руками

myArray.lenght = 4    

4 - наступний після останього індекса

myArray2[4] = true

myArray2.push('dvdv')

myArray2.push('a','b','c','d')

myArray2.unshift('dvdv')

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 - перебирає всі єлементи масива і для кожного виконує парадаваєму анонімну функцію. Нічого не повертає і не змінює

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 - перебирає всі єлементи масива і для кожного виконує парадаваєму анонімну функцію + повертає значення у новий массив

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

1. коротка стрілочна функція

const myArray   =  [1, 2, 3]
const myArray2 = myArray.map(elementOfMassiv=>elementOfMassiv*3)

1. повна стрілочна функція

const myArray   =  [1, 2, 3]
const myArray2 = myArray.map((elementOfMassiv)=>{
return elementOfMassiv*3
})

1. анонімний функціональний вираз

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(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 (let myElem of array){
console.log(myElem);
}

не рекомендується

for (const key in myArray){
console/log(myArray[key])}

slice(begin, end) повертає новий масив, що містить копію частини вихідного масиву, не змінюючи його. Копія створюється від індексу begin до, але не включаючи індекс end. begin - ідекс

const planets = ["Earth", "Mars", "Venus", "Jupiter", "Saturn"];
console.log(planets.slice(0, 2)); // ['Earth', 'Mars']

Змінює вміст масиву, видаляючи або замінюючи існуючі елементи.

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

використовується для визначення індексу першого входження елемента elem у масиві. Він повертає індекс елемента, якщо він знайдений, або -1, якщо елемент не знайдений. Метод indexOf() виконує сувору рівність (== при порівнянні елементів.

const clients = ["Mango", "Ajax", "Poly", "Kiwi", "Poly"];
console.log(clients.indexOf("Poly")); // 2
console.log(clients.indexOf("Monkong")); // -1

Array.length

Перевіряє чи є якесь значення у масиві і поверта true або false

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// Expected output: true

Перетворює строку на масив. Символ-показник розділення затираєтся.

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// Expected output: "fox"

не вважаючи на кількість массивів всередині - усе одно буде одомірний массив

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(delimiter) дозволяє об'єднати елементи масиву в рядок. У результуючому рядку елементи будуть розділені символом або групою символів, зазначених у delimiter.

const words = ["JavaScript", "is", "amazing"];
console.log(words.join("")); // 'JavaScriptisamazing'

Метод 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(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(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(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

Розпилення / Розбирання

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]

function foo(...arr){
console.log(arr);
}
foo(1,2,3);

Метод reduce(callback, initialValue) використовується для послідовної обробки кожного елемента масиву із збереженням проміжного результату.

1. 1-й параметр (обов’язковий) — колбек-функція, яка «опрацьовує» кожен елемент масиву;
2. 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

1. Початкове значення акумулятора 0
2. перша ітерація колбек-функції 0 + 2 поверне 2
3. друга ітерація колбек-функції 2 + 7 поверне 9
4. третя ітерація колбек-функції 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() сортує елементи масиву. Повертає новий масив із відсортованими елементами

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() сортує елементи масиву. модифікує оригінальний масив

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().

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