Массивы – широко используемый тип данных в языках программирования, который служит для одновременного хранения множества значений. Однако, из-за специфичности некоторых моментов языка JavaScript, массивы обладают некоторым функционалом, о котором часто недоговаривают. В этом посте я рассмотрю три менее известных, но все же важных функций JavaScript массивов, о существовании которых вы могли не догадываться…
Перед началом, хочу отметить, что данный текст является логическим продолжением похожего поста — Четыре полезных JavaScript оператора, о которых вы могли не знать, поэтому переходите по ссылочке и читайте 🙂
Добавление пользовательских свойств в массивы
Если вы когда-нибудь искали в интернете полное определение массивов в JavaScript, то вы скорее всего найдете источники, где пишется, что массивы в JavaScript являются объектами и как бы странно это не звучало, но это правда.
Фактически, почти все, с чем мы имеем дело в JavaScript, является объектом. По сути есть два типа данных в JavaScript – примитивы и объекты, но примитивы всегда оборачиваются внутри объектов.
Массивы, функции, даты и т.д. – предопределенные объекты JavaScript, у которых есть встроенные методы, свойства и их собственный стандартизированный синтаксис.
У массивов в JavaScript может быть три различных типов свойств:
- Индексы массива также свойства;
- Встроенные свойства;
- Пользовательские свойства, которые можно добавить самому.
Первые два более или менее известны, возможно вы их используете постоянно в процессе разработки и даже не замечаете, но давайте теперь рассмотрим как вы можете добавить собственное свойство к массиву.
Индексы в качестве свойств
В JavaScript для обозначения массивов используют квадратные скобки. Например: var arr = ['апельсин', 'яблоко', 'груша'];.
Индексы элементов массива – в основном свойства, где имена свойств всегда неотрицательные целые числа. Пара индексного элемента массива, подобна паре ключ/значение в объекте.
Индексы – уникальные свойства объекта массива, и в отличие от других встроенных свойств, они могут быть определены только с помощью квадратных скобок т.е например arr[3] = 'капуста';.
Встроенные свойства
У массивов также есть встроенные свойства, такие например, как array.length (подробно об length). Свойство length получает целочисленное значение, которое обозначает размер массива. В целом, встроенные свойства могут часто находиться в предопределенных объектах JavaScript как массивы. Вместе со встроенными методами они помогают настраивать универсальные объекты так, чтобы объекты были пригодны для различных дальнейших нужд. К встроенным свойствам можно получить доступ через object.key или через object['key'] синтаксис. Поэтому, вы можете также смело записать arr['length'], чтобы получить размер массива.
Создание собственных свойств для массивов объектов
Теперь, давайте поговорим о добавлении ваших собственных свойств к массивам. Массивы — предопределенные объекты, которые хранят различные типы значений в различных индексах. Как правило, при разработке в JavaScript не часто может понадобиться добавить свои свойства в массив, поэтому новички и даже middle разработчики порой не знают о такой возможности. Фактически, если вы хотите рассматривать массив как нормальный объект, добавляя к нему пары ключ/значение, то можно вместо массива использовать объект, уж извините за тавтологию. Но это вовсе не означает, что нет особых случаев, когда вы можете использовать массив как объект, путем добавления одного или нескольких пользовательских свойств к нему.
Например, вы можете добавить пользовательское свойство к массиву, который идентифицирует «вид», или «класс» его элементов, как вы можете увидеть в примере ниже.
var arr = ['яблоко','банан','апельсин']; arr.itemClass = 'фрукты'; console.log(arr + ' - ' + arr.itemClass); // яблоко,банан,апельсин - фрукты
Обратите внимание на то, что пользовательское свойство, которое вы добавляете к массиву, «счетное», а это означает, что вы сможете получить его значения используя for…in цикл (подробнее о цикле).
Цикл через элементы массива
После прочтения этого подзаголовка вы вероятно, подумали – «Ничего нового – это я уже знаю» и вы будете отчасти правы, ведь любой, даже новичок сможет пройти циклом по элементам массива, но на самом деле это все довольно абстрактно и цикл пройдет по индексам массива.
Поскольку индексы массива состоят только из неотрицательных целых чисел, в цикле мы «итерируем» целое значение, как правило, начиная с нуля и заканчивая числом, которое означает размер массива, а затем используем «итерированное» значение для доступа к элементу массива с заданным индексом.
Однако, в ECMAScript6, есть способ с помощью которого можно пробежаться по значениям массива не задумываясь об индексах и сделать это можно с помощью for…of цикла.
В массиве for…of цикл будет перебирать элементы массива в порядке индексов, другими словами вам больше не нужно будет заботиться об итерации по индексам и получении существующего значения массива по заданному индексу. Цикл for…of идеально подойдет, если вы хотите просто циклично тупо вывести элементы массива и начать работать с ними. Например:
var arr = ['яблоко','банан','апельсин'];
for (let item of arr){
console.log(item);
}
// 'яблоко','банан','апельсин'
Для сравнения давайте теперь посмотрим на стандартный цикл перебора массива без явного указания индекса значения.
var arr = ['яблоко','банан','апельсин'];
for (var item = 0; item < arr.length; item++){
console.log(item);
}
// 0, 1, 2
Число элементов не показывает истинный размер массива
Как правило, когда мы говорим о размере массива, мы думаем, что это – либо число имеющее значение, которое массив содержит, или размер, который мы дали массиву вручную. Однако, в действительности размер массива зависит от самого большого существующего индекса в нем.
Length — (я знаю, что это вообще называется длина, но я очень привык называть — размер, поэтому заранее простите если кого-то ввел в заблуждение) — очень гибкое свойство. Фиксировали ли вы уже размер массива заранее или нет, если вы продолжаете добавлять значения к массиву, его размер соответственно продолжает увеличиваться. Например:
var arr = []; arr.length = 3; console.log(arr.length); // 3 arr[5] = 'abcd'; console.log(arr.length); // 6
В примере выше, вы видите, что я дал массиву только одно значение по индексу 5, и его размер стал 6. Теперь, если вы думаете, что, добавляя значение по индексу 5, массив создал индексы от 0 до 4 автоматически, тогда вы глубоко ошибаетесь. Нет действительно никаких существующих индексов от 0 до 4 в этом массиве. Вы можете проверить это используя in оператор.
var arr = []; arr.length = 3; console.log(arr.length); // 3 arr[5] = 'abcd'; console.log(arr.length); // 6 console.log(0 in arr); // false
Массивы как в примере выше, где индексы не создаются поочередно, а имеют разрывы, встречаются довольно редко, поэтому из довольно часто так и называют – редкие. Противоположность редким массивам – плотные массивы, где индексы существуют постоянно в массиве, и число элементов совпадает с его размером.
Свойство length также способно «уменьшать» массивы, но перед этим оно должно убедиться, что самый большой индекс существующий в массиве всегда меньше чем его собственный, поскольку length всегда численно больше чем самый большой индекс по умолчанию.
В примере ниже, вы видите, как мы убираем элемент по индексу 5, уменьшая размер массива.
var arr = []; arr.length = 3; console.log(arr.length); // 3 arr[5] = 'abcd'; console.log(arr.length); // 6 arr.length = 2; console.log(arr.length); // 2 console.log(arr[5]); // undefined
На этом все, надеюсь вы почерпнули для себя что-то новое из моего поста.