Масив у JavaScript часто використовується для зберігання структорованих даних.
Робота з масивами потребує таких операції як додавання, видалення, клонування і т.д.. Об'єкт Array має безліч методів для роботи з масивами.
- Операцій над масивами:
- створення масиву
- ітерація
- додати елементи
- заповнити
- видалити елементи
- очистити
- клонувати
- пошук
- фільтр
- перевірка
- нарізка
- об'єднання
- розгорнути
- сортувати
Створення масиву
Створення за допомогою оператора new.
var array=new Array();
var arr2=new Array('синій', 'жовтий', 'червоний');
Літеральний спосіб створення масиву.
var array=[];
var arr2=['синій', 'жовтий', 'червоний'];
Ітерація
Ітерація масиву це проходження масиву для отримання кожного елементу масиву.
Для проходження масиву у Javascript використовується цикл for, for..of, for...in.
var arr=['молоко', 'хліб', 'масло'];
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}
for(let key in arr){
console.log(arr[key]);
}
for(let value of arr){
console.log(value);
}
Також проходження масиву можна реалізувати за допомогою циклу while.
var arr=['молоко', 'хліб', 'масло'];
var i=0;
while(i<arr.length){
console.log(arr[i]);
i++;
}
У JavaScript є метод Array.forEach() який дозволяє виконати функцію для кожного елемента масиву:
var arr=['молоко', 'хліб', 'масло'];
arr.forEach(function(value, index){console.log(value);});
Ще одним способом проходження масиву є ітератори, для отримання ітератора є методи: Array.keys(), Array.values(), entries().
var arr=['молоко', 'хліб', 'масло'];
var intera=arr.values();
var result=intera.next();
while(result.done==false){
console.log(result.value);
result=intera.next();
}
Додати елементи
Щоб додати елементи на початок масиву використовується метод Array.unshift(), який додає одне або декілька значень.
var arr=['троянда'];
arr.unshift('орхідея','ромашка','тюльпани');
alert(arr); //['орхідея','ромашка','тюльпани','троянда']
Щоб додати елементи у кінець масиву використовується метод push(), який додає одне або декілька значень.
var arr=['молоко'];
arr.push('хліб');
alert(arr);
var arr=['троянда'];
arr.push('орхідея', 'ромашка', 'тюльпани');
alert(arr); //['троянда','орхідея', 'ромашка', 'тюльпани']
Ще одним з способів додати елемент у кінець масиву є присвоєння новому елементу значення.
var arr=['троянда'];
//arr.length=1 тобто arr[1]='орхідея'
arr[arr.length]='орхідея';
arr[arr.length]='ромашка';
arr[arr.length]='тюльпани';
alert(arr); //['троянда','орхідея', 'ромашка', 'тюльпани']
Щоб додати елементи у потрібному місці масиву можна скористатися методом splice().
var colors=['червоний', 'чорний'];
colors.splice(1,0, 'зелений');
alert(colors); //['червоний', 'зелений', 'чорний'];
Додати декілька значень:
var colors=['червоний', 'чорний'];
colors.splice(1,0, 'синій', 'жовтий');
alert(colors); //['червоний', 'синій', 'жовтий', 'чорний'];
Також можливе додавання елементів за допомогою оператора розширення .... Прицьому даний метод полягає створенні нового масиву на основі старого.
//додаємо у початок масиву
var arr=['1','2'];
arr=['3', ...arr]; //['3','1','2']
alert(arr);
//додаємо у кінець масиву
var arr2=['1','2'];
arr2=[...arr2, '3']; //['1','2','3']
alert(arr2);
Заповнити
Для заповнення масиву певним значенням є метод fill(), який заповнює весь масив або з вказаного індексу вказану кількість.
Заповнюємо весь масив значенням: -1.
var arr=[23, 14, 5.6, 8, 103];
arr.fill(-1);
console.log(arr); //[-1,-1,-1,-1,-1]
Заповнюємо масив значенням 0 з 1 індекса по 3:
var arr=[23, 14, 5.6, 8, 103];
arr.fill(0, 1, 3);
console.log(arr); //[23, 0, 0, 8, 103]
Заповнення масиву при створенні:
var arr=new Array(5).fill(0);
console.log(arr); //[0, 0, 0, 0, 0]
Заповнення масиву за допомогою метода from():
var arr=new Array(5);
arr=Array.from(arr, function(){return 0;});
console.log(arr); //[0,0,0,0,0]
Видалити елементи
Для видалення останього елемента з масиву є метод pop().
var arr=['один','два','три'];
arr.pop();
alert(arr); //['один', 'два']
Для видалення першого елемента з масиву є метод shift().
var arr=['один','два','три'];
arr.shift();
alert(arr); //['два','три']
Щоб видалити елемент за певним індексом використовуйте метод splice(), який видаляє з вказаного індекса вказану кількість елементів.
//видалення одного елемента
var arr=['1','2','3'];
arr.splice(1,1);
alert(arr); //['1','3']
//видалення трьох елементів
var arr2=['1','2','3','4','5'];
arr2.splice(1,3);
alert(arr2); //['1','5']
Видалити остані елементи масиву один або декілька також можна за допомогою зменшення length - довжини масиву.
var arr=['один','два','три'];
arr.length=arr.length-1;
alert(arr); //["один", "два"]
arr.length--;
alert(arr); //["один"]
var arr=['один','два','три'];
arr.length=arr.length-2;
alert(arr); //["один"]
Очистити
Очистити масив за допомогою метода splice().
var arr=['молоко', 'хліб', 'масло'];
arr.splice(0);
console.log(arr); //[]
Також можна очистити масив присвоївши довжині масиву length 0.
var arr=['молоко', 'хліб', 'масло'];
arr.length=0;
console.log(arr); //[]
Клонувати
При присвоєні зміній B за допомогою оператора присвоєння = зміної A яка містить масив, присвоюється посилання на A, а не сам масив. При змінені значення у B буде також змінено у A. Так як присвоюється посилання, а не сам масив.
var A=['один','два','три'];
var B=A;
//змінюємо значення у B
B[0]=1;
alert(A); //[1,'два','три']
alert(B); //[1,'два','три']
Створення копії масиву за допомогою створення нового масиву і оператора розширення ...
var A=['один','два','три'];
var B=new Array(...A);
B[0]=1;
alert(A); //['один','два','три']
alert(B); //[1,'два','три'];
var A=['один','два','три'];
var B=[...A];
B[0]=1;
alert(A); //['один','два','три']
alert(B); //[1,'два','три'];
Створення копії масиву за допомогою from().
var A=['один','два','три'];
var B=Array.from(A);
B[0]=1;
alert(A); //['один','два','три']
alert(B); //[1,'два','три']
Створення нової копії масиву (клонувати) за допомогою метода concat():
var A=['один','два','три'];
var B=[].concat(A);
B[0]=1;
alert(A); //['один','два','три']
alert(B); //[1,'два','три'];
var A=['один','два','три'];
var B=Array().concat(A);
B[0]=1;
alert(A); //['один','два','три']
alert(B); //[1,'два','три'];
Також є метод slice() який створює поверхневу (не глибоку) копію масиву. Не глибока копія копіює посилання на об'єкт.
var A=[{x:0},'один','два','три'];
var B=A.slice();
B[0].x='ноль'; //зміни відбудуться також у A
B[1]=1; //змінить лише у B
alert(JSON.stringify(A)); //['один','два','три']
alert(JSON.stringify(B)); //[1,'два','три']
Клонувати за допомогою метода filter():
var A=['один','два','три'];
var B=A.filter(function(){return true;});
B[0]=1;
alert(A); //['один','два','три']
alert(B); //[1,'два','три']
Клонувати за допомогою метода map():
var A=['один','два','три'];
var B=A.map(function(value){return value;});
B[0]=1;
alert(A); //['один','два','три']
alert(B); //[1,'два','три']
Клонування масиву за допомогою structuredClone():
var arr=['один','два','три'];
var copy_arr=structuredClone(arr);
arr[0]=1;
console.log(arr, copy_arr);
Пошук
Пошук по масиві за допомогою метода indexOf() який повертає індекс знайденого елемента.
var arr=['молоко', 'хліб', 'масло'];
var p=arr.indexOf('хліб');
alert(p); //1
Метод find() здійснює пошук за вказаною функцією і повертає значення якщо функція повертає true.
var arr=[3, 7, 25, 8];
//пошук числа у масиві яке кратне 5
var value=arr.find(function(e){return e%5==0;});
alert('у масиві число кратне 5: '+value);
Метод findIndex() так само приймає функцію для пошуку але повертає індекс знайденого елемента.
var arr=[3, 7, 25, 8];
//пошук числа у масиві яке кратне 5
var value=arr.findIndex(function(e){return e%5==0;});
alert('у масиві число кратне 5 за індексом: '+value);
Метод includes() перевіряє чи містить масив вказане значення і повертає true або false.
var arr=[3, 7, 25, 8];
var p=arr.includes(3); //true
if(p)
alert('знайдено число 3 у масиві');
else
alert('Не знайдено число 3 у масиві');
Фільтр
Метод filter() повертає новий відфільтрований масив елементів які пройшли фільтрацію.
var arr=[5, -4, 3, 14, -1, 0, 15];
var arrF=arr.filter(function(e){return e>0;});
console.log(arrF); // [5, 3, 14, 15]
Перевірка
Для перевірки чи проходять у масиві елементи певну умову є метод every(), в якому передається функція яка перевірятиме кожен елемент.
var arr=[25, 24, 29, 19, 30];
var m=arr.every(function(value){return value>18;});
if(m)
alert('У масиві всі числа більші 18');
else
alert('у масиві є числа менше - рівні 18');
Щоб перевірити чи хоча б один елемент з масиву проходить перевірку використовуйте метод some().
var arr=[25, 24, 29, 19, 30];
var m=arr.some(function(value){return value>26;});
if(m)
alert('У масиві хочаб один з елементів має число більше 26');
else
alert('у масиві немає числа більше 26');
Нарізка
Нарізка масиву це отримання певної частини масиву.
Метод slice() повертає поверхневу копію вказаної частини масиву.
var arr=['один','два','три','чотири'];
var b=arr.slice(1,3);
alert(b); //['два','три']
Отримання частини масиву за допомогою метода filter().
var arr=['один','два','три','чотири'];
var b=arr.filter(function(value,index){
return index>=1 && index<3;
});
alert(b); //['два','три']
Об'єднання
Для об'єднання масиву є метод concat().
var a=['молоко','масло','сир'];
var b=['хліб','маковник'];
var c=a.concat(b);
console.log(a);
console.log(b);
console.log(c); //[молоко", "масло", "сир", "хліб", "маковник"]
Також масиви можна об'єнати за доромогою оператора розширення ....
var a=['молоко','масло','сир'];
var b=['хліб','маковник'];
var c=[...a,...b];
console.log(a);
console.log(b);
console.log(c); //[молоко", "масло", "сир", "хліб", "маковник"]
Розгорнути
Якщо масив має вложений масив (багатовимірний масив) то його можна розгорнути у простий масив за допомогою метода flat().
var arr=[1,['2.1','2.2'],3,[['4.1.1','4.1.2'],['4.2.1','4.2.2']]];
var arr2=arr.flat(Infinity);
console.log(arr2); //[1, "2.1", "2.2", 3, "4.1.1", "4.1.2", "4.2.1", "4.2.2"]
Сортувати
Для сортування масиву є метод sort().
var mas=['Моршинська','Трускавецька','Поляно Квасова', 'Нафтуся','Олеська', 'Куяльник'];
mas.sort();
alert(mas);