Масиви

Масив– це впорядкована колекція значень. Значення в масиві називаються елементами, і кожен елемент характеризується числовою позицією в масиві, яка називається індексом. Масиви в мові 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 = новий Array();

У цьому випадку буде створено порожній масив, еквівалентний літералу.

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

Var arr = новий 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 a-b; // Повертає значення 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() видаляє та повертає перший елемент масиву, зміщуючи всі наступні елементи на одну позицію вниз, щоб зайняти місце, що звільнилося на початку масиву.

Доброго часу доби всім, хто вирішив вивчити все про масиви в JavaScript. У кількох попередніх публікаціях я вже торкався деяких моментів. Сьогоднішня стаття є повним керівництвом.

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

Поговоримо про головне завдання масивів

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

Вони створюються за допомогою квадратних дужок, мають ряд можливостей і методів, а також можуть бути багатовимірними. Головна їхня перевага – всі елементи пронумеровані, тому до них можна звернутись через ідентифікатор.

Однак є ще один вид масивів. Насправді у статті, присвяченій об'єктам, я розповідав, що останні також є масивами. І дійсно, вони є асоціативними масивами, які є структурою даних із системою зберігання інформації у вигляді «ключ => значення». Таку структуру часто називають хеш, рідше словником.

Розберемо докладніше кожен вид.

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

Зараз хочу показати приклади реалізації таких механізмів. У першій програмі я створив об'єкт patient, а потім перерахував його елементи. Як бачите, для patient.paramя зробив вкладений об'єкт, який має свої власні значення.

1 2 3 4 5 6 7 8 9 10

var patient = новий Object(); patient.firstName = "Інна" patient.age = 34, patient.param =( height:169 , weight: 55, disease: "no" ) alert(patient.firstName) // виведе "Інна" alert(patient.param. disease) // виведе no

var patient = новий Object(); patient.firstName = "Інна" patient.age = 34, patient.param =( height:169 , weight: 55, disease: "no" ) alert(patient.firstName) // виведе "Інна" alert(patient.param. disease) // виведе no

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

patient.surname = "Луценко"

alert (patient.surname)

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

patient.firstName = "Катя"

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

delete patient.surname

«Справжні» масиви

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

Так, один елемент можна вписати в комірку з індексом "0", а наступний - з індексом "4". Проміжні осередки пам'яті будуть порожніми і видаватимуть «undefined», якщо до них звернутися.

Як приклад я написав невелику програму, в якій створено масив товарів.

1 2 3 4 5

var goods = ["Яловядина", "Макарони", "Твердий сир", "Спеції"]; alert(goods); alert(goods); goods = "Томати" alert(goods);

var goods = ["Яловядина", "Макарони", "Твердий сир", "Спеції"]; alert(goods); alert(goods); goods = "Томати" alert(goods);

Я спеціально показав, як вивести весь список покупок і як вибрати один елемент. До того ж я торкнувся властивості length, Про яке конкретно розповім пізніше. А поки що дам невелике пояснення.

goods = "Томати"

додає новий елемент до кінця масиву.

Методи, що дозволяють працювати з початком та кінцем масиву

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

Для початку розповім вам про методи, що працюють з початком масиву. До них відносяться shiftі unshift. Перша команда видаляє одне значення, друга додає.

Як приклад, я взяв код попередньої програми і видозмінив його.

1 2 3 4 5 6 7 8

var goods = ["Яловядина", "Макарони", "Твердий сир", "Спеції"]; document.writeln(goods); //Яловядина,Макарони,Твердий сир,Спеції document.writeln(goods); //Твердий сир goods.unshift("Томати"); goods.unshift("Буженіна"); document.writeln(goods); //Буженина,Томати,Яловядина,Макарони,Твердий сир,Спеції goods.shift() document.writeln(goods); //Томати,Яловядина,Макарони,Твердий сир,Спеції

