—»     —»   Введение в Underscore.js – Часть 1: Массивы
  Раздел: Java-Скрипты   Нет комментариев  

Введение в Underscore.js – Часть 1: Массивы



Underscore.js представляет собой миниатюрную библиотеку javascript, которая в значительно степени облегчает работу с некоторыми основными структурами данных, использующимися в JS. Уменьшенная и сжатая версия библиотеки весит всего 4кб и, где это представляется возможным, она передает свой функционал под руководства браузера, что увеличивает производительность. Больше нет никаких зависимостей, а к вашим скриптам библиотека добавит лишь немного своего кода. Она может быть одинаково просто использована как на стороне сервера, так и на стороне клиента.

Использовать Underscore невероятно просто; она тесно связана с DOM, не бывает несовместимой с другими библиотеками или платформами, которые могут быть использованы вами, и в плюс ко всему этому не требует настройки – вы просто включаете файл библиотеки в структуру страницы и пользуетесь!

Введение в Underscore.js – Часть 1: Массивы

В нашем сегодняшнем руководстве в примерах ниже мы будем использовать следующие javascript-массивы:

var myArray = ["one", "two", "three", "four", "five"];
var myArray2 = [1, 2, 3, 4, 5];
var myArray3 = [1, 5, 2, 2, 8, 5, 3, 8, 9, 0];

Работа с массивами

Массивы представляют собой довольно-таки распространенную структуру данных в javascript, зачастую используемых во многих популярных JS-библиотеках. К примеру, в любом случае, когда jQuery возвращает элемент (или элементы) из DOM, он возвращает их в виде массива. Мы можете использовать массивы и даже не подозревать об этом! Если кто-то не в курсе, массив – это просто набор родных значений (строк, целых чисел, объектов и т.д.), где каждое значение имеет номерной связанный с ними индекс. Давайте рассмотрим некоторые полезные методы использования массивов, представленные в Underscore:

indexOf()

javascript уже давно использует метод indexOf() для обнаружения принципа последовательности знаков в пределах строки текста. Последняя версия javascript (или ECMA Script, на базе которого основываются поддержки javascript во всех браузерах) включает метод indexOf(), который работает по тому же принципу, но только с массивами. Он возвращает либо индекс первого совпавшего пункта в массиве, либо -1, если совпадение не было найдено.

Но, как вы уже наверное догадались, только последняя версия IE поддерживает этот невероятно удобный метод с массивами, так что, если нам нужно, чтобы более ранние версии IE тоже должны поддерживать этот метод, нам придется искать иные пути. Давайте пользоваться Underscore, который позволяет нам использовать этот метод в более ранних версиях браузеров.

Для того чтобы использовать данный метод для обнаружения индекса в третьей строке нашего тестового массива, мы можем использовать следующий код:

_.indexOf(myArray, "three")

Все методы в Underscore подкпреплены объектом «_», примерно по тому же принципу, по которому методы jQuery привязаны к объекту $. Для того чтобы применить indexOf(), мы подключаем массив к поиску в качестве первого аргумента и в качестве второго аргумента мы используем искомый термин. Есть еще и третий аргумент, который использует логический индикатор, сообщающий, отсортирован ли массив или нет. Данный логический индикатор запускает гораздо более быстрый алгоритм поиска. Underscore также оснащен методом lastIndexOf(), который обнаруживает последнее событие в массиве. Очень удобно.

union()

union() – это еще один удобный метод, на этот раз не имеющий родных javascript-аналогов. Данный метод берёт несколько массивов, и возвращает нам один массив, содержащий любые пункты, которые присутствуют в одном или более исходных массивов. Для того чтобы увидеть объединение двух массивов, представленных в нашем примере, мы можем использовать следующий код:

_.union(myArray2, myArray3)

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

uniq()

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

_.uniq(myArray3)

Как и в случае с методом indexOf(), который мы рассмотрели буквально минуту назад, данный метод принимает логическое выражение в качестве второго аргумента, который определяет, был ли исходный массив отсортирован. Если бы он имел более быстрый алгоритм для отсева дубликатов.

Данный метод применяет тестирование точного соответствия (===) в функции сравнивания для определения того, являются ли два этих пункта идентичными. В некоторых ситуациях, это тестирование может быть даже более точным, чем нам необходимо. Например, в подобном случае: this !== This. Для того чтобы избежать подобных нестыковок, мы можем провести трансформационную функцию в качестве третьего аргумента. Если бы мы хотели сделать данный метод чувствительным к регистру, мы бы сделали это следующим образом:

_.uniq(myArray3, false, function(item) {
return item.toLowerCase();
});

Трансформирующая функция получает «текущий» пункт при каждом запросе (он будет запрошен для каждого пункта исходного массива), и должен будет вернуть трансформированный пункт. В данном случае, мы просто изменяем регистр пункта на нижний, перед тем как вернуть его. Больше никаких нестыковок с регистром.

zip()

Метод zip() берет любое количество вводных массивов и возвращает несколько массивов, где одинаковые пункты из исходных массивов объединены между собой. На словах это звучит не очень понятно, но когда вы увидите, как это происходит, вы все мгновенно поймете. Для того чтобы соединить наш первый и второй тестовые массивы, мы применим данный метод следующим образом:

_.zip(myArray, myArray2)

Когда вы увидите результат данного выражения, вы поймете, что первый возвращенный массив содержит пункты one и 1, второй массив содержит пункты two и 2 и так далее.

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

range()

Метод range() интересен тем, что, хотя он и используется с массивами, он не принимает массивы в качестве аргументов. Вместо этого, он принимает целые числа и использует их для того, чтобы вернуть массив, содержащий цепочку чисел.
Он может принять несколько аргументов; первый аргумент является опциональным, и по умолчанию выставлен на 0 – начальное число. Второй аргумент – это число, на котором нужно остановиться, а третий аргумент – это значение шага. Опять же, это может звучать непонятно на словах, но в данном случае, примеры говорят гораздо больше, чем слова. Так что, давайте рассмотрим некоторые вариации.

Если представлен отдельный аргумент, то он будет расценен как число для остановки, а 0 будет определен в качестве точки отсчета. 1 будет по умолчанию использован в качестве значения шага:

_.range(3)

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

_.range(0,3)

Это даст нам тот же результат, что и в первом примере. Для того чтобы в качестве значения шага использовать другое число, нам необходимо ввести три аргумента:

_.range(0,30,10)

Сейчас мы получим результат равный 0,10,20. В качестве точки остановки мы можем задать значение, которое будет ниже точки отсчета, если пожелаем; в данном случае, значение шага должно быть отрицательным:

_.range(30, 0,-10)

В данном случае мы получим результат равный 30,20,10. Хотя этот метод, возможно, и не будет использован так же часто, как другие, он все равно представляют особую ценность, когда нам нужно получить перечень чисел в определенному промежутке.

Заключение

Кроме тех методов, которые мы с вами сегодня рассмотрели, существует множество других, не менее полезных и удобных методов, и все они представлены в Underscore. Так что, рекомендуем вам самостоятельно поближе познакомиться с данной непревзойденной библиотекой, и понять, что конкретно вы сможете из нее извлечь. Не забывайте следить за новостями, ведь мы и дальше собираемся рассказывать вам полезные и интересные вещи!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript
Опубликовал Design FactoRy   Прочитано (раз): 7318   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код



















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2019    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930