Багатовимірні масиви JavaScript. Всі способи перебору масиву в JavaScript Звернення до елементів багатовимірного масиву javascript

останнє оновлення: 09.04.2018

Для роботи із наборами даних призначені масиви. Для створення масиву застосовується вираз new Array() :

Var myArray = новий Array();

Існує також більш короткий спосіб ініціалізації масиву:

Var myArray =;

У разі ми створюємо порожній масив. Але можна також додати до нього початкові дані:

Var people = ["Tom", "Alice", "Sam"]; console.log(people);

У цьому випадку в масиві myArray буде три елементи. Графічно його можна так:

Для звернення окремих елементів масиву використовуються індекси. Відлік починається з нуля, тобто перший елемент матиме індекс 0, а останній - 2:

Var people = ["Tom", "Alice", "Sam"]; console.log(people); // Tom var person3 = people; // Sam console.log(person3); // Sam

Якщо ми спробуємо звернутися до елемента за індексом більше розміру масиву, ми отримаємо undefined:

Var people = ["Tom", "Alice", "Sam"]; console.log(people); // undefined

Також за індексом здійснюється встановлення значень для елементів масиву:

Var people = ["Tom", "Alice", "Sam"]; console.log(people); // Tom people = "Bob"; console.log(people); // Bob

Причому на відміну від інших мов, як C# або Java, можна встановити елемент, який спочатку не встановлено:

Var people = ["Tom", "Alice", "Sam"]; console.log(people); // undefined - у масиві лише три елементи people = "Bob"; console.log(people); // Bob

Також варто зазначити, що на відміну від низки мов програмування JavaScript масивине є строго типізованими, один масив може зберігати дані різних типів:

Var objects = ["Tom", 12, true, 3.14, false]; console.log(objects);

spread-оператор

spread-оператор ... дозволяє взяти значення з масиву окремо:

Let numbers =; console.log(...numbers); // 1 2 3 4 console.log(numbers); //

spread-оператор вказується перед масивом. В результаті вираз ... номерів поверне набір чисел, але це буде не масив, а саме окремі значення.

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

Масиви можуть бути одновимірними та багатовимірними. Кожен елемент у багатовимірному масиві може бути окремим масивом. Вище ми розглядали одновимірний масив, тепер створимо багатовимірний масив:

Var numbers1 =; // одновимірний масив var numbers2 = [,]; // двовимірний масив

Візуально обидва масиви можна представити так:

Одновимірний масив numbers1

Щоб отримати окремий елементмасиву, також використовується індекс:

Var tomInfo = люди;

Тільки тепер змінна tomInfo представлятиме масив. Щоб отримати елемент усередині вкладеного масиву, нам треба використати його другу розмірність:

Console.log("Ім'я:" + people); // Tom console.log("Вік:" + people); // 25

Тобто якщо візуально двовимірний масив ми можемо подати у вигляді таблиці, то елемент people буде посилатися на комірку таблиці, яка знаходиться на перетині першого рядка та другого стовпця (перша розмірність – 0 – рядок, друга розмірність – 1 – стовпець).

Також ми можемо виконати присвоєння:

Var people = [["Tom", 25, false], ["Bill", 38, true], ["Alice", 21, false]]; people = 56; // привласнюємо окреме значення console.log(people); // 56 people = ["Bob", 29, false]; // привласнюємо масив console.log(people); // Bob

При створенні багатовимірних масивів ми не обмежені лише двовимірними, але також можемо використовувати масиви великих розмірів:

Var numbers =; numbers =; // тепер numbers - двовимірний масив numbers =; // Тепер numbers – тривимірний масив numbers = 5; // Перший елемент тривимірного масиву дорівнює 5 console.log(numbers);

У попередній статті ми поговорили про те, що таке і як з ним працювати. У цій статті ми поговоримо вже про багатовимірний масив.

Це масив, який має один або більше елементів, є також масивами. Залежно від глибини оголошення, зокрема він може називатися двовимірним масивом (2 рівні) або тривимірним масивом (3 рівні) або чотиривимірним (4 рівні) тощо.

Найпопулярніший після одномірного масиву, який найчастіше використовується це двомірний масив. Саме його, вивчимо докладніше.

Як бачите, елементи двовимірного масиву є одновимірними масивами. Якби ці одномірні масиви містили ще масиви, масив arr був би вже тривимірним.

Для прикладу давайте створимо три простих масивівта заповнимо їх даними. Першого ми заповнимо парними числами, другого заповнимо непарними числами, а третього якимись довільними даними.

//Оголошуємо три порожні масиви var evenNumbers = new Array(); //Змінна k - для індексів масиву evenNumbers var k = 0; var oddNumbers = новий Array(); //Змінна n - для індексів масиву oddNumbers var n = 0; var data = new Array("car", "plane", true, 89, "m"); //Заповнюємо масив evenNumbers, з парними числами for(var i = 1; i

Для того щоб подивитися, що знаходиться всередині масиву можна скористатися таким інструментом як console.

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

Console.log(oddNumbers);

Щоб побачити результат, необхідно відкрити консоль у браузері. У Google Chromeце робиться так: натискаємо правий клік миші на сторінці, і з контекстного менювибираємо останню опцію "Переглянути код", тобто інспектор. В англійській версії ця опція називається Inspect.

І з'явиться нижче панель інструментів розробника. У ній необхідно перейти у вкладку Console (Консоль).

Тепер для того, щоб створити двовимірний масив, необхідно оголосити його, і додати в ньому одномірні масиви, які створили вище.

//Оголошуємо двовимірний масив twoDimens, і заповнюємо його var twoDimens = new Array(evenNumbers, oddNumbers, data); console.log(twoDimens);