var goods = ["Яловядина", "Макарони", "Твердий сир", "Спеції"]; document.writeln(goods); //Яловядина,Макарони,Твердий сир,Спеції document.writeln(goods); //Твердий сир goods.unshift("Томати"); goods.unshift("Буженіна"); document.writeln(goods); //Буженина,Томати,Яловядина,Макарони,Твердий сир,Спеції goods.shift() document.writeln(goods); //Томати,Яловядина,Макарони,Твердий сир,Спеції

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

Тепер перейдемо до методів, які додають та видаляють елементи в кінець списку. Так, popвідповідає за видалення значень, а push- За додавання.

До попередньої програмної реалізації допишемо названі команди.

goods.push («Італійські трави»);

document.writeln (goods);

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

«Томати, Яловядина, Макарони, Твердий сир, Італійські трави».

А тепер перерахуємо елементи

Щоб дізнатися кількість записаних в масив елементів потрібно скористатися властивістю об'єкта – length. Вище я вже використав цю команду.

На той момент довжина колекції дорівнювала 4, а мені потрібно було дописати ще один продукт. Так як нумерація елементів масиву починається з нуля, то перший вільний осередок у тому прикладі знаходилася під індексом «4». Зауважте, що length визначає не кількість занесених товарів у колекцію, а довжину масиву. Таким чином, якби серед того списку середні 2 елементи були порожніми

(var goods = ["Яловичина", "Макарони", "Твердий сир", "Спеції"];)

та властивість у результаті видало б число 6.

Знаючи цю команду, можна зайнятися розбором циклів. Вони необхідні для перебору елементів колекції. Це дуже зручний механізм, без якого важко обійтися. У циклах можна вказувати в якому напрямку, з якого і який елемент, а також з яким кроком варто перебирати значення.

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

var goods = ["Яловядина", "Макарони", "Твердий сир", "Спеції"]; for (var i = goods.length-1; i >=0; i=i-2) ( document.writeln((i+1)+"."+ goods[i]); )

Ті, хто вирішив, що у відповіді буде рядок: «4.Спеції 2.Макарони», мали рацію. Молодці!

Декілька корисних нотаток

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

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

Що таке масив JavaScript?

Масив – це впорядкована колекція значень. Значення цієї колекції називаються елементами . Кожен елемент у масиві має власний порядковий номер (число), який називається індексом . Індекси нумеруються з 0.

На наступному малюнку наведено числовий масив, що складається з 5 елементів. Елементи даного масиву містять такі дані: 123 (індекс 0), 7 (індекс 1), 50 (індекс 2), -9 (індекс 3), 24 (індекс 4).

Створення (оголошення) масиву

Створення масивів JavaScript зазвичай здійснюється за допомогою літералу масиву.

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

Наприклад:

Var empty =; // Порожній масив var numbers =; // Чисельний масив var arr =; // масив, що містить різні типи даних

Значення у масиві JavaScript не обов'язково повинні мати однаковий тип. Тобто. в одному масиві можуть бути значення різних типів даних.

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

Наприклад:

// Створимо масив, що складається з 3 елементів var smartphone Colors = ["Black", "White", "Grey"]; // виведемо в консоль браузера значення елементів масиву smartphoneColors з індексами 0 та 2 console.log("Значення елемента масиву smartphoneColors з індексом 0:" + smartphoneColors); // "Значення елемента масиву smartphone Colors з індексом 0: Black" console.log ( " Значення елемента масиву smartphone Colors з індексом 2: " + smartphone Colors); // "Значення елемента масиву smartphoneColors з індексом 0: Grey" // Змінимо значення елемента масиву smartphoneColors з індексом 1 на "Red" smartphoneColors = "Red"; // ["Black", "Red", "Grey"] // встановимо елементу масиву smartphoneColors з індексом 3 значення "Blue" smartphoneColors = "Blue"; // ["Black", "Red", "Grey", "Blue"]

Як значення елементів масиву можна використовувати не тільки статичні значення, але й вирази:

Var lengthA = 7, widthA = 5; var point =;

Як значення елементів масиву можуть використовуватися об'єкти.

Var points = [(x1: 5, y1: 3), (x1: 7, y1: 10), (x1: 12; y1: 0)]; // масив, що з 3 об'єктів

