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

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 ;);

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

Останнє оновлення: 26.03.2018

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

Ініціалізація масиву

Можна створити порожній масив, використовуючи квадратні дужкиабо конструктор Array:

Var users = новий Array(); var people = ; console.log(users); // Array console.log(people); // Array

Можна відразу ж ініціалізувати масив деякою кількістю елементів:

Var users = new Array("Tom", "Bill", "Alice"); var people = ["Sam", "John", "Kate"]; console.log(users); // ["Tom", "Bill", "Alice"] console.log(people); // ["Sam", "John", "Kate"]

Можна визначити масив і по ходу визначати в нього нові елементи:

Var users = новий Array(); users = "Tom"; users = "Kate"; console.log(users); // "Tom" console.log(users); // undefined

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

length

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

Var fruit = новий Array(); fruit = "яблука"; fruit = "груші"; fruit = "зливи"; document.write("У масиві fruit" + fruit.length + "елемента:
"); for(var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

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

Var users = новий Array(); // у масиві 0 елементів users = "Tom"; users = "Kate"; users = "Sam"; for(var i=0; i

Висновок браузера:

Tom Kate undefined undefined Sam

Незважаючи на те, що для індексів 2 та 3 ми не додавали елементів, але довжиною масиву в даному випадку буде число 5. Просто елементи з індексами 2 та 3 матимуть значення undefined .

Копіювання масиву. slice()

Копіювання масиву може бути поверхневим або неглибоким (shallow copy) та глибоким (deep copy).

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

Var users = ["Tom", "Sam", "Bill"]; console.log(users); // ["Tom", "Sam", "Bill"] var people = users; // Неглибоке копіювання people = "Mike"; // Змінюємо другий елемент console.log(users); // ["Tom", "Mike", "Bill"]

У цьому випадку змінна людина після копіювання буде вказувати на той самий масив, що і змінна користувача. Тому при зміні елементів у людей, зміняться елементи і в users, тому що фактично це один і той же масив.

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

Var users = ["Tom", "Sam", "Bill"]; console.log(users); // ["Tom", "Sam", "Bill"] var people = users.slice(); // Глибоке копіювання people = "Mike"; // Змінюємо другий елемент console.log(users); // ["Tom", "Sam", "Bill"] console.log(people); // ["Tom", "Mike", "Bill"]

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

Також метод slice() дозволяє скопіювати частину масиву:

Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var people = users.slice(1, 4); console.log(people); // ["Sam", "Bill", "Alice"]

Метод slice() передається початковий і кінцевий індекси, які використовуються для вибірки значень з масиву. Тобто в даному випадку вибірка в новий масив йде починаючи з 1 індексу індекс 4 не включаючи. І оскільки індексація масивів починається з нуля, то в новому масиві опиняться другий, третій та четвертий елемент.

push()

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

Var fruit =; fruit.push("яблука"); fruit.push("груші"); fruit.push("сливи"); fruit.push("вишня","абрикос")
"); document.write(fruit); // яблука,груші,сливи,вишня,абрикос

pop()

Метод pop() видаляє останній елемент з масиву:

Var fruit = ["яблука", "груші", "сливи"]; var lastFruit = fruit.pop(); // Витягуємо з масиву останній елемент document.write(lastFruit + "
"); document.write("У масиві fruit" + fruit.length + " елемента:
"); for(var i=0; i ");

Висновок браузера:

Сливи У масиві fruit 2 елементи: яблука груші

shift()

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

Var fruit = ["яблука", "груші", "сливи"]; var firstFruit = fruit.shift(); document.write(firstFruit + "
"); document.write("У масиві fruit" + fruit.length + " елемента:
"); for(var i=0; i ");

Висновок браузера:

Яблука У масиві fruit 2 елементи: груші сливи

unshift()

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

Var fruit = ["яблука", "груші", "сливи"]; fruit.unshift("абрикоси"); document.write(fruit);

Висновок браузера:

Абрикоси, яблука, груші, сливи

Видалення елемента за індексом. splice()

Метод splice() видаляє елементи з певного індексу. Наприклад, видалення елементів із третього індексу:

Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(3); console.log(deleted); // [ "Alice", "Kate"] console.log(users); // ["Tom", "Sam", "Bill"]

