Багатовимірні масиви в javascript і кілька способів їх сортування. Двовимірний масив в JavaScript двовимірний масив робота зі стовпами js

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

Припустимо, що змінна matrix являє собою масив масивів цілих чисел. Кожен з елементів matrix [j] є масивом чисел. Для звернення до окремого числа використовуємо запис: matrix [j] [k].

Приклад. Використовуємо для створення таблиці множення двомірний масив.

var matrix = new Array (10); // в матриці 10 рядків

for (var j = 0; j< matrix.length; j++)

matrix [j] = new Array (10); // d кожному рядку створили 10 стовпців

for (var row = 0; row< matrix.length; row++) {

for (col = 0; col< matrix .length; col++) {

matrix = row * col; // заповнення елементів масиву

var rezult = matrix; // результат множення 24

Типове використання двомірного масиву в JavaScript - створення масиву опцій призначеного для користувача меню. Скажімо, деяким з опцій головного меню відповідають опції розкривається підменю. Створимо масив, у якого довжина відповідає числу опцій головного меню. Елементами цього масиву будуть масиви найменувань опцій відповідних їм підміню.

mеnu = nеw Аrrаy ();

mеnu = nеw Аrrаy ( "Опція 1.1", "Опція 1.2", "," Опція 1.3 ");

mеnu = nеw Аrrаy ( "Опція 2.1", "Опція 2. 2");

mеnu = nеw Аrrаy ( "Опція 3.1", "Опція 3.2", "Опція 3.3", "Опція 3.4");

Для звернення до 1-ї опції 2-го підміню, потрібно написати:

menu // значення дорівнює "Опція 2.1";

Змінимо конструкцію масиву, щоб він містив і назви опцій головного меню, і опцій підменю:

mеnu = nеw Аrrау ()

menu = nеw Аrrау ( "Меню1", "Меню2", "МенюЗ");

menu = nеw Аrrау ();

menu = nеw Аrrау ( "Опція 1.1". "Опція 1.2", "Опція 1.3");

menu = nеw Аrrау ( "Опція 2.1", "Опція 2. 2");

menu = nеw Аrrау ( "Опція 3.1", "Опція 3. 2", "Опція З.3", "Опція 3.4");

menu // значення дорівнює "Меню2"

menu // значення дорівнює "Меню3"

menu // значення дорівнює "Опція 2.1"

menu // значення дорівнює "Опція 3.2"

Методи роботи з масивами

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

join () -метод, що перетворює кожен з елементів масиву в рядок і об'єднує їх. Як аргумент методу можна вказувати необов'язкову рядок, призначену для поділу окремих елементів в підсумковому рядку. Якщо роздільник й вказати, то для поділу за замовчуванням використовується кома.

var arr =; // заданий масив з трьох елементів

var str = arr.join (); // значення str одно "12,23,38"

str = arr.join ( ";"); // str == "12; 23; 38"

Як вже зазначалося раніше, метод Array.join () є зворотним по відношенню до строковому методу String.split (), розбиває рядки на елементи масиву.

reverse () -метод, що змінює порядок розташування елементів у масиві на протилежний. Даний метод не створює нового масиву, а змінює їх порядок у вихідному масиві.

var arr = nеw Аrrау (1,2,3); // arr = 1, arr = 2, arr = 3

arr.reverse (); // arr = 3, arr = 2, arr = 1

var str = arr.jоin (); // str == "3,2,1"

sort () -метод, сортують елементи масиву на місці і повертає відсортований масив. Якщо метод sort () викликати без вказівки аргументів, він буде здійснювати сортування елементів масиву за алфавітом, для виконання порівняння при необхідності перетворюючи їх тимчасово в строкові значення.

var arr = nеw Аrrаy ( "bаnаnа", "сhеrrу", "Аррlе");

var str = arr.join ( ","); // str == "Аррlе, bаnаnа, сhеrrу"

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

Для того, щоб здійснити сортування не в алфавітному порядку, а якомусь іншому, передають методу sort () як аргумент функцію порівняння, завдання якої є вказівки правила, за яким один з двох її аргументів буде в відсортованому списку розташовуватися раніше. Якщо другому повинен передувати перший аргумент, функція порівняння повинна повертати від'ємне значення. Якщо в відсортованому масиві перший аргумент повинен слідувати за другим, то функція повинна повертати позитивне число. Функція порівняння повинна повертати 0, якщо два значення є еквівалентними, тобто їх порядок не важливий. Приклад.

Зробимо сортування в числовому порядку.

var arr =;

arr.sort (); // в алфавітному порядку: 11111, 2222, 333, 44

arr.sort (function (first, second) (//

return first - second; )); // Числовий порядок: 44, 333, 2222, 11111

У цьому фрагменті коду зручно використовувати функціональний літерал, так як функція порівняння буде викликатися один раз і немає необхідності присвоювати їй ім'я.

Визначаючи інші функції сортування, можна здійснювати найрізноманітніші способи сортування.

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

var arr =;

arr.соncаt (4, 5) // результат

arr. соncаt (); // результат

arr. соncаt (,) // результат

arr. соncаt (4,]) // результат]

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

Якщо вказати єдиний аргумент, в повернутому масиві будуть міститися елементи від позиції, яка визначається аргументом, і до кінця масиву. Негативний аргумент вказує номер елемента масиву з кінця масиву.

var arr =;

arr.sliсе (0,3); // поверне

arr. sliсе (3); // поверне

arr. sliсе (1, -1); // поверне

arr. sliсе (-3, -2); // поверне

splice () -універсальний метод, який може бути використаний і для додавання, і для видалення елементів масиву, або для обох операцій одночасно. В результаті роботи методу вихідний масив змінюється.

У методі splice () перший аргумент вказує індекс масиву, з якого почнеться видалення і / або вставка, другий аргумент вказує кількість видаляються елементів. Якщо опустити другий аргумент, то будуть видалені елементи масиву, починаючи з позиції, зазначеної першим аргументом методу, і до кінця масиву. Повертає метод splice () масив віддалених елементів.Якщо другим аргументом буде значення 0, метод поверне порожній масив.

var arr =;

arr.splice (4); // поверне; arr стане дорівнює

arr.splice (1,2); // поверне; arr стане дорівнює

Після двох аргументів методу splice (), які задають підлягають видаленню елементи масиву, можуть слідувати в будь-якій кількостідодаткові аргументи, що задають вставляються в масив елементи, починаючи з індексу, заданого першим аргументом методу.

var arr =;

arr.splice (2,0, "ab", "cd"); / * Поверне; arr стане дорівнює * /

arr.splice (2,2,, 3); / * Поверне [ "ab", "cd"]; arr стане дорівнює, 3,33,44,55] * /

Слід враховувати той факт, що метод splice () аргументи-масиви не розбивати на окремі вставляються елементи, а вставляє сам масив.

push () і pop () -методи, що дозволяють використовувати масиви як стеки. Метод push () додає в кінець масиву нові елементи і повертає нову довжину масиву. Метод pop () видаляє останній елемент в масиві і повертає в якості результату роботи віддалене значення.

Обидва методи змінюють вихідний масив. При використанні в коді комбінації методів push () і pop () в JavaScript можна за допомогою масиву створити стек з правилом обслуговування: «першим увійшов - останнім вийшов».

vаr stасk =; // порожній стек

stасk.push (1,2); // масив: поверне 2

stасk. рор (); // масив: поверне 2

stасk.push (3); // масив: поверне 2

stасk.рор (); // масив: поверне 3

stасk.push (); // масив:] поверне 2

stасk. рор () // масив: поверне

stасk. рор (); // масив: поверне 1

unshift () і shift () -методи, що працюють майже так само, як push () і pop (), але вони вставка і видалення елементів здійснюється не в кінці масиву, а на початку.

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

var arr =; // arr:

arr.unshift (1); // arr: поверне 1

arr.unshift (22); // arr: поверне 2

arr.shift (); // arr: поверне 22

arr.unshift (3,); // arr:, 1] поверне 3

arr.shift (); // arr: [, 1] поверне 3

arr.shift (); // arr: поверне

arr.shift (); // arr: поверне 1

При виклику методу unshift () з декількома аргументами ці аргументи вставляються все відразу, а не по одному, як це відбувається в методі splice (). Тобто в підсумковому масиві значення будуть розташовані в такому ж порядку, в якому були записані в списку аргументів при виклику методу.

toString () і toLocaleString ()- методи, що перетворюють кожен з елементів масиву в рядок і виводять список отриманих рядків через кому. Метод toString (), як уже зазначалося, є у будь-якого об'єкта в JavaScript, і у масиву в тому числі. Зверніть увагу, що в результаті роботи методів навколо значень масиву не залишається ні квадратних дужок, ні якихось інших роздільників.

ToString () // поверне "1,2,3"

[ "А", "b", "с"]. TоString () // поверне "а, b, c"

] .TоString () // поверне "1,2, з"