Інший спосіб створення масивуполягає у виклику функції-конструктора Array.

Виклик функції-конструктора без аргументів використовується створення порожнього масиву.

Var empty = новий Array(); // Порожній масив

Даний спосіб створення масиву, еквівалентний літералу.

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

Var arr = новий Array (5); // масив, що складається з 5 елементів (значення елементів дорівнюють undefined)

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

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

Властивість length (довжина масиву)

Визначення довжини масиву (кількості елементів) здійснюється за допомогою властивості length.

//створимо масив шляхом перерахування значень елементів функції Array var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //змінної lengthArray привласним довжину масиву volumeHDDs var lengthArray = volumeHDDs.length;

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

Отримання значення першого елемента масиву здійснюється за допомогою вказівки у квадратних дужках цього масиву числа 0:

//Створення масиву, що складається з 3 елементів var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //отримання значення першого елемента масиву var firstValue = volumeHDDs;

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

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

//Створення масиву, що складається з 3 елементів var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //отримання значення останнього елемента масиву var lastValue = volumeHDDs;

Перебір масиву

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

Наприклад, переберемо всі елементи масиву і виведемо їх значення в консоль браузера (F12):

//Створення масиву nameStudents, що складається з 4 елементів var nameStudents = new Array("Петя","Вася","Коля","Максим"); //перебір елементів масиву від 0 до довжини масиву-1 for (var i = 0; i<= nameStudents.length-1; i++) { console.log(i+1 + " элемент массива = " + nameStudents[i]); }

Для чого призначений оператор delete

Оператор delete використовується задля видалення елемента з масиву, а присвоювання даному елементу масиву значення undefined .

Var namePlanets = new Array ("Венера", "Меркурій", "Земля", "Марс"); delete namePlanets; for (var i=0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Функції для роботи з масивами (методи об'єкту Array)

Об'єкт Array містить такі методи (функції) для роботи з масивами:

• shift
• unshift
• slice
• splice
• split
• reverse

Метод push (додавання елемента в кінець масиву)

Метод push призначений для додавання елемента до кінця масиву. Значення цього елемента вказується як параметр даного методу. Як результат метод push повертає кількість елементів у масиві з урахуванням доданого.

Var namePlanets = ["Венера", "Меркурій", "Земля", "Марс"]; namePlanets.push("Юпітер"); // 5 console.log(namePlanets); // ["Венера", "Меркурій", "Земля", "Марс", "Юпітер"]

Метод pop (видалення останнього елемента з масиву)

Метод pop призначений видалення останнього елемента з масиву. Цей метод не має параметрів. Як результат він повертає значення останнього (віддаленого) елемента масиву.

Var namePlanets = ["Венера", "Меркурій", "Земля", "Марс"]; namePlanets.pop(); // "Марс" console.log(namePlanets); // ["Венера", "Меркурій", "Земля"]

Метод shift (видалення першого елемента з масиву)

Метод shift призначений видалення першого елемента з масиву, тобто. елемента, має індекс 0. Решта елементів масиву зміщуються до початку, тобто. у кожного з них індекс зменшується на 1. Даний метод як результат повертає значення віддаленого елемента.

Var namePlanets = ["Венера", "Меркурій", "Земля", "Марс"]; namePlanets.shift(); // "Венера" ​​console.log(namePlanets); // ["Меркурій", "Земля", "Марс"]

Метод unshift (додавання елемента на початок масиву)

Метод unshift призначений додавання елемента початок масиву (перед іншими елементами). Значення цього елемента вказується як параметр даного методу. Як результат цей метод повертає кількість елементів у масиві з урахуванням доданого.

Var namePlanets = ["Меркурій", "Земля", "Марс", "Юпітер"]; namePlanets.unshift("Венера"); // 5 console.log(namePlanets); // ["Венера", "Меркурій", "Земля", "Марс", "Юпітер"]

Метод slice (копіювання ділянки масиву)

Метод slice призначений для копіювання ділянки масиву. При цьому він не змінює вихідний масив, а повертає як результат новий масив, що складається з вибраних елементів.

Метод slice має 2 параметри:

• 1 параметр (обов'язковий) - призначений для вказівки індексу елемента, з якого необхідно копіювати елементи;
• 2 параметр (необов'язковий) – призначений для вказівки індексу елемента, до якого необхідно копіювати (при цьому він не включається до нового масиву). Якщо його не вказати, будуть скопійовані елементи до кінця зазначеного масиву.

var namePlanets = ["Венера", "Меркурій", "Земля", "Марс", "Юпітер"]; var newNamePlanets = namePlanets.slice(2, 4); // ["Земля", "Марс"]

Метод splice (зміна вмісту масиву)

Метод splice призначений для зміни вмісту масиву. Він може використовуватися як додавання елементів масив, так їх видалення.

Синтаксис методу splice:

Array.splice(startIndex, deleteCount [, element1[, element2[, ...]]]); /* startIndex (обов'язковий) - стартовий індекс елемента, з якого потрібно розпочати зміну масиву. Якщо як startIndex вказати число, більше довжини масиву, то стартовий індекс буде встановлено на кінець масиву. Якщо як startIndex вказати негативне число, то відлік стартового елемента буде вестися з кінця. deleteCount (обов'язковий) - число, що показує скільки елементів необхідно видалити з масиву. Якщо елементи не потрібно видаляти з масиву, то deleteCount необхідно встановити 0. Після цього потрібно вказати щонайменше один новий елемент, який потрібно додати до масиву. Якщо в якості deleteCount вказати число, яке буде перевищувати кількість елементів, що залишилися в масиві, починаючи з startIndex, то в цьому випадку вони все одно будуть видалені (тобто всі елементи до кінця масиву, починаючи зі стартового індексу) element1, element2, . .. (необов'язкові) - елементи, які потрібно додати в масив. */

Приклади використання методу splice.

Застосування методу splice видалення частини елементів з масиву.

Var namePlanets = ["Венера", "Меркурій", "Земля", "Марс"]; namePlanets.splice(2, 2); //["Земля", "Марс"] console.log(namePlanets); // ["Венера", "Меркурій"]

Застосування методу splice для видалення елемента з масиву та додавання до нього нових.

Var namePlanets = ["Венера", "Меркурій", "Земля", "Марс"]; namePlanets.splice(1, 1, "Уран", "Нептун", "Сатурн"); // ["Меркурій"] console.log(namePlanets); // ["Венера", "Уран", "Нептун", "Сатурн", "Земля", "Марс"]

Застосування методу splice тільки для додавання нових елементів до масиву.

Var namePlanets = ["Юпітер", "Сатурн", "Уран"]; namePlanets.splice(0, 0, "Венера", "Меркурій", "Земля", "Марс"); // console.log(namePlanets); // ["Венера", "Меркурій", "Земля", "Марс", "Юпітер", "Сатурн", "Уран"]

Метод join (перетворення масиву на рядок)

Метод join призначений для з'єднання всіх елементів масиву до рядка.

Синтаксис методу join:

Array.join(); /* separator (необов'язковий) - роздільник, який використовується як сполучний рядок між кожним елементом масиву. Якщо цей параметр не вказати, то як сполучний рядок буде використовуватися ",". Якщо в якості параметра вказати порожній рядок, то елементи масиви у рядку, що повертається, між собою нічим розділені не будуть */

Var berries = ["Виноград", "Виноград", "Смородина", "Шипшина"]; var berriesStr1 = berries.join(); // "Виноград, Виноград, Смородина, Шипшина" var berriesStr2 = berries.join(""); // "ВиноградВиноградСмородинаШипшина" var berriesStr3 = berries.join(", "); // "Виноград, Виноград, Смородина, Шипшина" var berriesStr4 = berries.join(" + "); // "Виноград + Виноград + Смородина + Шипшина"

Якщо як separator використовувати не рядок, то він буде перетворений до рядка.

Var berries = ["Виноград", "Виноград", "Смородина", "Шипшина"]; var berriesStr1 = berries.join(false); // "Виноград false Виноград false Смородина false Шипшина" var berries Str2 = berries.join (4/2); // "Виноград2Виноград2Смородина2Шипшина" Елементи масиву, які мають значення null або undefined, будуть приведені до порожнього рядка. var arr =; var arrStr = arr.join(", "); // "0, 5, -4"

Перетворення рядка на масив - split

Метод split призначений для перетворення рядка на масив. Даний метод має один параметр, в якості якого ви можете вказати рядок, на підставі якого цей рядок буде розбитий на масив рядків.

Var strElementComputers = "Системний блок, Монітор, Клавіатура, Миша, Колонки, Принтер"; var elementComputers = strElementComputers.split(", "); console.log("Кількість елементів у масиві:" + elementComputers.length); for (var i=0; i<= elementComputers.length-1; i++) { console.log(i + " элемент массива = " + elementComputers[i]); }

Перевпорядкування елементів масиву у зворотному порядку - reverse

Метод reverse призначений для переупорядкування елементів масиву у зворотному порядку.

Var namePlanets = new Array ("Венера", "Меркурій", "Земля", "Марс"); namePlanets.reverse(); console.log("Кількість елементів у масиві:" + namePlanets.length); for (var i=0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

Сортування елементів масиву - sort

Метод sort призначений для сортування елементів масиву. За умовчанням цей метод сортує масив як рядки.

Var namePlanets = new Array ("Венера", "Меркурій", "Земля", "Марс"); namePlanets.sort(); console.log("Кількість елементів у масиві:" + namePlanets.length); for (var i=0; i<= namePlanets.length-1; i++) { console.log(i + " элемент массива = " + namePlanets[i]); }

21.06.2017 at 12:17

Для обчислення на JavaScript розміру масиву об'єктів використовується властивість масиву length.

Var arr = ["first", "second"]; console.log(arr.length); // 2

Масиви в JavaScript можуть мати пропуски в індексах. Наприклад

Var arr =; arr = "first"; arr = "second";

Властивість length повертає максимальний індекс масиву +1. у наведеному прикладі length = 5.

Обчислення на javascript кількості елементів у масиві

Array.prototype.count = function()( var result = 0; for(var i = 0; i< this.length; i++) if (this[i] != undefined) result++; return result; }

Приклад використання

Var arr =; arr = "first"; arr = "second"; console.log(arr.count()); //2

Так само властивість length можна надавати значення. Це дозволяє зменшити довжину наявного масиву.

Var arr = ["first", "second", "third"]; arr.length = 2; console.log(arr); // ["first", "second"]

Обчислення на JavaScript розміру масиву в байтах

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

Function sizeOf(obj) ( var bytes = 0; if(obj !== null && obj !== undefined) ( switch(typeof obj) ( case "number": bytes += 8; break; case "string": bytes) += obj.length * 2; break; case "boolean": bytes += 4; break; case "object": for(var key in obj) ( bytes += sizeOf(obj); ) break; ) ) return bytes ;);

Метод не точний і має безліч проблем - наприклад, є можливість піти в нескінченний цикл.

У цій статті ми розглянемо стандартні JavaScript масиви із числовими індексами. Масиви оголошуються за допомогою квадратних дужок:

var fruits = ["Apple", "Orange", "Donkey"]

Щоб вийняти елемент, помістіть його індекс у квадратні дужки. Перший індекс 0:

var fruits = ["Apple", "Orange", "Donkey"] alert(fruits) alert(fruits) alert(fruits)

Ми також можемо отримати довжину масиву JavaScript :

var fruits = ["Apple", "Orange", "Donkey"] alert(fruits.length)

Упс! Ми створили масив із двома фруктами та ослом. Тепер нам потрібно видалити віслюка.

Методи pop та push

Метод pop у JavaScript видаляє елемент масиву та повертає його.

У наступному прикладі показано, як «Осел» витягується з масиву:

var fruits = ["Apple", "Orange", "Donkey"] alert("Я видаляю "+fruits.pop()) // Тепер у нас тільки ["Apple","Orange"] alert("Тепер розмір масиву : "+fruits.length) // осел видалений

Зауважте, що pop змінює сам масив.

Аналог pop - це метод push, який додає елемент масив. Наприклад, ми забули додати персик:

var fruits = ["Apple", "Orange"] fruits.push("Peach"); // тепер ми маємо ["Apple", "Orange", "Peach"] alert("Останній елемент:"+fruits)

1. Створіть масив styles з елементами “ Jazz”, “Blues”;
2. Додати значення « Rock’n’Roll«;
3. Замініть друге значення з кінця значенням « Classic“. У вас має вийти масив: “ Jazz”, ”Classic”, ”Rock’n’Roll”. Код має працювати для будь-якої довжини масиву;
4. Вийміть останнє значення з масиву та виведіть його через alert.

Рішення

// 1 var styles = ["Jazz", "Bluez"] // 2 styles.push("Rock"n"Roll") // або: styles = "Rock"n"Roll" // 3 styles = "Classic // 4 alert(styles.pop())

Методи shift/unshift

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

var fruits = ["Apple", "Orange"] var apple = fruits.shift() // тепер у нас залишився тільки ["Orange"] fruits.unshift("Lemon") // тепер ми маємо ["Lemon", "Orange"] alert(fruits.length) // 2

І shift , і unshift можуть працювати з кількома елементами одночасно:

var fruits = ["Apple"] fruits.push("Orange","Peach") fruits.unshift("Pineapple","Lemon") // тепер масив виглядає так: ["Pineapple", "Lemon", "Apple ", "Orange", "Peach"]

Завдання для самостійного виконання

Напишіть код, щоб вивести через alert випадкове значення масиву arr :

var arr = ["Plum", "Orange", "Donkey", "Carrot", "JavaScript"]

Примітка: Код для отримання випадкового числа від мінімального до максимального значення (включно) наступний:

var rand = min + Math.floor(Math.random()*(max+1-min))

Рішення

Нам потрібно отримати випадкове число від 0 до arr.length-1 (включно):

var arr = ["Plum", "Orange", "Donkey", "Carrot", "JavaScript"] var rand = Math.floor(Math.random()*arr.length) alert(arr)

Перебір масиву

JavaScript перебір масиву здійснюється за допомогою циклу for :

var fruits = ["Pineapple", "Lemon", "Apple", "Orange", "Peach"] for(var i=0; i

Завдання для самостійного виконання

Створіть функцію find(arr,value) , яка знаходить значення в заданому масиві і повертає індекс або -1 , якщо значення не знайдено.

Наприклад:

arr = ["test", 2, 1.5, false] find(arr, "test") // 0 find(arr, 2) // 1 find(arr, 1.5) // 2 find(arr, 0) // -1

Рішення

Можливе рішення може виглядати так:

function find(array, value) ( ​​for(var i=0; i

Але це не так, тому що == не визначає різницю між 0 і false .

Коректніше при роботі з масивами JavaScript використовувати === . Крім того, новий стандарт ES5 містить функцію Array#indexOf . З її допомогою ми можемо визначити функцію так:

function find(array, value) ( ​​if (array.indexOf) return array.indexOf(value) for(var i=0; i

Ще розумніше було б визначити find через умову, щоб перевірити, чи існує метод indexOf.

Завдання для самостійного виконання

Створіть функцію filterNumeric(arr), яка приймає масив і повертає новий масив, що містить лише числові значення з arr.

Приклад того, як це має працювати:

arr = ["a", 1, "b", 2]; arr = filterNumeric(arr); // тепер arr =

Рішення

Рішення полягає в тому, щоб перебрати масив і додати значення до нового масиву, якщо вони є числовими.

join та split

Іноді потрібний швидкий спосіб перетворення JavaScript масиву в рядок. Саме для цього призначений метод join.

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

var fruits = ["Lemon", "Apple", "Orange", "Peach"]; var str = fruits.join(", "); alert(str);

Зворотне перетворення легко виконується за допомогою методу split:

var fruits = "Apple, Orange, Peach"; var arr = fruits.split(","); // arr містить тепер ["Apple", "Orange", "Peach"] alert(arr);

Завдання для самостійного виконання

Об'єкт включає властивість className , яка містить імена класів, розділені пробілами:

Напишіть функцію addClass(obj, cls) , яка додає клас cls , але якщо він не існує:

ddClass(obj, "new") // obj.className="open menu new" addClass(obj, "open") // без змін (class already exists) addClass(obj, "me") // obj.className= "open menu new me" alert(obj.className) //

Рішення

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

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

function addClass(elem, cls) ( for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) ( if (c[i] == cls ) return ) elem.className += " "+cls ) var obj = ( className: "open menu" ) addClass(obj, "new") addClass(obj, "open") alert(obj.className) // open menu new

У наведеному прикладі змінна c визначається на початку циклу, і для її останнього індексу задається значення i .

Сам цикл обробляється у напрямі, закінчуючись умовою i>=0 . Тому що i>=0 перевірити швидше, ніж i. Що у JavaScript прискорює пошук у масиві.

Використання length для обрізки масиву

За допомогою властивості length можна обрізати масив таким чином:

Ви задаєте довжину і браузер обрізає масив.

Array є об'єктом, що з цього випливає

Насправді JavaScript Array - це Object , доповнений автоматичною установкою довжини і спеціальними методами.

Це відрізняється від концепції в інших мовах, де масиви є безперервним сегментом пам'яті. Це також відрізняється від черги чи стека на основі пов'язаних списків.

Нечислові ключі масиву

Ключі – це числа, але вони можуть мати будь-які імена:

arr = arr = 5 arr.prop = 10 // не робіть так

У JavaScript масиви є хеш-таблиці з їх перевагами в плані продуктивності, але і з певними недоліками.

Наприклад, push/pop працюють лише з крайніми елементами масиву, тому вони неймовірно швидкі.

push працює тільки з кінцем:

var arr = ["My", "array"] arr.push("something") alert(arr) // рядок "array"

Методи shift/unshift повільні, тому що потрібно змінити нумерацію всього масиву. Метод splice також може призвести до зміни нумерації:

Таким чином, shift/unshift працюють повільніше, ніж push/pop. Чим більше масив, тим більше часу займає JavaScript сортування масиву.

Завдання для самостійного виконання

Який результат? Чому?

arr = ["a", "b"] arr.push(function() ( alert(this) )) arr() // ?

Рішення

Оскільки масиви є об'єктами, arr ..фактично є викликом методу об'єкта, таким як obj метод:

arr() // те саме що arr() // синтаксично це неправильно, але концептуально те саме: arr.2() // переписане в тому ж стилі, що і obj.method() this = arr в такому випадку передається функції, тому виводиться вміст arr. arr = ["a", "b"] arr.push(function() ( alert(this) )) arr() // "a","b",функція

Розріджені масиви, опис length

Властивість length дозволяє отримати не розмір масиву JavaScript , а останній індекс + 1 . Це важливо, якщо йдеться про розріджені масиви, з «проміжками» в індексах.

У наступному прикладі ми додамо два елементи в порожні fruits, але значення length залишиться 100:

var fruits = // порожній масив fruits = "Peach" fruits = "Apple" alert(fruits.length) // 100 (але елементів у масиві всього 2)

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

var fruits = // порожній масив fruits = "Peach" fruits = "Apple" alert(fruits) // ,Peach,Apple (або щось на зразок цього)

Але масив – це об'єкт із двома ключами. Відсутні значення не займають місця.

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

var fruits = fruits = "Peach" fruits = "Apple" alert(fruits.pop()) // виштовхуємо "Apple" (на індекс 9) alert(fruits.pop()) // виштовхуємо не заданий елемент (на індекс 8 )

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

Видалення з масиву

Як ми знаємо, масиви – це об'єкти, тому ми могли б використовувати delete, щоб видалити значення:

var arr = ["Go", "to", "home"] delete arr // тепер arr = ["Go", undefined, "home"] alert(arr) // не встановлено

Ви бачите, що значення видаляється, але не так, як ми хотіли б, тому що масив містить незаданий елемент.

Оператор delete видаляє пару ключ-значення, і це все. Звичайно, так як масив - це тільки хеш, позиція віддаленого елемента стає undefined.

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

Метод splice

Метод splice може видаляти елементи та замінювати їх у JavaScript багатовимірних масивах. Його синтаксис:

arr.splice(index, deleteCount[, elem1, ..., elemN])

Видаляє елемент deleteCount , починаючи з index , а потім вставляє його місце elem1, …, elemN .

Давайте розглянемо кілька прикладів:

var arr = ["Go", "to", "home"] arr.splice(1, 1) // видалити 1 елемент, починаючи з індексу 1 alert(arr.join(",")) // ["Go ", "home"] (1 елемент видалено)

Таким чином, ви можете використовувати splice, щоб видалити один елемент з масиву. Номери елементів масиву зсуваються, щоб заповнити пропуск:

var arr = ["Go", "to", "home"] arr.splice(0, 1) // видаляємо 1 елемент, починаючи з індексу 0 alert(arr) // "to" став першим елементом

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

Метод splice повертає масив віддалених елементів:

var arr = ["Go", "to", "home", "now"]; // видаляємо 2 перші елементи var removed = arr.splice(0, 2) alert(removed) // "Go", "to"<-- массив удаленных элементов splice может вставлять элементы, задайте 0 для deleteCount. var arr = ["Go", "to", "home"]; // со второй позиции // удаляем 0 // и вставляем "my", "sweet" arr.splice(2, 0, "my", "sweet") alert(arr) // "Go", "to", "my", "sweet", "home"

Цей метод також може використовувати негативний індекс, який відраховується з кінця масиву:

var arr = // для елемента -1 (передостаннього) // видаляємо 0 елементів, // і вставляємо 3 і 4 arr.splice(-1, 0, 3, 4) alert(arr) // 1,2,3, 4,5

Завдання для самостійного виконання

Об'єкт містить властивість className, в якому містяться імена класів, розділені пробілами:

var obj = (className: "open menu")

Напишіть функцію removeClass(obj, cls) , яка видаляє клас cls якщо він заданий:

removeClass(obj, "open") // obj.className="menu" removeClass(obj, "blabla") // без змін (класу для видалення не існує)

Рішення

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

Трохи оптимізуємо це:

function removeClass(elem, cls) ( for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) ( if (c[i] == cls ) c.splice(i,1) ) elem.className = c.join(" ") ) var obj = ( className: "open menu" ) removeClass(obj, "open") removeClass(obj, "blabla") alert (obj.className) // Menu

У наведеному прикладі змінна c задана на початку циклу, і для i заданий її останній індекс.

Сам цикл виконується у зворотному напрямку, закінчуючись умовою i>=0. Це зроблено тому, що i>=0 перевіряється швидше, ніж i. Що прискорює пошук властивості c .

Метод slice

Можна витягти частину масиву з допомогою методу slice(begin[, end]): var arr = ["Why", "learn", "JavaScript"]; var arr2 = arr.slice(0,2) // приймає 2 елементи, починаючи з 0 alert(arr2.join(", ")) // "Why, learn"

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

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

var arr = ["Why", "learn", "JavaScript"]; var arr2 = arr.slice(1) // приймає всі елементи, починаючи з 1 alert(arr2.join(", ")) // "learn, JavaScript"

Метод підтримує негативні індекси, як і, як String#slice .

Метод reverse

Ще один корисний метод – reverse. Припустимо, я хочу отримати останню частину домену, наприклад, “ com” від “ my.site.com”. Ось як це можна зробити:

var domain = "my.site.com" var last = domain.split(".").reverse() alert(last)

Зауважте, що JavaScript масиви підтримують складний синтаксис (reverse()) для виклику методу, а потім вилучення елемента з отриманого масиву.

Ви можете створювати довгі дзвінки, наприклад, reverse() 0] arr.sort() alert(arr) // 1, 15, 2

Запустіть наведений вище код. Ви отримаєте порядок 1, 15, 2. Це тому, що метод перетворює все на рядок і використовує за умовчанням лексикографічний порядок.

Поділися статтею: