Я описал лишь часть методов для работы с массивами.

Здесь мы поговорим о добавлении, удалении элементов массива. О переворачивании и сортировке массива, а так же о нарезке, замене и комбинировании массивов.

Добавление элементов в массив.

Вы можете использовать свойство length для добавления новых элементов в массив:

Var myArray = ["Apple", "Microsoft", "Google", "Facebook"]; myArray = "Yahoo!"; console.log(myArray); // ["Apple", "Microsoft", "Google", "Facebook", "Yahoo!"]

Это сработает, т.к. элементы массива нумеруются с нуля, а length на единицу больше. Length всегда эквивалентно index + 1 , поэтому очень легко добавить новый элемент в конец массива. Странно, но вы можете добавить элемент на позицию, которая намного больше, чем длина самого массива:

Var myArray = ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards"]; myArray = "Lindsey Buckingham"; console.log(myArray); // ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards", undefined × 95, "Lindsey Buckingham"] console.log(myArray.length); // 100

Как показано в комментариях, будет добавлено 95 пустых слотов и элемент «Lindsey Buckingham» в конец массива. После этого мы получим длину 100. Еще один способ добавить новый элемент в массив — использовать метод push():

Var myArray = ["Paul McCartney", "John Lennon", "George Harrison"]; myArray.push("Ringo Starr", "George Martin"); console.log(myArray); // ["Paul McCartney", "John Lennon", "George Harrison", "Ringo Starr", "George Martin"]

Метод push() всегда возвращает новую длину массива (в нашем случае 5). Добавить элемент можно с помощью splice():

Var myArray = ["acorn", "beech", "mongongo", "macadamia"]; myArray.splice(2, 0, "cashew"); // adds "cashew" into index 2 console.log(myArray); // ["acorn", "beech", "cashew", "mongongo", "macadamia"]

Когда второй аргумент 0, то это означает, что ни один элемент не будет удален, а поэтому любые последующие аргументы будут добавлены в массив в позицию, указанную в первом аргументе.

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

Удалить элемент немножко сложнее, чем его добавить. Чтобы удалить элемент из конца массива, можно использовать pop():

Var myArray = ["7-up", "Sprite", "Ginger Ale", "Lemonade"]; myArray.pop(); console.log(myArray); // ["7-up", "Sprite", "Ginger Ale"]

Метод pop() всегда удаляет последний элемент в массиве и возвращает его.

Вы так же можете использовать splice() метод:

Var myArray = ["cassava", "nutmeg", "lupin", "rhubarb"]; myArray.splice(2, 1); // удалить элемент с индексом 2 console.log(myArray); // ["cassava", "nutmeg", "rhubarb"]

В отличии от метода splice(), который используется для добавления элементов, здесь вторым аргументом идет 1, которая говорит, что мы хотим удалить элемент с индексом 2 (или 3-ий по счету). В данном случае удалился элемент «lupin».

Вы можете удалить элемент массива используя оператор delete:

Var myArray = ["Byte Bandit", "Eliza", "Jeefo", "Michelangelo"]; console.log(myArray.length); // 4 delete myArray; // удалить Eliza console.log(myArray.length); // 4 console.log(myArray); // ["Byte Bandit", undefined × 1, "Jeefo", "Michelangelo"]

Первое важное замечание: delete() не изменяет длину массива после удаления элемента (даже, если это был последний элемент в массиве). Второе: delete() изменяет значение удаляемого элемента на undefined, поэтому при обращении myArray = undefined .

Хороший способ удалить элемент из массива — использовать John Resig’s Array.remove . Ниже пример использования, взятый с его страницы:

// Array Remove - By John Resig (MIT Licensed) Array.prototype.remove = function(from, to) { var rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from: from; return this.push.apply(this, rest); }; // Удаление 2 элемента из массива array.remove(1); // Удаление 2-ого элемента с конца массива array.remove(-2); // Удаление второго и третьего элемента array.remove(1,2); // Удаление последнего и предпоследнего элемента array.remove(-2,-1);