Метод toString () поверне таку ж рядок, як і метод join () в разі його виклику без параметрів.

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

Приклад 1. Створення циклічного банера (слайд-шоу).

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

зміна зображень

Приклад 2. Висновок випадкового афоризму на сторінці. Випадковий афоризм з'являється при кожному оновленні сторінки.

Випадковий афоризм на сторінці

об'єкт Date

В JavaScript об'єкт Date призначений для роботи зі значеннями дати і часу. Створюється екземпляр об'єкта конструктором Date () з використанням оператора new.

var nеw_day = new Date ();/ * Створено екземпляр об'єкта, в якому зберігається інформація про поточний час і дату (зчитуються показання системного часу комп'ютера). * /

var Christmas = new Date (2016, 11, 25);/ * Створено екземпляр об'єкта з датою Різдва. Номери місяців відраховуються з нуля, тому грудень за порядком має номер 11 * /

Методи, визначені для об'єкта Date (), дозволяють встановлювати і зберігати різні значення часу і дати, виконувати над ними ряд дій з використанням або локального часу, або часу за Гринвічем (GMT).

Christmas.setFullYear (xmas.getFullYear () + 1);/ * Дата Різдва в наступному році * /

var wееkdау = Christmas.getDay ();// День тижні Різдва.

document.write ( "Сьогодні:" + nеw_day.toLocaleString ());// Строкове значення поточної дати і часу.

