Добрый день! Продолжим знакомиться с массивами в JavaScript. В предыдущем посте я описал лишь часть методов для работы с массивами.
Здесь мы поговорим о добавлении, удалении элементов массива. О переворачивании и сортировке массива, а так же о нарезке, замене и комбинировании массивов.
Поехали!
Добавление элементов в массив.
Вы можете использовать свойство length для добавления новых элементов в массив:
var myArray = ["Apple", "Microsoft", "Google", "Facebook"]; myArray[myArray.length] = "Yahoo!"; console.log(myArray); // ["Apple", "Microsoft", "Google", "Facebook", "Yahoo!"]
Это сработает, т.к. элементы массива нумеруются с нуля, а length на единицу больше. Length всегда эквивалентно index + 1, поэтому очень легко добавить новый элемент в конец массива. Странно, но вы можете добавить элемент на позицию, которая намного больше, чем длина самого массива:
var myArray = ["Jimi Hendrix", "Eric Clapton", "Jimmy Page", "Keith Richards"]; myArray[99] = "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[1]; // удалить Eliza console.log(myArray.length); // 4 console.log(myArray); // ["Byte Bandit", undefined × 1, "Jeefo", "Michelangelo"]
Первое важное замечание: delete() не изменяет длину массива после удаления элемента (даже, если это был последний элемент в массиве). Второе: delete() изменяет значение удаляемого элемента на undefined, поэтому при обращении myArray[1] = 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 = [0, 4, 12, 17, 103]; console.log(myArray); // [0, 4, 12, 17, 103] myArray = myArray.sort(); console.log(myArray); // [0, 103, 12, 17, 4]
Если нужно отсортировать числа, то можно использовать следующий код:
function compareNumbers(a, b) { return a - b; } var myArray = [0, 103, 12, 17, 4]; console.log(myArray); // [0, 103, 12, 17, 4] myArray = myArray.sort(compareNumbers); console.log(myArray); // [0, 4, 12, 17, 103]
Как показано выше, с помощью простой функции, вставленной в 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"]
В данном случае 0, 4 означает взять элементы с 0 индекса по 3, включительно.
Замена элементов в массиве.
Мы используем 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+, поэтому могут оказаться бесполезными.
Есть что добавить? Или знаете какую-нибудь интересную библиотеку, которая поможет управлять массивами? Комментируйте, пожалуйста!
Спасибо за внимание!