Возможно вы захотите посмотреть решение by Viral Patel , одну из функций в Underscore.js , или jQuery’s grep() .

Дополнительно, в JavaScript есть метод shift(), который удаляет первый элемент в массиве и возвращает его значение. Посмотрим код:

Var myArray = ["Matt Kramer", "Jason Bieler", "Tom Defile", "Phil Varone"]; console.log(myArray.length); // 4 var firstItem = myArray.shift(); console.log(firstItem); // Matt Kramer console.log(myArray.length); // 3 console.log(myArray); // ["Jason Bieler", "Tom Defile", "Phil Varone"]

С помощью метода shift() мы удалили элемент, но сохранили его значение в нашей переменной firstItem. Длина массива изменилась с 4 на 3.

Этот метод может быть полезен вместе с методом push(). Используя их вместе мы можем эффективно выстраивать очередь элементов в массиве. Мы сохраняем длину массива удаляя элемент с начала и добавляя новый в конец.

Наоборот, мы можем использовать метод unshift() для добавления элемент в начало массива:

Var myArray = ["apito", "castanets", "maraca"]; console.log(myArray.length); // 3 myArray.unshift("chime bar", "tan-tan"); console.log(myArray.length); // 5 console.log(myArray); // ["chime bar", "tan-tan", "apito", "castanets", "maraca"]

Используя метод unshift() с методом pop(), вы можете создавать очереди в обратную сторону, добавляя элементы в начало и удаляя с конца массива.

Переворачивание и сортировка элементов массива.

Чтобы перевернуть элементы в массиве, мы можем использовать reverse():

Var myArray = ["countdown", "final", "the"]; console.log(myArray); // ["countdown", "final", "the"] myArray = myArray.reverse(); console.log(myArray); // ["the", "final", "countdown"]

Сортировать элементы массива в алфавитном порядке возможно с помощью метода sort():

Var myArray = ["xylophones", "zebras", "juggernauts", "avocados"]; console.log(myArray); // ["xylophones", "zebras", "juggernauts", "avocados"] myArray = myArray.sort(); console.log(myArray); // ["avocados", "juggernauts", "xylophones", "zebras"]

Но это не будет работать с числами.

Var myArray = ; console.log(myArray); // myArray = myArray.sort(); console.log(myArray); //

Если нужно отсортировать числа, то можно использовать следующий код:

Function compareNumbers(a, b) { return a - b; } var myArray = ; console.log(myArray); // myArray = myArray.sort(compareNumbers); console.log(myArray); //

Как показано выше, с помощью простой функции, вставленной в sort(), массив, содержащий числа, будет отсортирован правильно.

Объединение массивов.

Мы можете объединить 2 или больше массивов и получить 1 массив, который содержит элементы соединенных массивов. Для этого используем метод concat():

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myArray2 = ["Chris Murphy", "Patrick Pentland"]; var myNewArray = myArray.concat(myArray2); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Var myArray = ["Jay Ferguson", "Andrew Scott"]; var myNewArray = myArray.concat("Chris Murphy", "Patrick Pentland"); console.log(myNewArray); // ["Jay Ferguson", "Andrew Scott", "Chris Murphy", "Patrick Pentland"]

Разделение массива.

Мы можете создать новый массив, содержащий 1 или более элементов из существующего массива, используя функцию slice():

Var myArray = ["Vocals", "Bass", "Guitar", "Drums", "Apples", "Oranges"]; var myNewArray = myArray.slice(4); console.log(myNewArray); // ["Apples", "Oranges"]

Метод slice() принимает 1 или 2 аргумента. Если передан 1 аргумент (индекс), то новый массив создается из всех элементов старого, начиная с данного индекса. Если передано 2 аргумента, то новый массив создается из элементов, начиная с первого аргумента и до элемента с индексом, переданным во втором параметре, не включая последний. Чтобы было понятней, посмотрим код ниже:

Var myArray = ["Vocals", "Bass", "Guitar", "Drums", "Apples", "Oranges"]; var myNewArray = myArray.slice(0, 4); console.log(myNewArray); // ["Vocals", "Bass", "Guitar", "Drums"]

