Пустой массив в языке javascript
Массивы в JavaScript
Для решения этого неудобства в программировании был изобретен специальный тип данных, который называется массив.
Массив представляет собой переменную, в которой в упорядоченном виде можно хранить целый набор каких-то значений.
Для создания массива используются квадратные скобки:
Пока созданный нами массив не содержит никаких данных. Заполним его названиями дней недели:
Каждое значение списка, который мы записали в массив, в нашем случае каждый день недели, называется элементом массива.
Элементы разделяются между собой запятой. После этой запятой можно ставить пробелы, а можно и не ставить (более принято ставить, ставьте).
Обратите внимание на то, что названия дней недели представляют собой строки и поэтому взяты в кавычки. Кроме строк в массиве можно хранить числа, и их в кавычки мы не берем:
Кроме строк и чисел в массиве можно хранить все допустимые типы данных JavaScript, а также смешивать их между собой в одном массиве, пример:
Создайте массив с элементами ‘a’, ‘b’ и ‘c’. Выведите его на экран с помощью функции alert, а также выведите его в консоль с помощью console.log.
Как вывести отдельный элемент массива
Обращение к элементам массива осуществляется подобно обращениям к символам строки:
Создайте массив с элементами ‘a’, ‘b’, ‘c’. Выведите на экран каждый из этих элементов.
Создайте массив с элементами массив с элементами ‘a’, ‘b’, ‘c’, ‘d’. Выведите с его помощью на экран строку ‘a+b+c+d’.
Создайте массив с элементами 1, 2 и 3. Выведите на экран сумму этих элементов.
Создайте массив с элементами 2, 5, 3, 9. Умножьте первый элемент массива на второй, а третий элемент на четвертый. Результаты сложите, присвойте переменной result. Выведите на экран значение этой переменной.
Длина массива
Длина массива, так же, как и длина строки находится с помощью свойства length:
Создайте массив с произвольными элементами. Выведите на экран количество элементов в этом массиве.
Последний элемент массива
Последний элемент массива также получается аналогично последнему символу строки:
Создайте массив с произвольными элементами. Выведите на экран последний элемент этого массива.
Изменение массива
Элементы массивов, в отличие от символов строк, можно изменять:
Перезапись элементов
Можно также прочитывать текущее значение элемента, выполнять с ним какие-то операции и записывать измененное значение обратно в этот элемент:
Предыдущий код можно переписать через оператор +=:
Создайте массив с числами. Прибавьте к каждому элементу массива число 3. Выведите на экран измененный массив.
Инкремент и декремент
Можно также применять операции инкремента и декремента:
Создайте массив с элементами 1, 2 и 3. С помощью оператора ++ увеличьте каждый элемент массива на единицу.
Заполнение массива
Элементы в массив не обязательно добавлять сразу в момент объявления этого массива.
Можно вначале объявить этот массив пустым, а затем добавить в него необходимые элементы, вот так:
С помощью описанного приема создайте массив с элементами 1, 2 и 3.
Пусть дан такой массив:
Добавьте ему в конец элементы 4 и 5.
Несуществующие элементы
Обращение к несуществующему элементу массива вернет undefined. Никакой ошибки при этом не будет. Давайте посмотрим на примере.
Пусть у нас в массиве 3 элемента. Давайте обратимся к несуществующему элементу, например, к элементу с номером 10:
Разреженный массив
Пусть у нас есть некоторый пустой массив:
Давайте добавим к этому массиву еще один элемент:
Давайте проговорим то, каким образом мы добавили новый элемент в массив: мы знаем, что в нем 3 элемента, и, так как нумерация элементов начинается с нуля, то следующий по порядку элемент будет иметь ключ 3, поэтому мы записывали новое значение в элемент с этим ключом.
Но что будет, если взять не следующий по порядку ключ, а какой-то другой?
В этом случае нас ждет интересное поведение. Давайте посмотрим на примере.
Запишем значение в элемент с ключом 4:
А теперь запишем значение в элемент с ключом 5:
Как вы видите, новое значение добавляется в конец массива, но между уже существующими значениями и новым появляется дыра, которая заполняется значением undefined!
На практике это означает увеличение длины массива:
Такие массивы, в которых присутствуют дыры, называются разреженными.
На этом уроке мы познакомимся с массивами, научимся их создавать, выполнять операции над их элементами, а также рассмотрим основные методы и свойства, доступные при работе с ними.
Что такое массив в JavaScript
Узнать является ли объект массивом можно следующим образом:
Кроме этого способа, узнать является ли значение переменной массивом можно с помощью специального метода Array.isArray() :
Создание (объявление) массива
Литерал массива представляет собой квадратные скобки, внутрь которых помещается список элементов, разделённых между собой с помощью запятой.
При создании массивов можно вставлять в конец необязательную завершающую запятую:
Это действие может упростить процесс добавления и удаления элементов, т.к. все строки в этом случае будут идентичными.
Элементы в массиве не обязательно должны иметь одинаковый тип данных. В JavaScript в одном массиве могут находиться значения с различными типами данных.
В качестве значений элементов массива можно использовать не только статические значения, но и выражения:
В качестве значений элементов массива могут использоваться объекты.
Вызов функции-конструктора без аргументов используется для создания пустого массива.
Если функции-конструктору в качестве аргумента указать число, то она создаст массив, который будет состоять из указанного числа элементов. Причем все эти элементы будут иметь в качестве значения undefined.
Если функции-конструктору в скобках передать несколько значений или одно не числовое значение, то она создаст массив из переданных ей аргументов.
При этом как уже было отмечено выше массивы в JavaScript – это объекты. А это значит, что они ведут себя также как объекты.
Например, при копировании значения переменной, содержащей массив, мы на самом деле присваиваем ей не сам массив, а ссылку на него.
Как получить первый элемент массива
Получение значения первого элемента массива осуществляется с помощью указания в квадратных скобках этого массива числа 0:
Как получить последний элемент массива
Получение значения последнего элемента массива осуществляется с помощью указания в квадратных скобках этого массива выражения имя_массива.length-1 :
Перебор массива
Перебор элементов массива в JavaScript можно выполнить различными способами.
Наиболее традиционный способ – это использовать цикл for:
Другой способ – через метод forEach :
В функции: item – это значение элемента, index – его индекс, array – сам массив, который мы перебираем.
Если при переборе массива вам его индекс не нужен, то в этом случае итерацию по элементам массива можно выполнить через цикл for..of:
Для чего предназначен оператор delete
Функции для работы с массивами (методы объекта Array)
Объект Array содержит следующие методы (функции) для работы с массивами:
Метод push предназначен для добавления элемента в конец массива. Значение этого элемента указывается в качестве параметра данного метода. В качестве результата метод push возвращает количество элементов в массиве с учётом добавленного.
Метод pop предназначен для удаления последнего элемента из массива. У данного метода нет параметров. В качестве результата он возвращает значение последнего (удалённого) элемента массива.
Метод shift предназначен для удаления первого элемента из массива, т.е. элемента, имеющего индекс 0. Все остальные элементы массива смещаются к началу, т.е. у каждого из них индекс уменьшается на 1. Данный метод в качестве результата возвращает значение удалённого элемента.
Метод unshift предназначен для добавления элемента в начало массива (перед другими элементами). Значение этого элемента указывается в качестве параметра данного метода. В качестве результата данный метод возвращает количество элементов в массиве с учётом добавленного.
Метод slice предназначен для копирования участка массива. При этом он не изменяет исходный массив, а возвращает в качестве результата новый массив, состоящий из выбранных элементов.
Метод slice имеет 2 параметра:
Метод splice предназначен для изменения содержимого массива. Он может использваться как для добавления элементов в массив, так и для их удаления.
Синтаксис метода splice :
Примеры использования метода splice.
Применения метода splice для удаления части элементов из массива.
Применение метода splice для удаления элемента из массива и добавления в него новых.
Применение метода splice только для добавления новых элементов в массив.
Метод join предназначен для соединения всех элементов массива в строку.
Синтаксис метода join :
Если в качестве separator использовать не строку, то он будет преобразован к строке.
Элементы массива, которые имеют в качестве значения null или undefined, будут приведены к пустой строке.
Метод split предназначен для преобразования строки в массив. Данный метод имеет один параметр, в качестве которого вы можете указать строку, на основании которой данная строчка будет разбита на массив строк.
Метод reverse предназначен для переупорядочивания элементов массива в обратном порядке.
Метод sort предназначен для сортировки элементов массива. По умолчанию данный метод сортирует массив как строки.
Массивы
Создание массивов
Синтаксис литералов массивов позволяет вставлять необязательную завершающую запятую, т.е. литерал [,,] соответствует массиву с двумя элементами, а не с тремя.
Другой способ создания массива состоит в вызове конструктора Array(). Вызвать конструктор можно тремя разными способами:
Вызвать конструктор без аргументов:
В этом случае будет создан пустой массив, эквивалентный литералу [].
Вызвать конструктор с единственным числовым аргументом, определяющим длину массива:
В этом случае будет создан пустой массив указанной длины. Такая форма вызова конструктора Array() может использоваться для предварительного распределения памяти под массив, если заранее известно количество его элементов. Обратите внимание, что при этом в массиве не сохраняется никаких значений.
Явно указать в вызове конструктора значения первых двух или более элементов массива или один нечисловой элемент:
В этом случае аргументы конструктора становятся значениями элементов нового массива. Использование литералов массивов практически всегда проще, чем подобное применение конструктора Array().
Чтение и запись элементов массива
Доступ к элементам массива осуществляется с помощью оператора []. Слева от скобок должна присутствовать ссылка на массив. Внутри скобок должно находиться произвольное выражение, возвращающее неотрицательное целое значение. Этот синтаксис пригоден как для чтения, так и для записи значения элемента массива. Следовательно, допустимы все приведенные далее JavaScript-инструкции:
В преобразовании числовых индексов в строки нет ничего особенного: то же самое можно проделывать с обычными объектами:
Особенность массивов состоит в том, что при использовании имен свойств, которые являются неотрицательными целыми числами, массивы автоматически определяют значение свойства length. Например, выше был создан массив arr с единственным элементом. Затем были присвоены значения его элементам с индексами 1, 2 и 3. В результате этих операций значение свойства length массива изменилось и стало равным 4.
Следует четко отличать индексы в массиве от имен свойств объектов. Все индексы являются именами свойств, но только свойства с именами, представленными целыми числами являются индексами. Все массивы являются объектами, и вы можете добавлять к ним свойства с любыми именами. Однако если вы затрагиваете свойства, которые являются индексами массива, массивы реагируют на это, обновляя значение свойства length при необходимости.
Обратите внимание, что в качестве индексов массивов допускается использовать отрицательные и не целые числа. В этом случае числа преобразуются в строки, которые используются как имена свойств.
Добавление и удаление элементов массива
Мы уже видели, что самый простой способ добавить элементы в массив заключается в том, чтобы присвоить значения новым индексам. Для добавления одного или более элементов в конец массива можно также использовать метод push():
Добавить элемент в конец массива можно также, присвоив значение элементу arr[arr.length]. Для вставки элемента в начало массива можно использовать метод unshift(), при этом существующие элементы в массиве смещаются в позиции с более высокими индексами.
Удалять элементы массива можно с помощью оператора delete, как обычные свойства объектов:
Удаление элемента напоминает (но несколько отличается) присваивание значения undefined этому элементу. Обратите внимание, что применение оператора delete к элементу массива не изменяет значение свойства length и не сдвигает вниз элементы с более высокими индексами, чтобы заполнить пустоту, оставшуюся после удаления элемента.
Кроме того имеется возможность удалять элементы в конце массива простым присваиванием нового значения свойству length. Массивы имеют метод pop() (противоположный методу push()), который уменьшает длину массива на 1 и возвращает значение удаленного элемента. Также имеется метод shift() (противоположный методу unshift()), который удаляет элемент в начале массива. В отличие от оператора delete, метод shift() сдвигает все элементы вниз на позицию ниже их текущих индексов.
Наконец существует многоцелевой метод splice(), позволяющий вставлять, удалять и замещать элементы массивов. Он изменяет значение свойства length и сдвигает элементы массива с более низкими или высокими индексами по мере необходимости. Все эти методы мы разберем чуть позже.
Многомерные массивы
JavaScript не поддерживает «настоящие» многомерные массивы, но позволяет неплохо имитировать их при помощи массивов из массивов. Для доступа к элементу данных в массиве массивов достаточно дважды использовать оператор [].
Методы класса Array
Стандарт ECMAScript 3 определяет в составе Array.prototype множество удобных функций для работы с массивами, которые доступны как методы любого массива. Эти методы будут представлены в следующих подразделах.
Метод join()
Метод Array.join() преобразует все элементы массива в строки, объединяет их и возвращает получившуюся строку. В необязательном аргументе методу можно передать строку, которая будет использоваться для отделения элементов в строке результата. Если строка-разделитель не указана, используется запятая. Например, следующий фрагмент дает в результате строку «1,2,3»:
Метод reverse()
Метод Array.reverse() меняет порядок следования элементов в массиве на обратный и возвращает переупорядоченный массив. Перестановка выполняется непосредственно в исходном массиве, т.е. этот метод не создает новый массив с переупорядоченными элементами, а переупорядочивает их в уже существующем массиве. Например, следующий фрагмент, где используются методы reverse() и join(), дает в результате строку «3,2,1»:
Метод sort()
Метод Array.sort() сортирует элементы в исходном массиве и возвращает отсортированный массив. Если метод sort() вызывается без аргументов, сортировка выполняется в алфавитном порядке (для сравнения элементы временно преобразуются в строки, если это необходимо). Неопределенные элементы переносятся в конец массива.
Для сортировки в каком-либо ином порядке, отличном от алфавитного, методу sort() можно передать функцию сравнения в качестве аргумента. Эта функция устанавливает, какой из двух ее аргументов должен следовать раньше в отсортированном списке. Если первый аргумент должен предшествовать второму, функция сравнения должна возвращать отрицательное число. Если первый аргумент должен следовать за вторым в отсортированном массиве, то функция должна возвращать число больше нуля. А если два значения эквивалентны (т.е. порядок их следования не важен), функция сравнения должна возвращать 0:
Обратите внимание, насколько удобно использовать в этом фрагменте неименованную функцию. Функция сравнения используется только здесь, поэтому нет необходимости давать ей имя.
Метод concat()
Метод Array.concat() создает и возвращает новый массив, содержащий элементы исходного массива, для которого был вызван метод concat(), и значения всех аргументов, переданных методу concat(). Если какой-либо из этих аргументов сам является массивом, его элементы добавляются в возвращаемый массив. Следует, однако, отметить, что рекурсивного превращения массива из массивов в одномерный массив не происходит. Метод concat() не изменяет исходный массив. Ниже приводится несколько примеров:
Метод slice()
Метод Array.slice() возвращает фрагмент, или подмассив, указанного массива. Два аргумента метода определяют начало и конец возвращаемого фрагмента. Возвращаемый массив содержит элемент, номер которого указан в первом аргументе, плюс все последующие элементы, вплоть до (но не включая) элемента, номер которого указан во втором аргументе.
Метод splice()
Метод splice() может удалять элементы из массива, вставлять новые элементы или выполнять обе операции одновременно. Элементы массива при необходимости смещаются, чтобы после вставки или удаления образовывалась непрерывная последовательность.
Первый аргумент метода splice() определяет позицию в массиве, начиная с которой будет выполняться вставка и/или удаление. Второй аргумент определяет количество элементов, которые должны быть удалены (вырезаны) из массива. Если второй аргумент опущен, удаляются все элементы массива от указанного до конца массива. Метод splice() возвращает массив удаленных элементов или (если ни один из элементов не был удален) пустой массив.
Первые два аргумента метода splice() определяют элементы массива, подлежащие удалению. За этими аргументами может следовать любое количество дополнительных аргументов, определяющих элементы, которые будут вставлены в массив, начиная с позиции, указанной в первом аргументе.
Методы push() и pop()
Методы unshift() и shift()
Методы unshift() и shift() ведут себя почти так же, как push() и pop(), за исключением того, что они вставляют и удаляют элементы в начале массива, а не в конце. Метод unshift() смещает существующие элементы в сторону больших индексов для освобождения места, добавляет элемент или элементы в начало массива и возвращает новую длину массива. Метод shift() удаляет и возвращает первый элемент массива, смещая все последующие элементы на одну позицию вниз, чтобы занять место, освободившееся в начале массива.
Массивы
Объекты позволяют хранить данные со строковыми ключами. Это замечательно.
Но довольно часто мы понимаем, что нам необходима упорядоченная коллекция данных, в которой присутствуют 1-й, 2-й, 3-й элементы и т.д. Например, она понадобится нам для хранения списка чего-либо: пользователей, товаров, элементов HTML и т.д.
В этом случае использовать объект неудобно, так как он не предоставляет методов управления порядком элементов. Мы не можем вставить новое свойство «между» уже существующими. Объекты просто не предназначены для этих целей.
Объявление
Существует два варианта синтаксиса для создания пустого массива:
Практически всегда используется второй вариант синтаксиса. В скобках мы можем указать начальные значения элементов:
Элементы массива нумеруются, начиная с нуля.
Мы можем получить элемент, указав его номер в квадратных скобках:
Мы можем заменить элемент:
…Или добавить новый к существующему массиву:
Общее число элементов массива содержится в его свойстве length :
В массиве могут храниться элементы любого типа.
Список элементов массива, как и список свойств объекта, может оканчиваться запятой:
«Висячая запятая» упрощает процесс добавления/удаления элементов, так как все строки становятся идентичными.
Методы pop/push, shift/unshift
Очередь – один из самых распространённых вариантов применения массива. В области компьютерных наук так называется упорядоченная коллекция элементов, поддерживающая два вида операций:
Массивы поддерживают обе операции.
На практике необходимость в этом возникает очень часто. Например, очередь сообщений, которые надо показать на экране.
Существует и другой вариант применения для массивов – структура данных, называемая стек.
Она поддерживает два вида операций:
Таким образом, новые элементы всегда добавляются или удаляются из «конца».
Примером стека обычно служит колода карт: новые карты кладутся наверх и берутся тоже сверху:
Массивы в JavaScript могут работать и как очередь, и как стек. Мы можем добавлять/удалять элементы как в начало, так и в конец массива.
В компьютерных науках структура данных, делающая это возможным, называется двусторонняя очередь.
Методы, работающие с концом массива:
Удаляет последний элемент из массива и возвращает его:
Добавляет элемент в конец массива:
Методы, работающие с началом массива:
Удаляет из массива первый элемент и возвращает его:
Добавляет элемент в начало массива:
Методы push и unshift могут добавлять сразу несколько элементов:
Внутреннее устройство массива
Следует помнить, что в JavaScript существует 8 основных типов данных. Массив является объектом и, следовательно, ведёт себя как объект.
Например, копируется по ссылке:
…Но то, что действительно делает массивы особенными – это их внутреннее представление. Движок JavaScript старается хранить элементы массива в непрерывной области памяти, один за другим, так, как это показано на иллюстрациях к этой главе. Существуют и другие способы оптимизации, благодаря которым массивы работают очень быстро.
Но все они утратят эффективность, если мы перестанем работать с массивом как с «упорядоченной коллекцией данных» и начнём использовать его как обычный объект.
Например, технически мы можем сделать следующее:
Это возможно, потому что в основе массива лежит объект. Мы можем присвоить ему любые свойства.
Но движок поймёт, что мы работаем с массивом, как с обычным объектом. Способы оптимизации, используемые для массивов, в этом случае не подходят, поэтому они будут отключены и никакой выгоды не принесут.
Варианты неправильного применения массива:
Эффективность
Методы push/pop выполняются быстро, а методы shift/unshift – медленно.
Почему работать с концом массива быстрее, чем с его началом? Давайте посмотрим, что происходит во время выполнения:
Просто взять и удалить элемент с номером 0 недостаточно. Нужно также заново пронумеровать остальные элементы.
Операция shift должна выполнить 3 действия:
Чем больше элементов содержит массив, тем больше времени потребуется для того, чтобы их переместить, больше операций с памятью.
То же самое происходит с unshift : чтобы добавить элемент в начало массива, нам нужно сначала сдвинуть существующие элементы вправо, увеличивая их индексы.
Действия при операции pop :
Метод pop не требует перемещения, потому что остальные элементы остаются с теми же индексами. Именно поэтому он выполняется очень быстро.
Перебор элементов
Одним из самых старых способов перебора элементов массива является цикл for по цифровым индексам:
Но для массивов возможен и другой вариант цикла, for..of :
Цикл for..of не предоставляет доступа к номеру текущего элемента, только к его значению, но в большинстве случаев этого достаточно. А также это короче.
Технически, так как массив является объектом, можно использовать и вариант for..in :
Но на самом деле это – плохая идея. Существуют скрытые недостатки этого способа:
Цикл for..in выполняет перебор всех свойств объекта, а не только цифровых.
В браузере и других программных средах также существуют так называемые «псевдомассивы» – объекты, которые выглядят, как массив. То есть, у них есть свойство length и индексы, но они также могут иметь дополнительные нечисловые свойства и методы, которые нам обычно не нужны. Тем не менее, цикл for..in выведет и их. Поэтому, если нам приходится иметь дело с объектами, похожими на массив, такие «лишние» свойства могут стать проблемой.
Цикл for..in оптимизирован под произвольные объекты, не массивы, и поэтому в 10-100 раз медленнее. Увеличение скорости выполнения может иметь значение только при возникновении узких мест. Но мы всё же должны представлять разницу.
В общем, не следует использовать цикл for..in для массивов.
Немного о «length»
Свойство length автоматически обновляется при изменении массива. Если быть точными, это не количество элементов массива, а наибольший цифровой индекс плюс один.
Например, единственный элемент, имеющий большой индекс, даёт большую длину:
Обратите внимание, что обычно мы не используем массивы таким образом.
Ещё один интересный факт о свойстве length – его можно перезаписать.
Если мы вручную увеличим его, ничего интересного не произойдёт. Зато, если мы уменьшим его, массив станет короче. Этот процесс необратим, как мы можем понять из примера:
new Array()
Существует ещё один вариант синтаксиса для создания массива:
Он редко применяется, так как квадратные скобки [] короче. Кроме того, у него есть хитрая особенность.
Если new Array вызывается с одним аргументом, который представляет собой число, он создаёт массив без элементов, но с заданной длиной.
Давайте посмотрим, как можно оказать себе медвежью услугу:
Многомерные массивы
Массивы могут содержать элементы, которые тоже являются массивами. Это можно использовать для создания многомерных массивов, например, для хранения матриц: