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

Создание массивов в jQuery

В JavaScript массивы (array) представляют из себя объекты, которые хранят в себе ноль, один или множество значений любого типа. Создание массивов в jQuery будет аналогично созданию массивов в JavaScript:

var arr = Array(); создает пустой массив
var arr = []; и снова создает пустой массив
var arr = array(5); создает массив из пяти элементов
var arr = [10]; создает массив из одного элемента - числа 10
var arr = Array(6, "my text", 17); создает массив из трех элементов, двух чисел и строки
var arr = [6, "my text", 17]; аналогично предыдущему

Конвертация массивоподобных объектов в массив

Довольно часто можно встретить javascript-объекты, которые имеют характерные черты массивов (имеют свойство length, позволяют получать элементы с помощью [] и т.д.), однако не являются настоящими массивами (они могут не иметь такие методы как .pop() или например .reverse()) Функция $.makeArray() конвертирует такие объекты в настоящие массивы.

Пример:

See the Pen Untitled by Aleksei (@AmateR) on CodePen.

Заносим все li-элементы в массивоподобный объект li_obj, после чего конвертируем его в массив li_array. Для примера работы с массивом, изменим порядок элементов массива и выведем в блок .box.

Поиск в массиве jQuery

Функция jQuery.inArray() выполняет поиск заданного значения в массиве и возвращает индекс первого совпадения.

jQuery.grep( array, function [, invert ] )

• value – искомое значение;
• array – массив, в котором будет происходить поиск;
• fromIndex – номер элемента массива, с которого будет начинаться поиск. По умолчанию – 0.

Метод $.inArray похож на метод JavaScript .indexOf(), поэтому, в случае отсутствия искомого значения в массиве, функция возвращает -1, а если искомое значение является первым в массиве, будет возвращен 0.

Пример:

See the Pen Untitled by Aleksei (@AmateR) on CodePen.

Создаем массив городов, после чего определяем порядковый номер города в массиве и информация выводится на экран.

Поиск в массиве по фильтру в jQuery

jQuery.grep() ищет в заданном массиве элементы, удовлетворяющие условиям фильтрующей функции. Возвращает массив с найденными элементами не изменяя оригинальный массив.

jQuery.grep( array, function [, invert ] )

• array – массив, в котором будет происходить поиск;
• function (elementOfArray, indexInArray) – заданная пользователем функция, вызываемая для каждого элемента массива для их фильтрации
  • elementOfArray – элемент массива, передаваемый в функцию;
  • indexInArray – индекс элемента массива.
• invert – если параметр равен false или не задан, то функция вернет массив, состоящий из элементов для которых фильтрующая функция возвратила true. Если параметр равен true, то итоговый массив будет составлен из элементов массива, при которых фильтрующая функция возвратила значение false.

Пример:

See the Pen Untitled by Aleksei (@AmateR) on CodePen.

Создаем массив из 7 цифр и ищем в нем элементы, порядковый номер которых больше 2. В результате получаем новый массив элементов. На полученный массив накладываем еще один фильтр – значение элемента массива не равно 6. В итоге получаем массив из трех элементов.

Сортировка массива в jQuery

jQuery.uniqueSort( array ) сортирует массив в jQuery с DOM-элементами, выстраивая их в порядке расположения в DOM, а также удаляя повторения. Обратите внимание, что эта функция работает только с массивами DOM-элементов, а не с массивами строк или чисел.

До jQuery 3.0 этот метод назывался jQuery.unique( array )!

jQuery.uniqueSort( array )

• array – массив DOM-элементов, который нужно отсортировать

Пример:

See the Pen Untitled by Aleksei (@AmateR) on CodePen.

Получаем массив элементов div, определяем размер массива (т.е. сколько в нём элементов div) и выводим полученную информацию. Следующим шагом выполняем сортировку массива jQuery.uniqueSort( array ) (на этом шаге помимо сортировки будут удалены дубли), снова определяем размер массива и выводим полученную информацию.

Обработка каждого элемента массива заданной функцией

jQuery.map( array, callback ) – выполняет заданную функцию для каждого элемента массива (если задан массив) или каждого поля объекта (если задан объект) в отдельности. Значения, полученные в результате выполнения этой функции помещаются в новый массив и возвращаются как результат работы функции.

jQuery.map( array, callback )

• array – обрабатываемый массив;
• callback – функция, вызываемая отдельно для каждого элемента массива.

Начиная с jQuery 1.6 вместо массива можно передавать объект.

jQuery.map( object, callback )

• object – обрабатываемый объект;
• callback – функция, вызываемая отдельно для каждого элемента объекта.

Пример:

See the Pen Untitled by Aleksei (@AmateR) on CodePen.

Создаем массив из 7 цифр. Для каждого элемента массива вызовем функцию, которая будет умножать значение элемента на его порядковый номер в массиве. Итоговый массив выводим на экран.

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

jQuery.merge()  – объединяет содержимое двух массивов. Результат объединения записывается в первый из этих массивов (он же будет возвращен в качестве результата выполнения функции).

jQuery.merge( first, second )

• first – первый массив, к которому будут добавлены элементы;
• second – второй массив, элементы которого будут добавлены к первому, остается неизменным.

Если необходимо сохранить первый массив, то перед объединением, сделайте его дублирование:

var newArray = $.merge([], oldArray);

Пример:

See the Pen Untitled by Aleksei (@AmateR) on CodePen.

Объединение JavaScript-объектов

jQuery.extend() – объединяет содержимое двух или более заданных JavaScript-объектов. Результат объединения записывается в первый из этих объектов (он же будет возвращен функцией, после ее выполнения).

jQuery.extend( target [, object1 ] [, objectN ] )

• target – объект, который получит новые свойства, если дополнительные объекты переданы или добавит его содержимое в глобальный объект $ (jQuery), если это единственный аргумент;
• object1 – объект, содержащий дополнительные свойства для слияния;
• objectN – дополнительные объекты, содержащие свойства для слияния.

jQuery.extend( [deep], target, object1 [, objectN ] )

• deep – если параметр равен true, то объединение будет выполнено рекурсивно, т.е. совпадающие поля будут переписываться;
• target – объект, который получит новые свойства, если дополнительные объекты переданы или добавит его содержимое в глобальный объект $ (jQuery), если это единственный аргумент;
• object1 – объект, содержащий дополнительные свойства для слияния;
• objectN – дополнительные объекты, содержащие свойства для слияния.

Если необходимо сохранить первый объект, то перед объединением, сделайте его дублирование:

var object = $.extend({}, object1, object2);

Пример:

See the Pen Untitled by Aleksei (@AmateR) on CodePen.

Есть два JavaScript-объекта. Объединим их в один, передав в первом параметре true (рекурсивное объединение). В итоге в первый объект будет записан результат объединения, при чем значения элементов oranges, apples и mango будут перезаписаны на значения из второго объекта (рекурсивное объединение).