Замена элементов в массиве.

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

Var myArray = ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Matt Sharp"]; myArray.splice(3, 1, "Scott Shriner"); // заменить 1 элемент с индексом 3 console.log(myArray); // ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Scott Shriner"]

Метод splice() всегда возвращает массив, содержащий элементы, которые были удалены. В строчке 2 будет возвращен 1 элемент «Brian Bell».

Заключение

В данных статьях были описаны методы работы с массивами в JavaScript. Некоторые дополнительные элементы можно посмотреть на MDN , которые я не включил в данный пост. Они работают только в IE9+, поэтому могут оказаться бесполезными.

Есть что добавить? Или знаете какую-нибудь интересную библиотеку, которая поможет управлять массивами? Комментируйте, пожалуйста!

Массивы — это один из самых часто используемых видов переменных, которые позволяют хранить множество последовательных значений в “одном месте”. Однако когда речь идёт о JavaScript-е, то тут есть куда капнуть.

В этой статье мы рассмотрим тройку малоизвестных техник, которые можно применить при работе с массивами.

1. Добавление пользовательских свойств к массивам

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

Вообще говоря, множество вещей с которыми мы сталкиваемся в JavaScript-е представляет собой объекты. Справедливо будет отметить, что в языке так же присутствую и “примитивные” типы данных, но их значения так или иначе используются в свойствах внутри объектов.

2. Доступ к элементам массива в рамках цикла

Поскольку индексы массивов могут принимать только положительные значения, начало отсчёта начинается с нуля. Впоследствии мы можем использовать данный индекс для доступа к элементу массива на данной итерации цикла.

В ECMAScript6 был представлен способ прокрутки массива без использования индексов, а через новый цикл for…of .

Цикл for...of предназначен для прохода по элементам массива, не затрагивая при этом индекс элемента.

Var ary = ["orange","apple","lychee"]; for (let item of ary){ console.log(item); } // "orange", "apple", "lychee" Для сравнения: вывод индексов элементов в цикле for. var ary = ["orange","apple","lychee"]; for (var item = 0; item < ary.length; item++){ console.log(item); } // 0, 1, 2

3. Количество элементов — не размерность массива

Когда речь идёт о размерности массива, то обычно мы думаем, что подразумевается количество хранящихся в нём элементов. На деле это не совсем так — свойство length рассчитывается в зависимости от максимального индекса элемента.

Свойство length очень неоднозначно. Чтобы в этом убедиться достаточно взглянуть на следующие манипуляции:

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6

В последнем примере было достаточно поставить элемент на пятую позицию, в результате чего длина массива стала равна 6. Если вы думаете, что индексы от 0 до 4 создадутся автоматически, то будете неправы. Это можно проверить, используя оператор in .

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 console.log(0 in ary); // false

В данном случае будет справедливо назвать массив ary "разрежённым".

Так же мы можем манипулировать свойством length для того чтобы обрезать массивы. В примере, представленном ниже, демонстрируется “потеря” элемента под индексом 5, путём уменьшения значения свойства length массива ary .

Var ary = ; ary.length = 3; console.log(ary.length); // 3 ary = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary); // undefined

Чем отличается массив от переменной

Для того, чтобы лучше понять что такое массивы в Javascript, да и в любом другом языке программирования, я покажу примеры на реальных объектах из жизни.

Когда вы приходите в супермаркет, вы можете увидеть шкаф с ячейками, в одну из которых вы можете положить свои вещи.

У каждой ячейки есть номер. Именно по этому номеру, по окончанию покупок, вы можете понять в какой именно ячейке лежат ваши вещи.

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

Как создать массив в Javascript

В языке Javascript массив можно создать разными способами.

Первый способ создания массива в Javascript

Этот способ для числовых данных и объектов:

Этот способ для строк:

Данным способом мы создали массив из четырех элементов.

Второй способ создания массива в Javascript

Второй способ создания массивов в Javascript через объекты.

Выглядит это так:

