Назад Зміст

Об'єкт Array

Об'єкт Array призначений для зберігання масивів даних. Масив – це впорядкований набір елементів.

Доступ до окремого елемента здійснюється на ім'я та індекс (номер). Нумерація елементів JavaScript починається з нуля.

Оголошення

Існує два варіанти синтаксису для створення порожнього масиву:

  1. arr = new Array();
  2. arr = [];

Практично завжди використовується другий варіант синтаксису.

У дужках ми можемо вказати початкові значення елементів:

Вивести масив цілком можна за допомогою alert або console.log.

Результат:

Властивість length

За допомогою цієї властивості можна визначити загальну кількість елементів масиву.

Об'єкт Array - динамічний масив

Довжина масиву заздалегідь не задається. Наприкінці масиву можна додати ще елементи.

У цьому прикладі спочатку виводиться число 4, так як присвоєно значення чотирьом елементам масиву. Тому довжина масиву дорівнює 4.

Потому виводиться число 4, так надали значення ще одному елементу і довжина масиву стала дорівнює 5.

Для масиву Birds доданий відразу п'ятий (було три), тепер довжина дорівнює шести.

Заповнення масиву

Масив можна заповнювати не так на етапі його створення, та був. У наступному прикладі я спочатку оголосив, що змінна arr - масив, а потім заповнив його даними: 

var arr = []
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
alert(arr) //за допомогою alert виводимо вміст масиву

Також можна надходити і з об'єктами: 

var obj = {};
obj['Коля'] = 100;
obj['Вася'] = 200;
obj['Петя'] = 300;

Щоб пройтися елементами масиву:



for (let i=0; i – працює швидше за все, сумісний зі старими браузерами.

for (let item of arr) – сучасний синтаксис лише для значень елементів (до індексів немає доступу).
- ніколи не використовуйте для масивів.

Методи масивів

Масиви надають безліч методів.

Додавання/видалення елементів

  1. arr.push(...items) – додає елементи в кінець,
  2. arr.pop() – витягує елемент із кінця,
  3. arr.shift() – витягує елемент із початку,
  4. arr.unshift(...items) – додає елементи на початок.

Пошук у масиві

Методи arr.indexOf, arr.lastIndexOf та arr.includes мають однаковий синтаксис і роблять по суті то те саме, що й їх рядкові аналоги, але працюють з елементами замість символів:

  1. arr.indexOf(item, from) шукає item, починаючи з індексу from, і повертає індекс, на якому було знайдено шуканий елемент, інакше -1.
  2. arr.lastIndexOf(item, from) – те саме, але шукає справа наліво.
  3. arr.includes(item, from) – шукає item, починаючи з індексу from, та повертає true, якщо пошук успішний.
  4. find і findIndex-let result -
    arr.find(function(item, index, array) {
    // якщо true - повертається поточний елемент та перебір переривається
    // якщо всі ітерації виявилися помилковими, повертається undefined
    });
    Функція викликається по черзі для кожного елемента масиву:
    item – ще один елемент.
    index – його індекс.
    array - сам масив.
    Якщо функція повертає true, пошук переривається та повертається item. Якщо нічого не знайдено, повертається невизначений.

Методи використовують суворе порівняння ===. Отже, якщо шукаємо false, він знаходить саме false, а чи не нуль.

Якщо ми хочемо перевірити наявність елемента, і немає необхідності знати його точний індекс, тоді переважним є arr.includes.

Крім того, дуже незначною відмінністю includes є те, що він правильно обробляє NaN на відміну від indexOf/lastIndexOf

Метод arr.forEach

Метод arr.forEach дозволяє запускати функцію кожного елемента масиву.

Його синтаксис:

arr.forEach(function(item, index, array) {
// ... робити щось з item
});

Приклади

var arr = []; //створюємо масив arr

Поки що створений нами масив не містить жодних даних. Заповнимо його назвами днів тижня: 

var arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];

Кожне значення списку, який ми записали до масиву (у нашому випадку щодня тижня), називається елементом масиву.

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

Зверніть увагу на те, що назви днів тижня є рядками і тому взяті в лапки. Крім рядків у масиві можна зберігати числа, і їх у лапки ми не беремо: 

//У масиві можна зберігати як рядки, так і числа:
var arr = ['пн', 256, 'ср', 34, 38, 'сб', 95];

Як вивести окремий елемент масиву

Припустимо, ми хочемо вивести на екран середовище за допомогою складеного масиву днів тижня.

Робиться це так: потрібно після змінної масиву (у нашому випадку arr) написати квадратні дужки [ ], а в них вказати порядковий номер елемента, який ми хочемо вивести: arr[3]. Здавалося б, що порядковий номер середовища – це три, але це не так. Тому що у програмуванні нумерація починається з нуля. Тому 0 – це понеділок, 1 – це вівторок, а 2 – це середа.

Приклад 1

