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