JavaScript: методы работы с массивами. Часть 2.

Добрый день! Продолжим знакомиться с массивами в 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+, поэтому могут оказаться бесполезными.

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

 

Спасибо за внимание!

 

 

Автор статьи: Alex. Категория: JavaScript
Дата публикации: 07.04.2013