В JavaScript для об'єкта Date () визначені функції (викликаються не через об'єкт Date (), тому не методи, а функції) для перетворення дати, яка задана в числовий формі або у вигляді рядка, у внутрішнє представлення в мілісекундах, що використовується в деяких операціях з датами.

Конструктор при створенні нового екземпляра об'єкта Date () можна використовувати в таких випадках:

nеw Dаtе ();/ * Конструктор Date () без аргументів створює об'єкт, у якого значення дорівнює поточній даті і часу. * /

nеw Dаtе (чісло_міллісекунд);/ * У конструкторі зазначено єдине числове значення, воно використовується як значення цієї дати у мілісекундах, що аналогічно такому значенню, яке поверне метод getTime (). * /

new Dаtе (дата_строковое_представленіе);/ * Якщо в конструкторі вказано один строковий аргумент, його розглядають як строкове представлення дати у форматі, який приймає метод Date.parse (). * /

new Dаtе (рік, місяць, день, години, хвилини, секунди, мілісекунди);/ * Конструктору може бути передано від двох до семи числових аргументів, що вказують окремі поля дати і часу. Крім перших двох полів, що вказують рік і місяць, всі інші аргументи є необов'язковими. * /

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

Зазначимо, які значення можуть приймати аргументи при використанні різних форм конструктора:

чісло_міллісекунд - кількість мілісекунд в проміжку між потрібної датою і північчю 01 січня 1970 (UTC). Скажімо, якщо аргумент дорівнює 5000, буде створена дата, що позначає п'ять секунд після опівночі 01.01.1970.

дата_строковое_представленіе - аргумент задає у вигляді рядка дату і необов'язкове час. Рядок повинен бути вказана в форматі, зрозумілому для методу Date.parse ().

рік - чотири цифри року. Для сумісності з більш ранніми реалізаціями JavaScript, якщо значення аргумент знаходиться між 0 і 99, до його значення додається число 1900.

день - ціле число від 1 до 31, що означає день місяця. Аргумент необов'язковий.

годинник - ціле число від 0, що означає опівночі, до 23. Аргумент необов'язковий.

хвилини - ціле число від 0 до 59. Аргумент необов'язковий.

секунди. Секунди в хвилинах, зазначені в вигляді цілого від 0 до 59. Необов'язковий аргумент.

