Массивы в javascript

В javascript для манипуляции массивами существует определенное количество методов, в этой статье я постараюсь описать большую их часть. Как обычно я сделаю все возможное, чтобы текст был предельно лаконичным, но, если вы заметите, что я пропустил что-нибудь важное, сообщите мне об этом в комментарии.

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

Создать массив вы можете несколькими способами:

var myArray = new Array();
var myArray = []; // рекомендованный путь

В первом случае мы создали массив при помощи конструктора Array. Во втором случае (рекомендуется) мы используем литерал массива.

Вы можете создать массив определенной длины, то есть с установленным числом элементов массива. Для этого передайте конструктору Array число, данное число определяет длину массива. Каждый элемент массива будет иметь значение undefined.

var myArray = new Array(30);

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

var myArray = new Array("apples", "oranges", "pears", "watermelons");

Аналогичный массив можно создать, используя литерал массива:

var myArray = ["apples", "oranges", "pears", "watermelons"];

Проверяем: является ли объект массивом

Чтобы узнать является ли объект массивом, вы можете использовать Array.isArray():

var myArray = "Misnomer";
var myArray2 = ["keeping", "things", "real"];
console.log(Array.isArray(myArray)); // false
console.log(Array.isArray(myArray2)); // true

Поскольку myArray не является массивом, Array.isArray() вернет false. Так как myArray2 это массив, то Array.isArray вернет true.

Получить или установить длину массива

Чтобы узнать длину массива вы можете использовать свойство length.

var myArray = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
console.log(myArray.length); // 5

Любопытно, вы можете переопределить длину массива, используя свойство length.

var myArray = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
myArray.length = 3;
console.log(myArray); // ["Monday", "Tuesday", "Wednesday"]

Как показано выше, после инициализации массива из 5 элементов мы устанавливаем длину равную 3, этим мы удаляем 2 последних элемента массива.

И наоборот, вы можете добавлять элементы в массив, используя свойство length.

var myArray = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
myArray.length = 7;
console.log(myArray);
// ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", undefined × 2]

Хотя вы и добавите новые элементы, однако добавленные элементы будут иметь значение undefined.

Получаем и устанавливаем значения массива

Чтобы прочитать значение элемента массива вы можете поступить следующим образом:

var myArray = ["1984", "Jane Eyre", "Moby Dick", "Charlotte's Web"];
console.log(myArray[2]); // Moby Dick

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

Для новичков: Помнить отсчет ведется с 0.

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

var myArray = ["It", "ain't", "over", "until", "it's over"];
console.log(myArray[4]); // it's over

myArray[4] = "the fat lady sings";
console.log(myArray); // ["It", "ain't", "over", "until", "the fat lady sings"]

Здесь мы для 5-го элемента массива меняем значение с «it's over» на «the fat lady sings».

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

Вы можете преобразовать массив в строку, где каждый элемент отделен друг от друга запятой:

var myArray = ["csv", "files", "ftw"];
myArray = myArray.toString();
console.log(myArray); // csv,files,ftw

То же самое можно сделать при помощи метода toLocaleString():

var myArray = ["who", "needs", "spaces"];
          myArray = myArray.toLocaleString();
          console.log(myArray); // who,needs,spaces

Еще оди метод сделать аналогичное действие join():

var myArray = ["parent", "child", "dog"];
myArray = myArray.join();
console.log(myArray); // parent,child,dog

По умолчанию элементы массива методом join() разделяются запятыми. Но вы можете разделить элементы массивы, используя любой другой разделитель:

var myArray = ["apples", "oranges", "pears"];
myArray = myArray.join("|");
console.log(myArray); // apples|oranges|pears

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

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

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

Это работает, поскольку отсчет в массиве идет с 0, а длина высчитывается, начиная с 1-цы. Итак, длина всегда будет равна количеству индексов массива + 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

Как видите в комментарии, длина массива равно 100, мы добавили 95 элементов в конец массива и еще один элемент (99) со значением «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); // removes 1 element from index 2
console.log(myArray); // ["cassava", "nutmeg", "rhubarb"]

Здесь, в отличие от добавления, мы указываем второй аргумент, в котором задается количество элементов подлежащих удалению. Например, указав второй аргумент равный 1-це, а первый 2, мы удалим элемент под 2 индексом. В результате чего элемент со значение «lupin» будет удален.

Удалить элемент массива можно посредством оператора delete:

var myArray = ["Byte Bandit", "Eliza", "Jeefo", "Michelangelo"];
console.log(myArray.length); // 4
delete myArray[1]; //
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);
};

// Remove the second item from the array
array.remove(1);
// Remove the second-to-last item from the array
array.remove(-2);
// Remove the second and third items from the array
array.remove(1,2);
// Remove the last and second-to-last items from the array
array.remove(-2,-1);

Возможно вы захотите рассмотреть аналогичное решение 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"]

C помощью метода shift мы можем удалить первый элемент массива и сохранить его значение в переменной за пределами массива. Этим мы также уменьшим длину массива на 1-ку (в примере с 4-х до 3-х).

Метод shift можно удобно сочетать с методом 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"]

Для чисел метод sort() работает не корректно: числа сортируются путем преобразований в строки и выстраиваются в лексикографическом порядке.

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]

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

Ниже вы можете наблюдать сортировку чисел:

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(), если массив состоит из чисел, то сортировка пройдет адекватно по возрастанию.

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

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

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"]

Нарезаем массив

Используя метод slice(), вы можете создавать новый массив, содержащий один или более элементов уже существующего массива.

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

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

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

Хотя 4 в данном случае означает пятый элемент массива, но, как вы видите, возвращаются 4 элемента, то есть элемент, индекс которого указан во втором аргументе не включается.

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

Для замены элемента будем использовать знакомый нам метод splice(). Данный метод позволяет заменить более одного элемента массива.

var myArray = ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Matt Sharp"];
myArray.splice(3, 1, "Scott Shriner"); // replaces 1 element from index 3
console.log(myArray);
// ["Rivers Cuomo", "Patrick Wilson", "Brian Bell", "Scott Shriner"]

Метод splice всегда возвращает массив удаленных элементов. В нашем случае таким элементом будет «Matt Sharp».

Заключение

Если вам есть что добавить, оставляйье комментарии.

Источник