Подивимося в консоль вміст даного масиву.

перебір двовимірного масиву

Для початку навчимося, як звернеться до елементів двовимірного масиву.

Як і з одинарними масивами, звернення до елементів проводиться у разі їх індексам.

Наприклад давайте виведемо на екран, елемент з індексом 3 з масиву з непарними числами(oddNumbers). Індекс одновимірного масиву oddNumbers в двовимірному масиві 2Dimens дорівнює одиниці(1).

Document.write("Елемент з індексом 3 з масиву непарних чисел oddNumbers дорівнює: "+ twoDimens); // Елемент: 7

У масиві 2Dimens ми звертаємося до елемента з індексом 1. Елемент, який знаходиться під цим індексом, є масив oddNumbers. І в цьому масиві ми вже звертаємось до елемента з індексом 3, який є 7.

Тепер приступимо до самого питання як перебрати двовимірний масив.

Перебір двовимірного масиву здійснюється за допомогою подвійного циклу. Наприклад, зробимо перебір нашого масиву 2Dimens.

For(var i = 0; i< twoDimens.length; i++){ for(var j = 0; j < twoDimens[i].length; j++){ document.write("

Елемент з індексом "+i+" "+j+" дорівнює: "+twoDimens[i][j]+"

"); } }

У першому циклі ми робимо перебір самого масиву 2Dimens. У другому циклі ми вже робимо перебір самого елемента (масиву). Спочатку, змінна i дорівнює 0. Тому у другому циклі ми спочатку робимо перебір першого масиву evenNumbers, який має індекс 0. І вже всередині другого циклу ми звертаємось до елементів даного масиву. Таким чином: дваDimens[j]. Де j змінюється від 0 до довжини масиву evenNumbers.

Після перебору елементів з першого масиву, повертаємося до першого циклу, інкрементуємо змінну i, і переходимо до перебору вже другого масиву oddNumbers, який має індекс 1. І так робиться перебір кожного елемента двовимірного масиву 2Dimens.

Тепер подивимося на результат перебору:

Ось і все, про що я хотів розповісти в цій статті. Тепер Ви знаєте, як створити двовимірний масив, як звернеться до елементів двовимірного масиву та як перебрати двомірний масив. Сподіваюся, що було зрозуміло. Бажаю вам великих успіхів!

• I. Перебір реальних масивів
• Метод forEach і споріднені методи
• Цикл for
• Правильне використання циклу for...in
• Цикл for...of (неявне використання ітератора)
• Явне використання ітератора
• Використання способів перебору справжніх масивів
• Перетворення на справжній масив
• Зауваження щодо об'єктів середовища виконання

I. Перебір реальних масивів На Наразіє три способи перебору елементів цього масиву:

метод Array.prototype.forEach;

класичний цикл for;

«правильно» побудований цикл for...in.

Крім того, незабаром, з появою нового стандарту ECMAScript 6 (ES 6), очікується ще два способи:

цикл for...of (неявне використання ітератора);

явне використання ітератора.

1. Метод forEach та споріднені методи Якщо ваш проект розрахований на підтримку можливостей стандарту ECMAScript 5 (ES5), ви можете використовувати одне з його нововведень - метод forEach .

Приклад використання:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
У загальному випадку використання forEach потребує підключення бібліотеки емуляції es5-shim для браузерів, які не мають нативної підтримки цього методу. До них відносяться IE 8 і більше ранні версії, які досі де-не-де ще використовуються.

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

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

ForEach призначений для перебору всіх елементів масиву, але крім нього ES5 пропонує ще кілька корисних методів для перебору всіх або деяких елементів плюс виконання при цьому будь-яких дій з ними:

• every - повертає true, якщо для кожного елемента масиву колбек повертає значення, що приводиться до true.
• some-повертає true, якщо хоча б для одного елемента масиву колбек повертає значення, що приводиться до true.
• filter - створює новий масив, що включає елементи вихідного масиву, для яких колбек повертає true .
• map - створює новий масив, що складається зі значень колбеком, що обертаються.
• reduce - зводить масив до єдиного значення, застосовуючи колбек по черзі до кожного елемента масиву, починаючи з першого (може бути корисним для обчислення суми елементів масиву та інших підсумкових функцій).
• reduceRight – працює аналогічно reduce, але перебирає елементи у зворотному порядку.

2. Цикл for Старий добрий for рулит:

Var a = ["a", "b", "c"]; var index; for (index = 0; index< a.length; ++index) { console.log(a); }
Якщо довжина масиву незмінна протягом усього циклу, а сам цикл належить критичній у плані продуктивності ділянці коду (що малоймовірно), то можна використовувати «оптимальнішу» версію forіз зберіганням довжини масиву:

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index< len; ++index) { console.log(a); }
Теоретично цей код має виконуватися трохи швидше, ніж попередній.

Якщо порядок перебору елементів не важливий, то можна піти ще далі в плані оптимізації та позбутися змінної для зберігання довжини масиву, змінивши порядок перебору на зворотний:

Var a = ["a", "b", "c"]; var index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
Тим не менш, у сучасних движках JavaScript подібні ігри з оптимізацією зазвичай нічого не означають.

3. Правильне використання циклу for ... in Якщо вам порадять використовувати цикл for ... in, пам'ятайте, що перебір масивів - не те, для чого він призначений. Попри поширену оману цикл for...in перебирає не індекси масиву, а перераховані властивості об'єкта.

Тим не менш, у деяких випадках, таких як перебір розріджених масивів , for ... in може виявитися корисним, якщо тільки дотримуватися при цьому запобіжних заходів, як показано в прикладі нижче:

// a - розріджений масив var a =; a = "a"; a = "b"; a = "c"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key