3 особенности работы с массивами в JavaScript, о которых вы могли не знать
Массивы — это один из самых часто используемых видов переменных, которые позволяют хранить множество последовательных значений в “одном месте”. Однако когда речь идёт о JavaScript-е, то тут есть куда капнуть.
В этой статье мы рассмотрим тройку малоизвестных техник, которые можно применить при работе с массивами.
1. Добавление пользовательских свойств к массивам
Если вы воспользуетесь поиском для того чтобы найти определение массива в рамках языка JavaScript, то в большинстве источников будет утверждаться что данный тип значения переменной представляется в виде объекта.
Вообще говоря, множество вещей с которыми мы сталкиваемся в JavaScript-е представляет собой объекты. Справедливо будет отметить, что в языке так же присутствую и “примитивные” типы данных, но их значения так или иначе используются в свойствах внутри объектов.
Массивы, Функции, Даты, и прочие типы представлены в JavaScript-е в виде объектов, которые напичканы целым рядом свойств и методов.
В JavaScript массивах различают несколько типов свойств:
- Индексы массива
- Встроенных свойства
- Пользовательские свойства, которые могут быть добавлены непосредственно Вами
Наверняка первые два типа свойств вам знакомы, однако, давайте по-быстрому пробежимся по ним чтобы освежить информацию в памяти.
Индексы
Чтобы создать массив в JavaScript-е достаточно воспользоваться квадратными скобками: var ary = ["orange","apple","lychee"];
.
Индексы — это свойства массива, которые могут принимать положительные значения.
Связка индекс-элемент в рамках массива ничем не отличается от связки свойство-значение в рамках объекта.
Индексы являются уникальной фишкой объекта типа Array
. В отличии от других встроенных свойств их можно задавать, просто вписав в квадратные скобки ary[3] = "peach";
.
Встроенные свойства
В объектах типа Array
существует целый ряд встроенных свойств, к примеру array.length
. Свойство length
хранит информацию о текущей размерности массива.
Обращение к свойствам можно осуществить как классическим путём: object.key
, так и через квадратные скобки: object["key"]
. Так что размерность массива можно узнать, написав ary["length"]
.
Создание пользовательских свойств
Теперь давайте поговорим о том как создавать собственные свойства.
О данной фишке мало кто знает потому что изначально пользовательские свойства используются для решения узких и редких задач.
К примеру вы можете добавить свойство, характеризующее "тип" или "класс" хранящихся внутри массива элементов:
var ary = ["orange","apple","lychee"]; ary.itemClass = "fruits"; console.log(ary + " are " + ary.itemClass); // "orange,apple,lychee are fruits"
Следует отметить что пользовательские свойства могут быть затронуты, если прогнать объект через цикл for…in.
2. Доступ к элементам массива в рамках цикла
Поскольку индексы массивов могут принимать только положительные значения, начало отсчёта начинается с нуля. Впоследствии мы можем использовать данный индекс для доступа к элементу массива на данной итерации цикла.
В ECMAScript6 был представлен способ прокрутки массива без использования индексов, а через новый цикл for…of
.
Цикл for...of
предназначен для прохода по элементам массива, не затрагивая при этом индекс элемента.
var ary = ["orange","apple","lychee"]; for (let item of ary){ console.log(item); } // "orange", "apple", "lychee" Для сравнения: вывод индексов элементов в цикле for. var ary = ["orange","apple","lychee"]; for (var item = 0; item < ary.length; item++){ console.log(item); } // 0, 1, 2
3. Количество элементов — не размерность массива
Когда речь идёт о размерности массива, то обычно мы думаем, что подразумевается количество хранящихся в нём элементов. На деле это не совсем так — свойство length рассчитывается в зависимости от максимального индекса элемента.
Свойство length очень неоднозначно. Чтобы в этом убедиться достаточно взглянуть на следующие манипуляции:
var ary = []; ary.length = 3; console.log(ary.length); // 3 ary[5] = "abcd"; console.log(ary.length); // 6
В последнем примере было достаточно поставить элемент на пятую позицию, в результате чего длина массива стала равна 6. Если вы думаете, что индексы от 0 до 4 создадутся автоматически, то будете неправы. Это можно проверить, используя оператор in
.
var ary = []; ary.length = 3; console.log(ary.length); // 3 ary[5] = "abcd"; console.log(ary.length); // 6 console.log(0 in ary); // false
В данном случае будет справедливо назвать массив ary
"разрежённым".
Так же мы можем манипулировать свойством length
для того чтобы обрезать массивы. В примере, представленном ниже, демонстрируется “потеря” элемента под индексом 5, путём уменьшения значения свойства length
массива ary
.
var ary = []; ary.length = 3; console.log(ary.length); // 3 ary[5] = "abcd"; console.log(ary.length); // 6 ary.length = 2; console.log(ary.length); // 2 console.log(ary[5]); // undefined
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/javascript-arrays/
Перевел: Станислав Протасевич
Урок создан: 14 Июля 2016
Просмотров: 10575
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.