Розділ 5. Масиви

У попередніх розділах була розглянута робота з простими типами даних та об'єктами, проте що робити коли в нас є сукупність даних? Для цього в JS є масиви:

'use strict';

var arr = [1, 2, 3, 4]; 

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

'use strict';

var arr = [1, 2, 3, 4]; 

console.log(arr[0]);  // 1
console.log(arr[1]);  // 2
console.log(arr[2]);  // 3
console.log(arr[3]);  // 4
console.log(arr[4]);  // undefined

console.log(typeof arr); // object

Індекси записують у квадратні дужки та рахувати починають з 0, тому перший індекс буде [0]. В разі відсутності в масиві елемента за вказаним індексом буде повернуто значення undefined.

Як видно з прикладу тип масиву є object це спричинено тим, що по суті створюється об'єкт new Array і в нього вже передаються дані. Для того щоб точно знати чи дана змінна є об'єктом чи масивом :

'use strict';

var arr = [1, 2, 3, 4]; 
var obj = {};

console.log(Array.isArray(obj )); // false

console.log(Array.isArray(arr )); // true

Існують наступні особливості масиву:

1. У JS в масив можна одночасно передати дані різних типів (не рекомендується):

'use strict';

var arr = [12, 'asdsdf', true];

2. Для того щоб використати не масив, а самі значення - можна використати spread-оператор (ставлять три крапки перед назвою масиву) використовується як правило в ситуаціях коли невідомо скільки аргументів має бути передано у функцію:

'use strict';

var arr = [12, 2, -7];

console.log(arr); // [12, 2, -7]

console.log(...arr); // 12, 2, -7

// Використання у функції

function name (a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

name(arr);  // буде лише один аргумент - масив

name(...arr); // кожне значення масиву буде як окремий аргумент

3. Для того щоб дізнатись довжину масиву :

'use strict';

var arr = [12, 2, -7];

console.log(arr.length); // 3

4. Для того щоб додати новий елемент у масив :

'use strict';

var arr = [12, 2, -7];

arr.push(5);      // додає елемент в кінець масиву

console.log(arr); // [12, 2, -7, 5]

arr.unshift(1);      // додає елемент на початок масиву

console.log(arr); // [1, 12, 2, -7, 5]

5. Для того щоб видалити елемент масиву :

'use strict';

var arr = [12, 2, -7];

arr.pop();      // видаляє елемент з кінця масиву

console.log(arr); // [12, 2]

arr.shift();      // видаляє елемент з початку масиву

console.log(arr); // [2]

6. Для того щоб замінити елемент масиву використовують - splice( "індекс елементу", "кількість елементів, які видалять з масиву", "нові елементи" ) :

'use strict';

var arr = [1, 2, 3, 4, 5, 6];

// видалити 1 елемент з індексом 4 та на його місце поставити число 22
arr.splice(4, 1, 22);     

console.log(arr); // [1, 2, 3, 4, 22, 6]


// видалити 1 елемент з індексом 1 та на його місце поставити число 3 та слово "test"
arr.splice(1, 1, 3, "test"); 

console.log(arr); // [1, 3, "test", 3, 4, 22, 6]


// видалити 1 елемент з індексом 2
arr.splice(2, 1); 

console.log(arr); // [1, 3, 3, 4, 22, 6]

7. Для того щоб скопіювати частину масиву :

'use strict';

var arr = [1, 2, 3, 4, 5, 6];

var newArr = arr.slice(2, 5);     

console.log(newArr); // [3, 4, 5]

8. Для того щоб об'єднати масиви :

'use strict';

var arr = [1, 2, 3, 4, 5, 6];

var arr2 = [7, 8, 9];

var newArr = arr.concat(arr2);     

console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

9. Для того щоб перебрати масив по елементам використовують метод forEach, в який передають функцію з аргументом (назва елемента - el), а в тілі даної функції роблять вже відповідні дії (в даному випадку показати результат у консоль браузера):

'use strict';

var arr = [1, 2, 3, 4, 5, 6];

arr.forEach(function(el) {
    console.log(el);
});


// Ця ж функція у вигляді стрілочної функції

arr.forEach(el => console.log(el));      

10. Для пошуку у масиві :

'use strict';

var arr = [1, 2, 3, 4, 5, 6];

console.log(arr.indexOf(4));   // 3 - індекс елемента "4"

console.log(arr.lastIndexOf(4));   // теж саме проте пошук з кінця масиву

console.log(arr.includes(4));   // true - чи існує елемент "4"

// знайти елемент(один!!!) за певною умовою (елемент більше 3)
console.log(arr.find(el => el > 3));   

11. Для того щоб переформувати масив (замінити структуру елементів на інші на основі даних елементів) :

'use strict';

var arr = [{
    id: 4,
    name: 'test1'
}, {
    id: 1,
    name: 'test2'
}];

var newArr = arr.map(el => el.id);   // повернути масив, в якому лише id 

console.log(newArr); // [4, 1]

newArr.sort();       // сортування масиву

console.log(newArr); // [1, 4]

newArr.reverse();    // обернути масив

console.log(newArr); // [4, 1]

12. Для того щоб розділити рядок тексту на елементи масиву і потім з масиву зібрати рядок:

'use strict';

var text = "Hello world";

var arr = text.split(' ');

console.log(arr);             // ["Hello", "world"]

var newText = arr.join(' ');

console.log(newText);         // Hello world

Існує ще доволі багато методів для роботи з масивами, тому що дані з баз даних та інших джерел як правило зберігають у вигляді масиву і опрацьовують найрізноманітніші комбінації з ними.

Отож, ми розглянули доволі корисний інструмент - масиви. Навчились маніпулювати їх даними. У наступному розділі ми розглянемо, що таке умовні операції.