Робота з масивами в 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)