//Виведемо слово 'СР':
var arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];
alert(arr[2]);

Приклад 2. Заповнення масиву випадковими числами.

Заповнити одновимірний цілий масив випадковими числами з (10;20) і вивести на екран.

Приклад 3

Даний одновимірний цілісний масив. Знайти у ньому першу парне число та його індекс. Якщо парних чисел немає, вивести повідомлення.

Асоціативні масиви (об'єкти)

У попередньому прикладі, щоб звернутися до потрібного елемента масиву, ми писали у квадратних дужках його порядковий номер (Нумерація починається з нуля, якщо ви вже забули). Ці порядкові номери називаються ключами масиву.

Тобто ми отримували значення елемента масиву за його ключем.

У нашому випадку JavaScript сам визначав ключі для елементів - це були порядкові номери. Іноді це може виявитися незручним - Наприклад, якщо ми хочемо вивести на екран назву третього дня тижня (середу), то повинні написати у квадратних дужках цифру 2, а чи не 3.

Тому в JavaScript можна вказати ключі у явному вигляді - так, як нам потрібно. Робиться це за допомогою об'єктів (в інших мовах програмування вони називаються асоціативними масивами). Об'єкти створюються за допомогою фігурних дужок { }, всередині яких пишуться елементи цього об'єкта у форматі ключ: значення.

Давайте зробимо так, щоб понеділок мав ключ 1, а не нуль, як було раніше (і всім іншим дням додамо одиницю):

Приклад 4

//Вкажемо ключі у явному вигляді:
var obj = {1: 'пн', 2: 'вт', 3: 'ср', 4: 'чт', 5: 'пт', 6: 'сб', 7: 'вс'};
alert(obj[1]); //виведе 'пн'

Синтаксис тут такий: ключ, потім йде двокрапка :, а потім значення.

Ключі не обов'язково мають бути числами, вони можуть бути і рядками. Зробимо масив, у якому ключами будуть імена працівників, а елементами – їх зарплати:

Приклад 5

//Масив (об'єкт) працівників:
var obj = {'Коля': 200, 'Вася': 300, 'Петя': 400};

Дізнаємося зарплату Васі: 

var obj = {'Коля': 200; 'Вася': 300;
alert(obj['Вася']); //Виведе 300

Крім того, лапки навколо рядкових ключів можна і не ставити: 

var obj = {key1: 200, key2: 300, key2: 400};
alert(obj['key1']); //виведе 200

Проте, такі ключі накладаються обмеження: вони не повинні починатися з цифри, не повинні мати символу дефісу або символу пробілу всередині.

Якщо у вас є такий ключ - просто візьміть його в лапки і все буде ок.

Властивості об'єкта

Існує й інший спосіб звернутися до елемента об'єкта - Використовуючи звернення не через квадратні дужки, а через точку: не obj['key'], а obj.key.

У цьому випадку кажуть, що ми звертаємося до властивості об'єкт.

Дивіться приклад: 

var obj = {key1: 200, key2: 300, key2: 400};
alert(obj.key1); //Виведе 200

При такому способі звернення до назв властивостей (тобто ключів) накладаються обмеження: вони не повинні починатися з цифри, не повинні мати символу дефісу або символу пробілу всередині.

Якщо у вас є такий ключ – використовуйте звернення через квадратні дужки.

Як ще можна створити масив або об'єкт

Замість { } та [ ] можна користуватися Object() та Array() відповідно (це просто альтернативний синтаксис).

Давайте створимо об'єкт другим синтаксисом:

var obj = new Object(key1: 200, key2: 300, key2: 400); alert(obj['key1']); //Виведе 200

Давайте створимо масив другим синтаксисом: 

var arr = Array('пн', 256, 'ср', 34, 38, 'сб', 95);

Створення об'єкта через { } і через Object() еквівалентно, ви можете користуватися тим способом, який вам зручніше.

А ось із масивом не все так просто. Різниця між ними проявляється у випадку, якщо ви хочете зробити масив, що складається з одного елемента, який буде цілим числом, ось так: 

var arr = Array(10);

В цьому випадку отримаємо не такий масив: 

var arr = [10];

А ось такий: 

var arr = [,,,,,,,,,];

Це буде масив, що складається з 10 порожніх елементів. (їх значення буде undefined), а не масив з одного елемента 10, як ми хотіли б.

Обчислювані властивості

Ми можемо використовувати квадратні дужки в літеральній нотації для створення обчислюваної властивості. 


let fruit = prompt("Який фрукт купити?", "apple");
let bag = {
             [fruit]: 5, // ім'я властивості буде взято зі змінної fruit
};
alert (bag.apple); // 5, якщо fruit="apple"

Сенс обчислюваної властивості простий: запис [fruit] означає, що ім'я властивості необхідно взяти зі змінної fruit. І якщо відвідувач введе слово "apple", то в об'єкті bag тепер лежатиме властивість{apple: 5} .

Багатовимірний масив

Елементи масиву можуть бути не тільки рядками та числами, а й масивами. Тобто у нас вийде масив масивів або багатомірний масив.

Давайте зробимо масив студентів students, який міститиме два підмасиви: студенти чоловічої статі та жіночої: 

//Багатомірний масив студентів:
var students = {
'boys': ['Коля', 'Вася', 'Петя'],
'girls': ['Даша', 'Маша', 'Ліна'],
};

Щоб вивести якийсь елемент із багатовимірного масиву, слід писати вже не одну пару [ ], а дві: students['boys'][0] – так ми виведемо 'Коля'.

Заповнення масивів

Давайте заповнимо масив десятьма іксами 'x'. Для цього скористаємося методом push: 

var arr = [];
for (var i = 0; i < 10; i++) {
	arr.push('x');
}

console.log(arr); //виведе ['x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x']

Давайте тепер заповнимо масив числами від 1 до 10: 

var arr = [];
for (var i = 1; i <= 10; i++) {
arr.push(i);
}

console.log(arr); //виведе [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Можна не використовувати push, а вказати ключі безпосередньо: 

var arr = [];
for (var i = 0; i < 10; i++) {
	arr[i] = 'x';
}

console.log(arr); //виведе ['x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x', 'x']
var arr = [];
for (var i = 0; i < 10; i++) {
	arr[i] = i + 1;
	}
console.log(arr); //виведе [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Переворот масиву

Давайте з масиву ['a', 'b', 'c', 'd', 'e'] зробимо ['e', 'd', 'c', 'b', 'a']. Для цього переберемо вихідний масив з кінця і запишемо його елементи до нового масиву - вони йдуть у зворотному порядку: 

var arr = ['a', 'b', 'c', 'd', 'e'];
var result = [];

for (var i = arr.length - 1; i >= 0; i--) {
	result.push(arr[i]);
}

console.log(result); //виведе ['e', 'd', 'c', 'b', 'a']

Переворот об'єкта

Давайте поміняємо ключі та значення в об'єкті, наприклад з {a: 1, b: 2, c: 3, d: 4, e: 5} зробимо {1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: ' e'}.

Для цього переберемо циклом for-in вихідний об'єкт і створимо у своїй новий об'єкт result. Ключами нового об'єкту зробимо елементи старого (це obj[key]), а значення нового об'єкта - ключі старого (це key): 

var obj = {a: 1, b: 2, c: 3, d: 4, e: 5};
var result = {};

for (var key in obj) {
	result[obj[key]] = key;
}

console.log(result); //виведе {1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: 'e'}

Підрахунок кількості елементів

Нехай даний масив ['a', 'b', 'c', 'a', 'a', 'b']. Давайте підрахуємо кількість однакових елементів у цьому масиві і зробимо результат як об'єкта {a: 3, b: 2, c: 1}.

Для вирішення зробимо об'єкт count з початковим значенням {a:0, b:0, c:0}. Перебиратимемо масив циклом і збільшуватимемо відповідне значення об'єкті count. Наприклад: якщо поточний елемент масиву - це 'a', то збільшимо count['a'] на одиницю - ось так: count['a']++.

Тільки замість 'a' слід підставляти поточний елемент масиву, так: count[arr[i]]++. Давайте напишемо остаточний код: 

var arr = ['a', 'b', 'c', 'a', 'a', 'b'];
var count = {a: 0, b: 0, c: 0};

for (var i = 0; i < arr.length; i++) {
	count[arr[i]]++;
}

console.log(count); //виведе {a: 3, b: 2, c: 1}

Підемо далі: те, що об'єкт count має початкове значення {a: 0, b: 0, c: 0} - не дуже зручно, адже ми зазвичай не знаємо, які елементи є у масиві.

Нехай об'єкт count формується автоматично таким чином: якщо такого елемента в count ні, йому слід присвоїти значення 1, і якщо є - просто збільшити значення на одиницю: 

var arr = ['a', 'b', 'c', 'a', 'a', 'b'];
var count = {};

for (var i = 0; i < arr.length; i++) {
	if (count[arr[i]] === undefined) {
		count[arr[i]] = 1;
	} else {
		count[arr[i]]++;
	}
}

console.log(count); //выведет {a: 3, b: 2, c: 1}

Перебір багатовимірних масивів

Нехай дано наступний двовимірний масив: 

var arr = [[1, 2, 3, 4, 5], [6, 7, 8], [9, 10]] ;

Давайте виведемо всі його елементи на екран. Для цього нам необхідно запустити два вкладені один в одного цикли: 

var arr = [[1, 2, 3, 4, 5], [6, 7, 8], [9, 10]];

for (var i = 0; i < arr.length; i++) {
	for (var j = 0; j < arr[i].length; j++) {
		alert(arr[i][j]);
	}
}

Назад Зміст