Методы объекта Array

Реальная сила массивов JavaScript заключается в их встроенных свойствах и методах. Благодаря встроенным методам объекта Array, с массивами JavaScript можно делать самые разнообразные вещи без особых усилий и ресурсозатрат.

Преобразование массива в строку

JavaScript метод toString() преобразует массив в строку из значений элементов массива, разделенных запятыми.


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
document.getElementById("demo").innerHTML = fruits.toString(); 

В результате будет выведена строка "Банан, Апельсин, Яблоко, Манго".

Метод join() также объединяет все элементы массива в одну строку. Он действует как метод toString(), но при этом позволяет указать разделитель:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

В результате будет выведена строка "Банан * Апельсин * Яблоко * Манго".

Удаление и добавление элементов

Когда вы работаете с массивами, вам часто приходится удалять и добавлять элементы. При помощи специальных методов это можно сделать легко и безопасно.

Метод pop() удаляет последний элемент массива:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits.pop();              // удаляет последний элемент ("Манго") массива fruits 

При этом метод pop() возвращает значение удаленного элемента:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
var x = fruits.pop();      // в переменной x будет строка "Манго"

Метод push() добавляет новый элемент в конец массива:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits.push("Киви");       // добавляет новый элемент ("Киви") в конец массива fruits 

При этом метод push() возвращает новую длину массива:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
var x =  fruits.push("Киви");   // в переменной x будет 5 

Метод shift() удаляет первый элемент массива и сдвигает оставшиеся элементы к меньшим индексам:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits.shift();            // удаляет первый элемент "Банан" из массива fruits 

При этом метод shift() возвращает значение удаленного элемента:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
var x = fruits.shift();      // в переменной x будет строка "Банан"

Метод unshift() добавляет новый элемент в начало массива и передвигает другие элементы:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits.unshift("Лимон");    // добавляет новый элемент "Лимон" в массив fruits 

При этом метод unshift() возвращает новую длину массива:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
var x =  fruits.unshift("Лимон");   // в переменной x будет 5 

Изменение значений элементов

Доступ к значениям элементов массива осуществляется по номеру индекса элемента.

Нумерация индексов начинается с 0. Индекс первого элемента массива [0], второго - [1], третьего - [2] и т. д.


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits[0] = "Киви";        // изменит значение первого элемента массива fruits на "Киви" 

Свойство length позволяет легко добавлять новые элементы в конец массива:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits[fruits.length] = "Киви";          // добавляет новый элемент в массив fruit 

Стирание элементов

В связи с тем, что массивы в JavaScript являются объектами, существует еще один способ удаления элементов массива — при помощи оператора delete:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
delete fruits[0];           // значение первого элемента массива fruits изменится на undefined 

Внимание! Использование оператора delete может оставить в массиве неучитываемые "дыры" из значений undefined. Для удаления элементов массива лучше использовать метод pop() или shift().

Добавление группы элементов

Метод splice() используется для добавления в массив группы новых элементов:


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits.splice(2, 0, "Лимон", "Киви"); 

Первый параметр (2) определяет позицию, куда вставляются новые элементы.

Второй параметр (0) определяет, сколько элементов должно быть удалено.

Остальные параметры ("Лимон" , "Киви") определяют вставляемые элементы.

Метод splice() также можно использовать для удаления элементов из массива. Делает он это безопасно и чисто, не оставляя в массиве "дыр":


var fruits = ["Банан", "Апельсин", "Яблоко", "Манго"];
fruits.splice(0, 1);        // удаляет первый элемент массива fruits 

Первый параметр (0) определяет позицию, куда вставляются новые элементы.

Второй параметр (1) определяет, сколько элементов должно быть удалено.

Остальные параметры не заданы. Новые элементы не вставляются.

Слияние массивов

Метод concat() создает новый массив путем слияния (объединения) существующих массивов.

Пример (Слияние двух массивов):


var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);  // Слияние массивов myGirls и myBoys 

Метод concat() не изменяет существующие массивы. Он создает новый массив.

Метод concat() в параметрах может принимать любое число массивов.

Пример (Слияние трех массивов):


var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);     // Массив arr1 объединяется с arr2 и arr3 

В качестве параметров метод concat() может принимать как переменные, так и значения.

Пример (Слияние массива со значением):


var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);  

Извлечение части массива

Метод slice() позволяет извлечь (вырезать) часть массива в новый массив.

В следующем примере извлекается часть массив, начиная с элемента с индексом 1 ("Апельсин"):


var fruits = ["Банан", "Апельсин", "Лимон", "Яблоко", "Манго"];
var citrus = fruits.slice(1); 

Метод slice() создает новый массив. В исходном массиве никакие элементы не удаляются.

В следующем примере извлекается часть массив, начиная с элемента с индексом 3 ("Яблоко"):


var fruits = ["Банан", "Апельсин", "Лимон", "Яблоко", "Манго"];
var citrus = fruits.slice(3); 

Метод slice() принимает два параметра. Например, slice(1, 3). В этом случае метод slice() выбирает элементы, начиная с элемента с индексом, указанным в первом параметре, и заканчивая (но не включая) элементом с индексом, указанным во втором параметре. Если второй параметр не задан, то извлекаются все элементы до конца массива.

Автоматическое применение toString()

Если элементами массива являются примитивные значения, то JavaScript автоматически преобразует массив в строку из разделенных запятыми значений его элементов.

Это всегда происходит при попытке вывода массива.

Следующие два примера дадут одинаковые результаты:

Пример 1


var fruits = ["Банан", "Апельсин", "Лимон", "Яблоко", "Манго"];
document.getElementById("demo").innerHTML = fruits.toString(); 

Пример 2


var fruits = ["Банан", "Апельсин", "Лимон", "Яблоко", "Манго"];
document.getElementById("demo").innerHTML = fruits; 

У всех объектов JavaScript есть метод toString().