Я описал лишь часть методов для работы с массивами.
Здесь мы поговорим о добавлении, удалении элементов массива. О переворачивании и сортировке массива, а так же о нарезке, замене и комбинировании массивов.
Вы можете использовать свойство 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-е, то тут есть куда капнуть.
В этой статье мы рассмотрим тройку малоизвестных техник, которые можно применить при работе с массивами.
Если вы воспользуетесь поиском для того чтобы найти определение массива в рамках языка JavaScript, то в большинстве источников будет утверждаться что данный тип значения переменной представляется в виде объекта.
Вообще говоря, множество вещей с которыми мы сталкиваемся в JavaScript-е представляет собой объекты. Справедливо будет отметить, что в языке так же присутствую и “примитивные” типы данных, но их значения так или иначе используются в свойствах внутри объектов.
Поскольку индексы массивов могут принимать только положительные значения, начало отсчёта начинается с нуля. Впоследствии мы можем использовать данный индекс для доступа к элементу массива на данной итерации цикла.
В 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
Когда речь идёт о размерности массива, то обычно мы думаем, что подразумевается количество хранящихся в нём элементов. На деле это не совсем так — свойство 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 через объекты.
Выглядит это так:
array = new Array(1, 23, 15, 10, 33);
Для строковых данных массива, строки нужно заключить в кавычки.
Для того, чтобы обратиться к первому элементу массива, нужно написать:
где, достаем первый элемент массива - array. Console.log - отображает содержимое массива.
Нумерация массивов начинается с нуля. Именно поэтому когда мы обращаемся array нам выводится значение первого элемента 1 или в примере со строками - Один.
В Javascript существуют методы для работы с массивами. Эти методы очень полезны и некоторые программисты по непонятной причине избегают их и пишут свои велосипеды.
Метод reverse изменяет массив и формирует новый массив с элементами в обратном порядке.
Пример:
array = ["Один", "Два", "Три", "Четыре"];
array.reverse();
Результат:
["Четыре", "Три", "Два", "Один"]
Метод concat объединяет массив с другим массивом или данным. Метод concat не изменяет исходный массив.
Пример:
array = ["Один", "Два", "Три", "Четыре"];
array.concat(12);
Результат:
["Один", "Два", "Три", "Четыре", 12]
Метод slice обрезает часть строки и может принимать на вход как два параметра(начало и конец), так и один параметр.
Если второй параметр задать -1, тогда он вернет остальную часть строки c предпоследним элементом.
Метод slice не изменяет исходный массив.
Пример:
array = ["Один", "Два", "Три", "Четыре"];
array.slice(1,-1);
Результат:
Метод splice достаточно многофункциональный.
На вход он принимает три аргумента:
2. Количество элементов массива которые нужно удалить
3. Третий аргумент - это значения которые нужно вставить туда, откуда мы удалили элементы массива
Метод splice изменяет исходный массив.
Пример:
array = ["Один", "Два", "Три", "Четыре"];
array.splice(1, 2, "2", "3");
Результат:
["Один", "2", "3", "Четыре"]
Третий агрумент в методе splice необязателен. Если не использовать третий агрумент, тогда метод splice удалит указанные в первых двух аргументах элементы массива и вернет новый массив без этих элементов.
Метод push вставляет элемент в конец массива
Пример:
array = ["Один", "Два", "Три", "Четыре"];
array.push("Пять");
Результат:
["Один", "Два", "Три", "Четыре", "Пять"]
Метод unshift вставляет элемент в начало массива
Пример:
array = ["Один", "Два", "Три", "Четыре"];
array.unshift("Ноль");
Результат:
["Ноль", "Один", "Два", "Три", "Четыре"]
Метод pop удаляет последний элемент из массива и возвращает удаленный элемент.
Пример:
array = ["Один", "Два", "Три", "Четыре"];
array.pop();
Результат:
["Один", "Два", "Три"]
Метод shift удаляет первый элемент из массива и возвращает удаленный элемент.
Пример:
array = ["Один", "Два", "Три", "Четыре"];
Результат:
["Два", "Три", "Четыре"]
Метод join в Javascript преобразует массив в строку и позволяет задать свой собственный разделитель. По умолчанию, метод join в качестве разделителя использует запятую. Давайте попробуем поставить разделитель "-".
Пример:
array = ["Один", "Два", "Три", "Четыре"];
array.join("-");
Результат:
Один-Два-Три-Четыре
Метод Soft по умолчанию сортирует массив в алфавитном порядке. Мы можем передать ему функцию с другой логикой сортировки. Об этом поговорим в отдельной статье посвященный методам отдельно.
Пример:
array = ["а", "в", "б", "г"];
Результат:
["а", "б", "в", "г"]
Циклы - это очень важные методы для работы с массивами. С помощью них мы можем обращаться к отдельно взятому элементу массива и проходить по всему массиву.
Простой цикл для перебора массива
Пример:
Результат:
Один
Два
Три
Четыре
Улучшенный цикл для перебора массива. На вход может принимать три элемента: element, index, array.
Пример 1:
Результат:
Один
Два
Три
Четыре
Пример 2:
Метод toUpperCase() делает все элементы с большой буквы
Результат:
["ОДИН", "ДВА", "ТРИ", "ЧЕТЫРЕ"]
Для работы с массивами в Javascript существует много методов. В этой статье мы рассмотрели не все методы, в следующих статьях обязательно уделим им внимание, но если вы будете уметь пользоваться методами работы с массивами из этой статьи, ваш скилл будет плюс 150 процентов и вы значительно повысите свой уровень frontend разработчика на языке программирования Javascript.
Следите за новыми статьями и видеоуроками, подписывайтесь на наш канал YouTube и вступайте в группу