array = new Array(1, 23, 15, 10, 33);

Для строковых данных массива, строки нужно заключить в кавычки.

Как обратиться к массиву в Javascript

Для того, чтобы обратиться к первому элементу массива, нужно написать:

где, достаем первый элемент массива - array. Console.log - отображает содержимое массива.

Нумерация массивов начинается с нуля. Именно поэтому когда мы обращаемся array нам выводится значение первого элемента 1 или в примере со строками - Один.

Методы работы с массивами

В Javascript существуют методы для работы с массивами. Эти методы очень полезны и некоторые программисты по непонятной причине избегают их и пишут свои велосипеды.

Метод Reverse

Метод reverse изменяет массив и формирует новый массив с элементами в обратном порядке.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.reverse();

Результат:

["Четыре", "Три", "Два", "Один"]

Метод Concat

Метод concat объединяет массив с другим массивом или данным. Метод concat не изменяет исходный массив.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.concat(12);

Результат:

["Один", "Два", "Три", "Четыре", 12]

Метод Slice

Метод slice обрезает часть строки и может принимать на вход как два параметра(начало и конец), так и один параметр.

Если второй параметр задать -1, тогда он вернет остальную часть строки c предпоследним элементом.

Метод slice не изменяет исходный массив.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.slice(1,-1);

Результат:

Метод Splice

Метод splice достаточно многофункциональный.

На вход он принимает три аргумента:

2. Количество элементов массива которые нужно удалить

3. Третий аргумент - это значения которые нужно вставить туда, откуда мы удалили элементы массива

Метод splice изменяет исходный массив.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.splice(1, 2, "2", "3");

Результат:

["Один", "2", "3", "Четыре"]

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

Метод Push

Метод push вставляет элемент в конец массива

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.push("Пять");

Результат:

["Один", "Два", "Три", "Четыре", "Пять"]

Метод UnShift

Метод unshift вставляет элемент в начало массива

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.unshift("Ноль");

Результат:

["Ноль", "Один", "Два", "Три", "Четыре"]

Метод Pop

Метод pop удаляет последний элемент из массива и возвращает удаленный элемент.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.pop();

Результат:

["Один", "Два", "Три"]

Метод Shift

Метод shift удаляет первый элемент из массива и возвращает удаленный элемент.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

Результат:

["Два", "Три", "Четыре"]

Метод Join

Метод join в Javascript преобразует массив в строку и позволяет задать свой собственный разделитель. По умолчанию, метод join в качестве разделителя использует запятую. Давайте попробуем поставить разделитель "-".

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.join("-");

Результат:

Один-Два-Три-Четыре

Метод Sort

Метод Soft по умолчанию сортирует массив в алфавитном порядке. Мы можем передать ему функцию с другой логикой сортировки. Об этом поговорим в отдельной статье посвященный методам отдельно.

Пример:

array = ["а", "в", "б", "г"];

Результат:

["а", "б", "в", "г"]

Работа с массивами в циклах

Циклы - это очень важные методы для работы с массивами. С помощью них мы можем обращаться к отдельно взятому элементу массива и проходить по всему массиву.

Цикл FOR

Простой цикл для перебора массива

Пример:

Результат:

Один
Два
Три
Четыре

Цикл ForEach

Улучшенный цикл для перебора массива. На вход может принимать три элемента: element, index, array.

Пример 1:

Результат:

Один
Два
Три
Четыре

Пример 2:

Метод toUpperCase() делает все элементы с большой буквы

Результат:

["ОДИН", "ДВА", "ТРИ", "ЧЕТЫРЕ"]

Выводы о массивах в Javascript

Для работы с массивами в Javascript существует много методов. В этой статье мы рассмотрели не все методы, в следующих статьях обязательно уделим им внимание, но если вы будете уметь пользоваться методами работы с массивами из этой статьи, ваш скилл будет плюс 150 процентов и вы значительно повысите свой уровень frontend разработчика на языке программирования Javascript.

Следите за новыми статьями и видеоуроками, подписывайтесь на наш канал YouTube и вступайте в группу