Массивы в jQuery – создание и манипуляции

Создание и манипуляции с массивами в jQuery

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

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

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

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

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

Пример:

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

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

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

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

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

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

Пример:

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

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

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

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

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

Пример:

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

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

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

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

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

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

Пример:

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

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

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

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

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

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

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

Пример:

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

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

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

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

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

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

Пример:

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

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

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

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

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

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

Пример:

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

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *