Перегляд вихідного коду сторінки Робота з масивами в JavaScript

'''Масиви''' - це тип даних, який може містити багато значень. Іншими словами, змінна типу масив - це змінна, яка містить в собі не одне значення (як було раніше), а багато значень одночасно.


== Створення ==

Створення порожнього масиву та задання значень перших двох елементів
 var myArray = new Array ()
 myArray [0] = 'Москва'
 myArray [1] = 'Хабаровськ'

Створення нового масиву і резервування місця для 100 змінних
 var myArray = new Array (100)


Створення нового масиву і явна ініціалізація першого елемента
 var myArray = new Array ('Елемент');


Непряме створення масиву з двох елменетов
 var myArray = ['перший елемент', 'другий елемент']

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

 var myArray = new Array ()
 myArray [0] = 'Пітер'

Масиви в JavaScript не обов'язково повинні бути "суцільними", тобто містити всі елементи. При необхідності можна створювати так звані "розріджені" масиви:

 var myArray = new Array (); 
 myArray [0] = 'Пітер' 
 // пропустимо myArray [1] 
 myArray [2] = 'Гомель' 
 // пропустимо myArray [3] 
 myArray [4] = 'Рязань' 
 myArray [5] = 'Псков' 
 for (i = 0; i <6; i + +) 
 alert (myArray [i]) 

Цей код створює масив і заповнює тільки необхідні елементи. Тепер якщо ми спробуємо отримати значення не ініціалізованих елемента (у прикладі це перший і третій), то отримаємо "undefined". Використання розріджених масивів іноді дуже зручно, але вимагає досвіду та уважності, тому на початковому етапі краще від них відмовитися. Крім того, розріджені масиви не дають вигоди з використання пам'яті, тому що місце резервується для всіх елементів, у тому числі не ініціалізованих.
Елементами масиву можуть бути змінні будь-якого типу. Цікава особливість JavaScript - масив може одночасно містити елементи різних типів, у тому числі масиви:


Масив з елементами різних типів

 var myArrayS = new Array ();
 myArrayS [0] = 'Ярославль';
 myArrayS [1] = 10000;
 myArrayS [2] = 'Ямал';
 myArrayS [3] = 5000;
 for (i = 0; i <myArrayS.length; i + = 2)
	 alert ('Місто:' + myArrayS [i] + '\ n' + 
    	   'Населення:' + myArrayS [i + 1] + '\ n')

Масив з елементами-масивами
 var myArrayA = new Array ()
 myArrayA [0] = new Array ('Ярославль', 10000);
 myArrayA [1] = new Array ('Ставрополь', 5000);
 for (i = 0; i <myArrayA.length; i + +)
	 alert ('Місто:' + myArrayA [i] [0] + '\ n' + 
    	   'Населення:' + myArrayA [i] [1] + '\ n')

		
Клас Array містить єдине властивість - length, що дозволяє дізнатися поточну довжину масиву:

 var myArray = new Array ();
 ...
 // Дізнатися кількість елементів
 alert (myArray.length)
 // Додати елемент останнім
 myArray [myArray.length] = 'останнє значення' 

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

== Методи ==

=== push ===

'''Cинтаксис'''

 array.push (elem1, elem2, ...)

'''Аргументи'''

 elem1, elem2, ...
Ці елементи будуть додані в кінець масиву

'''Опис, приклади'''

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

Він додає елементи, починаючи з поточної довжини length і повертає нову, збільшену довжину масиву.

'''Приклад:''' додавання двох елементів

 // array.length = 2
 var array = [ "one", "two" ]  
 // додати елементы "three", "four"
 var pushed = array.push("three", "four") 
 // тепер array = [ "one", "two", "three", "four" ] 
 // array.length = 4
 // pushed = 4

=== shift ===

'''Синтаксис'''

 var elem = arrayObj.shift ()

'''Опис, приклади'''

Видаляє елемент з індексом 0 і зрушує інші елементи на один вниз. Повертає видалений елемент

 var arr = ["мой","маленький", "массив"]
 var my = arr.shift() // => "мой"
 alert(arr[0]) // => "маленький"
 // тепер arr = ["маленький", "массив"]

=== join ===

'''Синтаксис'''

 arrayObj.join ([glue])

'''Аргументи'''

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

'''Опис, приклади'''

 var arr = [ 1, 2 , 3 ]
 arr.join('+')  // "1+2+3"
 arr.join()  // "1,2,3"

=== concat ===

'''Синтаксис'''

 var newArray = array.concat (value1, value2, ..., valueN)

'''Аргументи'''

 value1, value2, ...
Масиви або значення для приєднання

'''Опис, приклади'''

Приклад: об'єднання двох масивів

 var alpha = ["a", "b", "c"];
 var numeric = [1, 2, 3];
 // створює масив ["a", "b", "c", 1, 2, 3]; 
 var alphaNumeric = alpha.concat(numeric);

Приклад: об'єднання трьох масивів

 var num1 = [1, 2, 3];
 var num2 = [4, 5, 6];
 var num3 = [7, 8, 9];
 // створює масив [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
 var nums = num1.concat(num2, num3);

Приклад: додавання значень у масив

 var alpha = ['a', 'b', 'c'];
 // створює масив ["a", "b", "c", 1, 2, 3]
 var alphaNumeric = alpha.concat(1, [2, 3]);

=== pop ===

'''Синтаксис'''

 arrayObj.pop ()