Метод slice повертає видалені елементи.

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

Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(-1); console.log(deleted); // [ "Kate"] console.log(users); // ["Tom", "Sam", "Bill", "Alice"]

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

Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(1,3); console.log(deleted); // ["Sam", "Bill", "Alice"] console.log(users); // [ " Tom " , " Kate " ]

Ще одна версія методу splice дозволяє вставити замість елементів, що видаляються, нові елементи:

Var users = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var deleted = users.splice(1,3, "Ann", "Bob"); console.log(deleted); // ["Sam", "Bill", "Alice"] console.log(users); // [ " Tom " , " Ann " , " Bob " , " Kate " ]

В даному випадку видаляємо три елементи з 1-ї по 3-й індекси і замість них вставляємо два елементи.

concat()

Метод concat() служить для об'єднання масивів:

Var fruit = ["яблука", "груші", "сливи"]; var vegetables = ["помідори", "огірки", "картопля"]; var products = fruit.concat(vegetables); for(var i=0; i< products.length; i++) document.write(products[i] + "
");

При цьому необов'язково поєднувати лише однотипні масиви. Можна і різнотипні:

Var fruit = ["яблука", "груші", "сливи"]; var prices =; var products = fruit.concat(prices);

join()

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

Var fruit = ["яблука", "груші", "сливи", "абрикоси", "персики"]; var fruitString = fruit.join(", "); document.write(fruitString);

Метод join() передається роздільник між елементами масиву. В даному випадку як роздільник буде використовуватися кома і пробіл (", ").

sort()

Метод sort() сортує масив за зростанням:

Var fruit = ["яблука", "груші", "сливи", "абрикоси", "персики"]; fruit.sort(); for(var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

Висновок у браузері:

Абрикоси груші персики сливи яблука

reverse()

Метод reverse() перевертає масив задом наперед:

Var fruit = ["яблука", "груші", "сливи", "абрикоси", "персики"]; fruit.reverse(); for(var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

Висновок у браузері:

Персики абрикоси сливи груші яблука

У поєднанні з методом sort() можна відсортувати масив за спаданням:

Var fruit = ["яблука", "груші", "сливи", "абрикоси", "персики"]; fruit.sort().reverse(); for(var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

Висновок у браузері:

Яблука сливи персики груші абрикоси

Пошук індексу елемента

Методи indexOf() та lastIndexOf() повертають індекс першого та останнього включення елемента в масиві. Наприклад:

Var fruit = ["яблука", "груші", "сливи", "яблука", "груші"]; var firstIndex = fruit.indexOf("яблука"); var lastIndex = fruit.lastIndexOf("яблука"); var otherIndex = fruit.indexOf("вишні"); document.write(firstIndex); // 0 document.write(lastIndex); // 3 document.write(otherIndex); // -1

firstIndex має значення 0, тому що перше включення стоки "яблука" в масиві посідає індекс 0, а останнє на індекс 3.

Якщо ж елемент відсутній у масиві, то цьому випадку методи indexOf() і lastIndexOf() повертають значення -1.

every()

Метод every() перевіряє, чи всі елементи відповідають певній умові:

Var numbers = [1, -12, 8, -4, 25, 42]; function condition(value, index, array) ( var result = false; if (value > 0) ( result = true; ) return result; ); var passed = numbers.every(condition); document.write(passed); // false

У метод every() як параметр передається функція, що представляє умову. Ця функція приймає три параметри:

Function condition(value, index, array) ( )

Параметр value представляє поточний елемент масиву, що перебирається, параметр index представляє індекс цього елемента, а параметр array передає посилання на масив.

У цій функції ми можемо перевірити передане значення елемента на відповідність будь-якій умові. Наприклад, у цьому прикладі ми перевіряємо кожен елемент масиву, чи більше він нуля. Якщо більше, то повертаємо значення true, тобто елемент відповідає умові. Якщо менше, то повертаємо false – елемент не відповідає умові.

У результаті, коли відбувається виклик методу numbers.every (condition), він перебирає всі елементи масиву numbers і по черзі передає їх у функцію condition. Якщо ця функція повертає значення true для всіх елементів, то метод every() повертає true . Якщо хоча б один елемент відповідає умові, то метод every() повертає значення false .

some()

Метод some() схожий метод every() , тільки він перевіряє, чи відповідає хоча б один елемент умові. І тут метод some() повертає true . Якщо елементів, що відповідають умові, у масиві немає, то повертається значення false:

Var numbers = [1, -12, 8, -4, 25, 42]; function condition(value, index, array) ( var result = false; if (value === 8) ( result = true; ) return result; ); var passed = numbers.some(condition); // true

filter()

Метод filter() , як some() і every() приймає функцію умови. Але при цьому повертає масив тих елементів, які відповідають цій умові:

Var numbers = [1, -12, 8, -4, 25, 42]; function condition(value, index, array) ( var result = false; if (value > 0) ( result = true; ) return result; ); var filteredNumbers = numbers.filter(condition); for(var i=0; i< filteredNumbers.length; i++) document.write(filteredNumbers[i] + "
");

Висновок у браузері:

1 8 25 42

forEach() і map()

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

Var numbers = [1, 2, 3, 4, 5, 6]; for(var i = 0; i "); }

Але за допомогою методу forEach() можна спростити цю конструкцію:

Var numbers = [1, 2, 3, 4, 5, 6]; function square(value, index, array) (var result = value * value; document.write("Квадрат числа" + value + "рівний" + result + "
"); ); numbers.forEach(square);

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

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

Наприклад, застосуємо метод map для обчислення квадратів чисел масиву:

Var numbers = [1, 2, 3, 4, 5, 6]; function square(value, index, array) ( return result = value * value; ); var squareArray = numbers.map(square); document.write(squareArray);

Функція, яка передається в метод map() отримує поточний елемент, що перебирається, виконує над ним операції і повертає деяке значення. Це значення потім потрапляє в результуючий масив squareArray

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

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

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

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

Раніше JavaScript масив оголошувався таким чином:

Var arr = новий Array (7, 8, "k", "v", 3.2, 4);

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

Var arr = [7, 8, "k", "v", 3.2, 4];

Тепер у змінну arr знаходиться одновимірний масив даних, різних типів.

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

Структура масивувиглядає так:

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

Наприклад виведемо на екран елемент, у якого індекс дорівнює 2, тобто букву "k".

Document.write("

Виводимо елемент масиву arr, у якого індекс дорівнює 2: "+arr+"

); // k

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

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

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

Для інтересу дізнаємось, яка довжина має масив arr.

Document.write("

Кількість елементів у масиві arr="+arr.length+"

); // Результат: 6

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

For(var i = 0; i< arr.length; i++){ document.write("

Елемент масиву arr, з індексом " + i + "дорівнює:" + arr[i] + "

"); }

Відкриваємо цю сторінку у браузері та бачимо таку картину:

Для тренування, спробуйте перебрати масив "arr" і за допомогою інших циклів, while та do-while.

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

Arr.forEach(alert);

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

Заповнення масиву за допомогою циклу

Наприклад, на якийсь масив, запишемо результати таблиці множення, від 1 до 10.

Спочатку необхідно оголосити порожній масив, якого і заповнюватимемо. Потім необхідно оголосити змінну і присвоїти їй відразу значення 0. Ця змінна буде як індекс для оголошеного масиву. І наступним кроком буде саме заповнення масиву за допомогою такого прийому як цикл цикл.

//Оголошуємо порожній масив var new_arr =; // Змінна як індекс для масиву new_arr var k = 0; for(var i = 1; i

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

Спочатку змінна i дорівнює одиничці. І ось ця одиниця множиться з усіма значеннями змінної j. Після того як пройшлися 10 разів по другому циклу повертаємось до першого циклу та інкрементуємо змінну i на одиницю. Тепер i дорівнює двійці. Знову йдемо до другого циклу та множимо значення 2 на всі значення змінної j(від 1 до 10). В результаті виходить другий ряд: 2 4 6 8 … 20. І так відбувається поки що, змінна i не стане рівно 11. Як тільки вона набуде такого значення, то ми виходимо з циклу.

Порахуємо суму всіх елементів з масиву

У нас є масив new_arr, в якому зберігається 100 чисел (ціла таблиця множення). Тепер порахуємо суму всіх цих елементів.

//Створюємо змінну суми var summ = 0; for(var i = 0; i< new_arr.length; i++){ summ += new_arr[i]; } document.write("

Сума елементів масиву new_arr дорівнює: + summ +

"); //Результат 3025

Ось і все, про що я хотів Вам розповісти в цій статті. Тепер Ви знаєте, як створювати масив, як його заповнюватиі як із ним працювати.

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

Масиви

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

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