мілісекунди - кількість мілісекунд, вказане в вигляді цілого числа в межах від 0 до 999. Аргумент необов'язковий.

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

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

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


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

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

// Оголошуємо три порожніх масивів var evenNumbers = new Array (); // Змінна k - для індексів масиву evenNumbers var k = 0; var oddNumbers = new 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 в двовимірному масиві twoDimens дорівнює одиниці (1).

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

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

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

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

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

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

"); } }

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

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

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


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

Всім доброго часу доби. На зв'язку Олексій Гулинін. У минулій статті ми розібрали конструкцію switch case в javascript. У даній статті я б хотів розповісти, що таке масиви в Javascript. Поняття масиву грає важливу роль не тільки в Javascript, але і у всьому програмуванні. Змінна, типу масив, містить в собі не один елемент, а кілька. Синтаксис створення масиву наступний:

Var mas = new Array (значення1, значення2, ..., значеніеN);

В даному випадку створюється змінна mas типу масив зі значеннями, зазначеними в дужках. Звертаю вашу увагу, що масив створюється за допомогою ключового слова new. Звертатися до елементів масиву можна, вказавши ім'я масиву і в квадратних дужках індекс масиву. Індекс масиву задається з нуля. Давайте наведу приклад масиву, що складається з 4 елементів і виведу 2 елемент:

Якщо ми поставимо mas, то буде виведено "privet", так як індексація масиву починається з нуля. Давайте тепер розберемося, як вивести всі елементи масиву. Для цього потрібно скористатися циклом. Крім знання циклів в Javascript, необхідно знати властивість масивів length, яке повертає кількість елементів масиву (або по-іншому його довжину). Давайте виведемо довжину масиву mas:

Висновок всіх елементів масиву:

Поки що, ми з вами розглядали одномірні масиви. Взагалі масиви можуть бути багатовимірними. Головне необхідно розуміти, що, наприклад двовимірний масив - це масив елементами якого є масиви. Давайте з вами розберемо таке завдання: необхідно створити двовимірний масив 3 на 3, елементи якого задаються користувачем і вивести цей масив. Тут будемо використовувати оператор prompt для запиту числа у користувача:

У нашому випадку двовимірний масив відповідає (для прикладу) такій структурі: mas = [,,]. Видно, що у масиву 3 елементи, кожен з яких є сам масивом.

Спочатку завдання Javascript'а була в тому, щоб робити динамічні сайти. У своїй практиці я ніде не використовував двовимірні масиви, тільки одномірні, так що тих знань по масивах, які ви отримали з даної статті, буде цілком достатньо. В одній з наступних статей я розповім про об'єкт Array, його властивості та методи.

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

I. Перебір справжніх масивів

На даний момент є три способи перебору елементів справжнього масиву:
  1. метод Array.prototype.forEach;
  2. класичний цикл for;
  3. «Правильно» побудований цикл for ... in.
Крім того, незабаром, з появою нового стандарту ECMAScript 6 (ES 6), очікується ще два способи:
  1. цикл for ... of (неявне використання ітератора);
  2. явне використання ітератора.

1. Метод forEach і родинні методи

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

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

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

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

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<= 4294967294) { console.log(a); } }
В даному прикладі на кожній ітерації циклу виконується дві перевірки:

  1. то, що масив має власне властивість з ім'ям key (не успадкованих з його прототипу).
  2. то, що key - рядок, що містить десяткову запис цілого числа, значення якого менше 4294967294. Звідки береться останнє число? З визначення індексу масиву в ES5, з якого випливає, що найбільший індекс, який може мати елемент в масиві: (2 ^ 32 - 2) = 4294967294.
Звичайно, такі перевірки віднімуть зайвий час при виконанні циклу. Але в разі розрідженого масиву цей спосіб більш ефективний, ніж цикл for, оскільки в цьому випадку перебираються тільки ті елементи, які явно визначені в масиві. Так, в прикладі вище буде виконано всього 3 ітерації (для індексів 0, 10 і 10000) - проти 10001 в циклі for.

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

Function arrayHasOwnIndex (array, key) (return array.hasOwnProperty (key) && /^0$|^\d*$/.test(key) && key<= 4294967294; }
Тоді тіло циклу з прикладу значно скоротиться:

For (key in a) (if (arrayHasOwnIndex (a, key)) (console.log (a);))
Розглянутий вище код перевірок є універсальним, відповідним для всіх випадків. Але замість нього можна використовувати більш коротку версію, хоча формально і не зовсім правильну, але, тим не менш, яка підходить для більшості випадків:

For (key in a) (if (a.hasOwnProperty (key) && String (parseInt (key, 10)) === key) (console.log (a);))

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

ES6, поки все ще перебуває в статусі чернетки, повинен ввести в JavaScript ітератори.

итератор - це реалізований об'єктом протокол, який визначає стандартний спосіб отримання послідовності значень (кінцевої або нескінченної).
Итератор - це об'єкт, в якому визначено метод next () - функція без аргументів, що повертає об'єкт з двома властивостями:

  1. done (boolean) - приймає значення true, якщо итератор досяг кінця ітеріруемой послідовності. В іншому випадку має значення false.
  2. value - визначає значення, що повертається ітератором. Може бути не визначено (відсутні), якщо властивість done має значення true.
Багато вбудовані об'єкти, в т.ч. справжні масиви, мають ітератори за замовчуванням. Найпростіший спосіб застосування ітератора в справжніх масивах - використовувати нову конструкцію for ... of.

Приклад використання for ... of:

Var val; var a = [ "a", "b", "c"]; for (val of a) (console.log (val);)
У наведеному прикладі цикл for ... of неявно викликає итератор об'єкта Array для отримання кожного значення масиву.

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

Ітератори можна також використовувати і явно, правда, в цьому випадку код стає значно складніше, в порівнянні з циклом for ... of. Виглядає це приблизно так:

Var a = [ "a", "b", "c"]; var it = a.entries (); var entry; while (! (entry = it.next ()). done) (console.log (entry.value);)
В даному прикладі метод Array.prototype.entries повертає ітератор, який використовується для виведення значень масиву. На кожній ітерації entry.value містить масив виду [ключ, значення].

II. Перебір массівоподобних об'єктів

Крім справжніх масивів, в JavaScript зустрічаються також массівоподобние об'єкти . Зі справжніми масивами їх ріднить те, що вони мають властивість length і властивості з іменами у вигляді чисел, відповідні елементам масиву. Як приклади можна назвати DOM колекції NodeList і псевдомассів arguments, доступний всередині будь-якої функції / методу.

1. Використання способів перебору справжніх масивів

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

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

ForEach і інші методи Array.prototype також застосовні до массівоподобним об'єктів. Для цього потрібно використовувати виклик Function.call або Function.apply.

Наприклад, якщо ви хочете застосувати forEach до властивості childNodes об'єкта Node, то це робиться так:

Array.prototype.forEach.call (node.childNodes, function (child) (// робимо що-небудь з об'єктом child));
Для зручності повторного використання цього прийому, можна оголосити посилання на метод Array.prototype.forEach в окремій змінної і використовувати її як скорочення:

// (Передбачається, що весь код нижче знаходиться в одній області видимості) var forEach = Array.prototype.forEach; // ... forEach.call (node.childNodes, function (child) (// робимо що-небудь з об'єктом child));
Якщо в массівоподобном об'єкті є итератор, то його можна використовувати явно або неявно для перебору об'єкта таким же способом, як і для справжніх масивів.

2. Перетворення в справжній масив

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

Var trueArray = Array.prototype.slice.call (arrayLikeObject, 0);
Наприклад, якщо ви хочете перетворити колекцію NodeList в справжній масив, вам потрібен приблизно такий код:

Var divs = Array.prototype.slice.call (document.querySelectorAll ( "div"), 0);
Update: Як було зазначено в коментарях rock і torbasow, в ES6 замість Array.prototype.slice можна використовувати більш наочний метод Array.from.

3. Зауваження по об'єктах середовища виконання

Якщо ви застосовуєте методи Array.prototype до об'єктів середовища виконання (таких як DOM колекції), то ви повинні мати на увазі, що правильна робота цих методів не гарантована у всіх середовищах виконання (в т.ч. в браузерах). Це залежить від поведінки конкретного об'єкта в конкретному середовищі виконання, якщо точніше, від того, як в цьому об'єкті реалізована абстрактна операція HasProperty. Проблема в тому, що сам стандарт ES5 допускає можливість неправильної поведінки об'єкта по відношенню до цієї операції (див. §8.6.2).

Тому важливо тестувати роботу методів Array.prototype в кожному середовищі виконання (браузері), в якій планується використання вашого застосування.

масиви

масив- це впорядкована колекція значень. Значення в масиві називаються елементами, і кожен елемент характеризується числовий позицією в масиві, яка називається індексом. Масиви в мові JavaScript є нетипізований: елементи масиву можуть мати будь-який тип, причому різні елементи одного і того ж масиву можуть мати різні типи. Елементи масиву можуть навіть бути об'єктами або іншими масивами, що дозволяє створювати складні структури даних, такі як масиви об'єктів і масиви масивів.

Відлік індексів масивів в мові JavaScript починається з нуля і для них використовуються 32-бітові цілі числа - перший елемент масиву має індекс 0. Масиви в JavaScript є динамічними: вони можуть збільшуватися і зменшуватися в розмірах у міру необхідності; немає необхідності оголошувати фіксовані розміри масивів при їх створенні або повторно розподіляти пам'ять при зміні їх розмірів.

Масиви в мові JavaScript - це спеціалізована форма об'єктів, а індекси масивів означають трохи більше, ніж просто імена властивостей, які за збігом є цілими числами.

створення масивів

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

Var empty =; // Порожній масив var numbers =; // Масив з п'ятьма числовими елементами var misc = [1.1, true, "a",]; // 3 елементи різних типів + завершальна кома var base = 1024; var table =; // Масив зі змінними var arrObj = [,]; // 2 масиву всередині, що містять об'єкти

Синтаксис литералов масивів дозволяє вставляти необов'язкову завершальну кому, тобто літерал [,] відповідає масиву з двома елементами, а не з трьома.

Інший спосіб створення масиву полягає у виклику конструктора Array (). Викликати конструктор можна трьома різними способами:

    Викликати конструктор без аргументів:

    Var arr = new Array ();

    У цьому випадку буде створено порожній масив, еквівалентний ЛІТЕРАЛЬ.

    Викликати конструктор з єдиним числовим аргументом, що визначає довжину масиву:

    Var arr = new Array (10);

    У цьому випадку буде створено порожній масив зазначеної довжини. Така форма виклику конструктора Array () може використовуватися для попереднього розподілу пам'яті під масив, якщо заздалегідь відомо кількість його елементів. Зверніть увагу, що при цьому в масиві не зберігається ніяких значень.

    Явно вказати у виклику конструктора значення перших двох або більше елементів масиву або один нечислової елемент:

    Var arr = new Array (5, 4, 3, 2, 1, "тест");

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

Читання і запис елементів масиву

Доступ до елементів масиву здійснюється за допомогою оператора. Зліва від дужок повинна бути присутнім посилання на масив. Усередині дужок має перебувати довільне вираз, що повертає невід'ємне ціле значення. Цей синтаксис придатний як для читання, так і для запису значення елемента масиву. Отже, допустимі всі наведені далі JavaScript-інструкції:

// Створити масив з одним елементом var arr = [ "world"]; // Прочитати елемент 0 var value = arr; // Записати значення в елемент 1 arr = 3.14; // Записати значення в елемент 2 i = 2; arr [i] = 3; // Записати значення в елемент 3 arr = "привіт"; // Прочитати елементи 0 і 2, записати значення в елемент 3 arr] = arr;

Нагадаю, що масиви є спеціалізованою різновидом об'єктів. Квадратні дужки, які використовуються для доступу до елементів масиву, діють точно так же, як квадратні дужки, які використовуються для доступу до властивостей об'єкта. Інтерпретатор JavaScript перетворює зазначені в дужках числові індекси в рядки - індекс 1 перетворюється в рядок "1" - а потім використовує рядки як імена властивостей.

У перетворенні числових індексів в рядки немає нічого особливого: те ж саме можна проробляти зі звичайними об'єктами:

Var obj = (); // Створити простий об'єкт obj = "one"; // індексувати його цілими числами

Особливість масивів полягає в тому, що при використанні імен властивостей, які є невід'ємними цілими числами, масиви автоматично визначають значення властивості length. Наприклад, вище був створений масив arr з єдиним елементом. Потім були привласнені значення його елементів з індексами 1, 2 і 3. В результаті цих операцій значення властивості length масиву змінилося і стало рівним 4.

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

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

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

Ми вже бачили, що найпростіший спосіб додати елементи в масив полягає в тому, щоб привласнити значення новим індексам. Для додавання одного або більше елементів в кінець масиву можна також використовувати метод push ():

Var arr =; // Створити порожній масив arr.push ( "zero"); // Додати значення в кінець arr.push ( "one", 2); // Додати ще два значення

Додати елемент в кінець масиву можна також, присвоївши значення елементу arr. Для вставки елемента в початок масиву можна використовувати метод unshift (), При цьому існуючі елементи в масиві зміщуються в позиції з більш високими індексами.

Видаляти елементи масиву можна за допомогою оператора delete, як звичайні властивості об'єктів:

Var arr =; delete arr; 2 in arr; // false, індекс 2 в масиві не визначений arr.length; // 3: оператор delete не змінює властивість length масиву

Видалення елемента нагадує (але дещо відрізняється) присвоювання значення undefined цьому елементу. Зверніть увагу, що застосування оператора delete до елементу масиву не змінює значення властивості length і не зрушує вниз елементи з більш високими індексами, щоб заповнити порожнечу, що залишилася після видалення елемента.

Крім того є можливість видаляти елементи в кінці масиву простим привласненням нового значення властивості length. Масиви мають метод pop ()(Протилежний методу push ()), який зменшує довжину масиву на 1 і повертає значення видаленого елемента. Також є метод shift ()(Протилежний методу unshift ()), який видаляє елемент на початку масиву. На відміну від оператора delete, метод shift () зрушує все елементи вниз на позицію нижче їх поточних індексів.

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

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

JavaScript не підтримує «справжні» багатовимірні масиви, але дозволяє непогано імітувати їх за допомогою масивів з масивів. Для доступу до елементу даних в масиві масивів досить двічі використовувати оператор.

Наприклад, припустимо, що змінна matrix - це масив масивів чисел. Кожен елемент matrix [x] - це масив чисел. Для доступу до певного числа в масиві можна використовувати вираз matrix [x] [y]. Нижче наводиться конкретний приклад, де двовимірний масив використовується в якості таблиці множення:

// Створити багатовимірний масив var table = new Array (10); // У таблиці 10 рядків for (var i = 0; i

Методи класу Array

Стандарт ECMAScript 3 визначає в складі Array.prototype безліч зручних функцій для роботи з масивами, які доступні як методи будь-якого масиву. Ці методи будуть представлені в наступних підрозділах.

Метод join ()

Метод Array.join () перетворює всі елементи масиву в рядки, об'єднує їх і повертає отриману рядок. У необов'язковий аргумент методу можна передати рядок, яка буде використовуватися для відділення елементів в рядку результату. Якщо рядок-роздільник не вказана, використовується кома. Наприклад, наступний фрагмент дає в результаті рядок "1,2,3":

Var arr =; arr.join (); // "1,2,3" arr.join ( "-"); // "1-2-3"

Метод reverse ()

Метод Array.reverse () змінює порядок проходження елементів в масиві на зворотний і повертає переупорядочение масив. Перестановка виконується безпосередньо у вихідному масиві, тобто цей метод не створює новий масив з Упорядкування об'єктів, а переупорядочівать їх в уже існуючому масиві. Наприклад, наступний фрагмент, де використовуються методи reverse () і join (), дає в результаті рядок "3,2,1":

Var arr =; arr.reverse (). join (); // "3,2,1"

Метод sort ()

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

Для сортування в будь-якому іншому порядку, відмінному від алфавітного, методу sort () можна передати функцію порівняння в якості аргументу. Ця функція встановлює, який з двох її аргументів повинен слідувати раніше в відсортованому списку. Якщо перший аргумент повинен передувати другому, функція порівняння повинна повертати негативне число. Якщо перший аргумент повинен слідувати за другим в відсортованому масиві, то функція повинна повертати число більше нуля. А якщо два значення еквівалентні (тобто порядок їх слідування не важливий), функція порівняння повинна повертати 0:

Var arr =; arr.sort (); // Алфавітний порядок: 1111, 222, 33, 4 arr.sort (function (a, b) (// Числовий порядок: 4, 33, 222, 1111 return ab; // Повертає значення 0 // залежно від порядку сортування a і b)); // Сортуємо в зворотному напрямку, від більшого до меншого arr.sort (function (a, b) (return b-a));

Зверніть увагу, наскільки зручно використовувати в цьому фрагменті неіменованого функцію. Функція порівняння використовується тільки тут, тому немає необхідності давати їй ім'я.

Метод concat ()

Метод Array.concat () створює і повертає новий масив, що містить елементи вихідного масиву, для якого був викликаний метод concat (), і значення всіх аргументів, переданих методом concat (). Якщо який-небудь з цих аргументів сам є масивом, його елементи додаються в повертається масив. Слід, однак, відзначити, що рекурсивного перетворення масиву з масивів в одновимірний масив не відбувається. Метод concat () не змінює вихідний масив. Нижче наводиться кілька прикладів:

Var arr =; arr.concat (4, 5); // поверне arr.concat (); // поверне arr.concat (,) // поверне arr.concat (4,]) // Поверне]

Метод slice ()

Метод Array.slice () повертає фрагмент, або подмассів, зазначеного масиву. Два аргументи методу визначають початок і кінець повертається фрагмента. Повертається масив містить елемент, номер якого вказаний у першому аргументі, плюс всі наступні елементи, аж до (але не включаючи) елемента, номер якого вказаний у другому аргументі.

Якщо вказано тільки один аргумент, що повертається масив містить всі елементи від початкової позиції до кінця масиву. Якщо який-небудь з аргументів має від'ємне значення, він визначає номер елемента щодо кінця масиву. Так, аргументу -1 відповідає останній елемент масиву, а аргументу -3 - третій елемент масиву з кінця. Ось кілька прикладів:

Var arr =; arr.slice (0,3); // поверне arr.slice (3); // поверне arr.slice (1, -1); // поверне arr.slice (-3, -2); // поверне

Метод splice ()

Метод Array.splice () - це універсальний метод, що виконує вставку або видалення елементів масиву. На відміну від методів slice () і concat (), метод splice () змінює вихідний масив, щодо якого він був викликаний. Зверніть увагу, що методи splice () і slice () мають дуже схожі імена, але виконують абсолютно різні операції.

Метод splice () може видаляти елементи з масиву, вставляти нові елементи або виконувати обидві операції одночасно. Елементи масиву при необхідності зміщуються, щоб після вставки або видалення утворювалася безперервна послідовність.

Перший аргумент методу splice () визначає позицію в масиві, починаючи з якої буде виконуватися вставка і / або видалення. Другий аргумент визначає кількість елементів, які повинні бути видалені (вирізані) з масиву. Якщо другий аргумент опущений, видаляються всі елементи масиву від зазначеного до кінця масиву. Метод splice () повертає масив віддалених елементів або (якщо жоден з елементів не був видалений) порожній масив.

Перші два аргументи методу splice () визначають елементи масиву, що підлягають видаленню. За цими аргументами може слідувати будь-яку кількість додаткових аргументів, що визначають елементи, які будуть вставлені в масив, починаючи з позиції, зазначеної в першому аргументі.

Var arr =; arr.splice (4); // поверне, arr = arr.splice (1,2); // поверне, arr = arr.splice (1,1); // поверне; arr = arr =; arr.splice (2,0, "a", "b"); // поверне; arr =

Методи push () і pop ()

Методи push () і pop () дозволяють працювати з масивами як зі стеками. Метод push () додає один або кілька нових елементів в кінець масиву і повертає його нову довжину. Метод pop () виконує зворотну операцію - видаляє останній елемент масиву, зменшує довжину масиву і повертає віддалене їм значення. Зверніть увагу, що обидва ці методу змінюють вихідний масив, а не створюють його модифіковану копію.

Методи unshift () і shift ()

Методи unshift () і shift () поводяться майже так само, як push () і pop (), за винятком того, що вони вставляють і видаляють елементи на початку масиву, а не в кінці. Метод unshift () зміщує існуючі елементи в сторону великих індексів для звільнення місця, додає елемент або елементи в початок масиву і повертає нову довжину масиву. Метод shift () видаляє і повертає перший елемент масиву, зміщуючи всі наступні елементи на одну позицію вниз, щоб зайняти місце, що звільнилося на початку масиву.

Сподобалася стаття? Поділіться з друзями!