'''Опис, приклади'''

Цей метод змінює вихідний масив.

myFish = ["angel", "clown", "mandarin", "surgeon"];
popped = myFish.pop();
// тепер popped = "surgeon"
// myFish = ["angel", "clown", "mandarin"]

=== unshift ===

'''Синтаксис'''

 arrayObj.unshift ([elem1 [, elem2 [, ... [, elemN]]]])

'''Аргументи'''

 elem1, elem2, ..., elemN
Додаються в початок масиву елементи. Додані елементи збережуть порядок проходження.

'''Опис, приклади'''

Даний метод змінює вихідний масив. Додає в нього аргументи і повертає вийшла довжину.

 var arr = ["a", "b"]
 unshifted = arr.unshift(-2, -1);
 alert(arr ); // [ -2, -1, "a", "b"]
 alert("New length: " + unshifted); // 4

=== slice ===

'''Синтаксис'''

 arrayObj.slice (start [, end])

'''Аргументи'''

''start''
Індекс елемента в масиві, з якого буде починатися новий масив.

''end''
Необов'язковий параметр. Індекс елемента в масиві, на якому новий масив завершиться. При цьому останнім у новому масиві буде елемент з індексом end-1

Якщо start негативний, то він буде трактуватися як arrayObj.length + start (тобто start'ий елемент з кінця масиву).
Якщо end від'ємний, то він буде трактуватися як arrayObj.length + end (тобто end'ий елемент з кінця масиву).
Якщо другий параметр не вказаний, то екстракція продовжиться до кінця масиву. Якщо end <start, то буде створений порожній масив.

'''Опис, приклади'''

Даний метод не змінює вихідний масив, а просто повертає його частину.

Приклад: Елементи з середини

 var arr = [ 1, 2, 3, 4, 5 ] 
 arr.slice(2) // => [3, 4, 5]
 arr.slice(1, 4) // => [2, 3, 4]
 arr.slice(2, 3) // => [3]

Приклад: Відлік з кінця

 arr = [1, 2, 3, 4, 5]
 arr.slice(-2) // => [4, 5]
 arr.slice(arr.length - 2) // теж саме
 arr.slice(-3, -1) // [3, 4]
 arr.slice(arr.length-3, arr.length-1) // теж саме

=== reverse ===

'''Синтаксис'''

 arrayObj.reverse ()

'''Опис, приклади'''

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

Він повертає посилання на змінений масив.

 arr = [1,2,3]
 a = arr.reverse() // [ 3, 2, 1]
 for(var i=0; i<a.length; i++) {
   alert(a[i]) // 3, 2, 1
 }

Зверніть увагу, ніякого нового масиву не створюється. Змінюється сам масив arr і повертається посилання на змінений масив.

 arr = [1,2,3]
 a = arr.reverse() // [ 3, 2, 1]
 alert(a === arr) // true

=== sort ===

'''Синтаксис'''

 arrayObj.sort ([sortFunction])

'''Аргументи'''

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

 function sortFunction(a, b){
  if(a меньш, за b по деякому критерію)
     return -1 // або будь-яке число, меньше 0
  if(a більше, ніж b по деякому критерію)
     return 1  // або будь-яке число, білше 0
  // у випадку а = b повернути 0
  return 0
 }

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

'''Опис, приклади'''

Даний метод змінює вихідний масив. Одержаний масив також повертається в якості результату.

 arr = [1,-1, 0]
 a = arr.sort() 
 // => arr = [ -1, 0, 1 ]
 alert(a === arr) // => true, це то й же сортований масив

=== splice ===

'''Синтаксис'''

 arrayObj.splice (start, deleteCount, [elem1 [, elem2 [, ... [, elemN]]]])

'''Аргументи'''

''start''
Індекс в масиві, з якого починати видалення.
''deleteCount''
Кількість елементів, яке потрібно видалити, починаючи з індексу start.
IE: якщо цей параметр не вказаний, то жоден елемент не буде видалений.
Firefox: якщо цей параметр не вказаний, то будуть видалені всі елементи, починаючи з індексу start.
Opera: (досліджено у версії 9.61) якщо цей параметр не вказаний, то будуть видалено 1 елемент, що має індекс start +1. У цьому ж випадку замість вилученого елемента буде повернута порожній рядок.

 elem1, elem2, ..., elemN
Додаються елементи в масив. Додавання починається з позиції start.

'''Опис, приклади'''

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

Приклад: Видалення

 arr = [ "a", "b", "c", "d", "e" ]
 removed = arr.splice(1,2) 
 // removed = [ "b", "c"] (2 елемента с arr[1])
 // arr = ["a", "d", "e"] (ті що залишились)

Приклад: Видалення одного елемента

 arr = [ "a", "b", "c", "d", "e" ]
 // видалим з індексу 2 один елемент
 arr.splice(2,1) 
 // arr = ["a", "b", "d", "e"]

Приклад: Додавання елементів

 arr = [ "a", "b", "c", "d", "e" ]
 // починаючи з індексу 2 видалим 0 елементів 
 // та добавимо "b+"
 arr.splice(2,0,"b+")
 // arr = ["a", "b", "b+", "c", "d", "e"]

Приклад: З кінця

 arr = [ "a", "b", "c", "d", "e" ]
 // видалим з індексу 1 починаючи з кінця 1 елемент
 arr.splice(-1,1)

<codeblock type="jsfiddle">YaroslavGolinskij|6s6qE</codeblock>