array [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== array \ масив ======
===== обява масиву =====
<code>
const myArray1   =   [1, 2, 3]
</code>
<code>
const myArray2   = new Array(1,2,3,4)
</code>
===== створення массиву з іньшого типу змінної (Array.from)=====
<code>
let resslug =   'лпапг шгнеенгш щшгненгш';
let tempargs = Array.from(resslug );
</code>
===== Зміна значення в масиві =====
<code>
myArray2[2] = 'sddg'
</code>
===== Зміна розмірності масиву =====
не рекомендується змінювати розмірність руками
<code>
myArray.lenght = 4    
</code>
===== Додавання нового єлемента =====
==== по індексу ====
4 - наступний після останього індекса
<code>
myArray2[4] = true
</code>
==== push - у кінець ====
<code>
myArray2.push('dvdv')
</code>
<code>
myArray2.push('a','b','c','d')
</code>
==== unshift - У початок ====
<code>
myArray2.unshift('dvdv')
</code>
==== flat (вирівеювання рівня вкладенності массиву) ====
<code>
myArray.flat(2)
</code>
де **2** - кількість вкладень масива у масиві що треба перенести на 1й рівень вкладенності.
замість **2** можна викоритовувати **infinity**
===== Видалити елемент масиву =====
==== Останній елемент ====
<code>
myArray2.pop()
</code>
**pop** повертає останній видалений елемент
<code>
const lastpos = myArray2.pop()
</code>
==== Перший елемент ====
<code>
myArray2.shift()
</code>
**shift** повертає перший видалений елемент
<code>
const lastpos = myArray2.shift()
</code>
==== З індексу кількість ====
<code>
myArray.splice(fromIndex,numberToDelete)
</code>
===== Обхід елементів масива =====
==== Перебираючі методи ====
У більшості методів колбек-функції, які є їхнім аргументом, отримують три наступні параметри:
  * першим параметром буде значення поточного елемента масиву currentValue
  * другим параметром буде індекс поточного елемента масиву index
  * третім параметром буде посилання на сам вихідний масив array
<code>
array.method((item, idx, arr) => {
  // логіка, яка буде виконуватися на кожній ітерації
});
</code>
==== forEach (без повернення значень) ====
**forEach** - перебирає всі єлементи масива і для кожного виконує парадаваєму анонімну функцію. Нічого не повертає і не змінює
<code>
const myArray   =  [1, 2, 3]
myArray.forEach(elementOfMassiv=>console.log(elementOfMassiv*2))
</code>
<code>
// Стрілочна анонімна функція
numbers.forEach((number, index) => {
  console.log(`Index ${index}, value ${number}`);
});
</code>
<code>
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}`);
});
</code>
==== map (з поверненням значень) ====
**map** - перебирає всі єлементи масива і для кожного виконує парадаваєму анонімну функцію + повертає значення у новий массив
<code>
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"]
</code>
  - коротка стрілочна функція
<code>
const myArray   =  [1, 2, 3]
const myArray2 = myArray.map(elementOfMassiv=>elementOfMassiv*3)
</code>
  - повна стрілочна функція
<code>
const myArray   =  [1, 2, 3]
const myArray2 = myArray.map((elementOfMassiv)=>{
return elementOfMassiv*3
})
</code>
  - анонімний функціональний вираз
<code>
const myArray   =  [1, 2, 3]
const myArray2 = myArray.map(function (elementOfMassiv){
return elementOfMassiv*3
})
Функція має повертати масив імен усіх користувачів (властивість name) із масиву users.
</code>
**Приклад: Функція має повертати масив імен усіх користувачів (властивість name) із масиву users.**
<code>
const getUserNames = (array) => {
  const newArray = [];

  array.forEach(element => {
    newArray.push(element.name);
  });

  return newArray;
};
</code>
==== flatMap ====
Метод flatMap(callback) аналогічний методу map(), але застосовується у випадках, коли результат — це багатовимірний масив, який необхідно «розгладити». Розгладжує тільки один рівень.
<code>
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"];
</code>
==== через цикл for of ====
<code>
for (let myElem of array){
console.log(myElem);
}
</code>
==== через цикл for in ====
не рекомендується
<code>
for (const key in myArray){
console/log(myArray[key])}
</code>
===== slice - повертає новий масив, що містить копію частини вихідного масиву =====
slice(begin, end) повертає новий масив, що містить копію частини вихідного масиву, не змінюючи його. Копія створюється від індексу begin до, але не включаючи індекс end.
begin - ідекс
<code>
const planets = ["Earth", "Mars", "Venus", "Jupiter", "Saturn"];
console.log(planets.slice(0, 2)); // ['Earth', 'Mars']
</code>
===== splice =====
Змінює вміст масиву, видаляючи або замінюючи існуючі елементи.
<code>
array.splice(З_якого_індекса, кількість_на_видалення,замість_вставити_єл1,замість_вставити_єл2,.... );
</code>
<code>
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"]
</code>

===== indexOf - визначення індексу першого входження елемента elem у масиві (з початку)=====
використовується для визначення індексу першого входження елемента elem у масиві. Він повертає індекс елемента, якщо він знайдений, або -1, якщо елемент не знайдений. Метод indexOf() виконує сувору рівність (===) при порівнянні елементів.
<code>
const clients = ["Mango", "Ajax", "Poly", "Kiwi", "Poly"];
console.log(clients.indexOf("Poly")); // 2
console.log(clients.indexOf("Monkong")); // -1
</code>
===== lastIndexOf - визначення індексу першого входження елемента elem у масиві (з кіньця) =====

===== length - длина масиву =====
<code>
Array.length
</code>
===== includes =====
Перевіряє чи є якесь значення у масиві і поверта true або false
<code>
const array1 = [1, 2, 3];

console.log(array1.includes(2));
// Expected output: true
</code>
===== split (розділяє строку) =====
Перетворює строку на масив. Символ-показник розділення затираєтся.
<code>
const str = 'The quick brown fox jumps over the lazy dog.';

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

===== Обїеднання масивів =====
==== concat - для об'єднання двох або більше масивів ====
не вважаючи на кількість массивів всередині - усе одно буде одомірний массив
<code>
const firstArray = ["Mercury", "Venus"];
const secondArray = ["Mars", "Jupiter"];
const result = firstArray.concat(secondArray);

console.log(result); // ["Mercury", "Venus", "Mars", "Jupiter"];
</code>
<code>
const result = [].concat(array1, array2, array3);
</code>

==== join - Обеднання єлементів масива у строку ====
**join** - join(delimiter) дозволяє об'єднати елементи масиву в рядок. У результуючому рядку елементи будуть розділені символом або групою символів, зазначених у delimiter.
<code>
const words = ["JavaScript", "is", "amazing"];
console.log(words.join("")); // 'JavaScriptisamazing'
</code>


===== filter - відбір в масиві=====
Метод filter(callback) використовується для єдиної операції — фільтрації масиву. Під фільтрацією масиву мається на увазі відбір усіх елементів з колекції за певним критерієм.
  * Не змінює оригінальний масив.
  * Поелементно перебирає оригінальний масив.
  * Повертає новий масив.
  * Додає в масив, що повертається, елементи, які задовольняють умову колбек-функції.
  * Якщо колбек повернув true, елемент додається в масив, що повертається.
  * Якщо колбек повернув false, елемент не додається в масив, що повертається.
  * Якщо жоден елемент не задовольнив умову, повертає порожній масив.

<code>
array.filter((element, index, array) => {
  // Тіло колбек-функції
});
</code>
після return пишемо саме умову по котрій треба умова відбору
<code>
const result = myArray.filter((elem, inx, array)=> {
return elem>0&&elem > 15;
});
</code>
<code>
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 не змінився
</code>
===== find - пошук в масиві=====
Метод find(callback) дозволяє знайти і повернути перший відповідний елемент, що задовольняє умову, після чого перебирання масиву припиняється. Тобто він, на відміну від методу filter(callback), шукає до першого збігу.
  * Не змінює оригінальний масив
  * Поелементно перебирає оригінальний масив
  * Повертає перший елемент, що задовольняє умову, тобто коли колбек повертає true
  * Якщо жоден елемент не задовольнив умову, тобто для всіх елементів колбек повернув false, метод повертає undefined
<code>
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
</code>
===== every =====
Метод every(callback) перевіряє, чи задовольняють усі елементи умову колбек-функції.
<code>
// Усі елементи більші або дорівнюють нулю? - так
[1, 2, 3, 4, 5].every((value) => value >= 0); // true

// Усі елементи більші або дорівнюють нулю? - ні
[1, 2, 3, -10, 4, 5].every((value) => value >= 0); // false
</code>
<code>
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
</code>
===== some =====
Метод some(callback) перевіряє, чи задовольняє хоча б один елемент умову колбек-функції.
<code>
// Чи є хоча б один елемент, що більший або дорівнює нулю? - так
[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
</code>
===== ...spread розбирання массивів =====
Розпилення / Розбирання 
<code>
const lastWeekTemps = [14, 25, 11];
console.log(...lastWeekTemps );
</code>
Розпилили і зібрали новий масив
<code>
const lastWeekTemps = [14, 25, 11];
const currentWeekTemps = [23, 17, 18];
const allTemps = [...lastWeekTemps, ...currentWeekTemps];
console.log(allTemps); // [14, 25, 11, 23, 17, 18]
</code>
===== ...rest збирання невикористані єлементів  =====
<code>
function foo(...arr){
console.log(arr);
}
foo(1,2,3);
</code>

===== reduce =====
Метод reduce(callback, initialValue) використовується для послідовної обробки кожного елемента масиву із збереженням проміжного результату. 
  - 1-й параметр (обов’язковий) — колбек-функція, яка "опрацьовує" кожен елемент масиву;
  - 2-й параметр (не обов’язковий) — initialValue початкове значення акумулятора.

Тобто метод reduce() використовується, коли необхідно взяти «багато» і привести до «одного». У повсякденних завданнях його застосування зводиться до роботи з числами.

<code>
array.reduce((AccumValue, element, index, array) => {
  // Тіло колбек-функції
}, initialValue);
</code>
  * Не змінює оригінальний масив
  * Поелементно перебирає оригінальний масив
  * Повертає все, що завгодно (об’єкт, масив, рядок, число тощо)
  * Може замінити функціонал будь-якого іншого перебираючого методу масиву та навіть їх комбінацію

<code>
const total = [2, 7, 3].reduce((AccumValue, number) => {
  return AccumValue + number;
}, 0);

console.log(total); // 12
</code>
  - Початкове значення акумулятора 0
  - перша ітерація колбек-функції 0 + 2 поверне 2
  - друга ітерація колбек-функції 2 + 7 поверне 9
  - третя ітерація колбек-функції 9 + 3 поверне 12

Приклад
<code>
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;
</code>
===== Сортування масссивву =====
==== toSorted  ====
Метод toSorted() сортує елементи масиву. Повертає новий масив із відсортованими елементами
<code>
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})
</code>
<code>
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]
</code>
==== sort====
Метод sort() сортує елементи масиву. модифікує оригінальний масив
<code>
const array = [1, 5, 3, 2, 4];

// sort() модифікує оригінальний масив
array.sort();
console.log(array); // [1, 2, 3, 4, 5]
</code>
==== Свій порядок сортування чисел ====
Для зазначення свого порядку сортування методу toSorted(compareFunction) потрібно передати колбек-функцію з двома параметрами.
Це функція порівняння (compare function), порядок сортування залежить від її результату. Метод toSorted() буде викликати її для двох довільних елементів.
==== Сортування за зростанням ====
<code>
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]
</code>
==== Сортування за спаданням ====
<code>
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]
</code>
==== localeCompare ====
Для сортування рядків в алфавітному порядку, за зростанням або спаданням, використовується метод рядків localeCompare().
<code>
"a".localeCompare("b"); // -1
"b".localeCompare("a"); // 1
"a".localeCompare("a"); // 0
"b".localeCompare("b"); // 0
</code>
<code>
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" ]
</code>