Массивы в JavaScript
В этой статье мы рассмотрим стандартные JavaScript массивы с числовыми индексами. Массивы объявляются с помощью квадратных скобок:
Чтобы извлечь элемент, поместите его индекс в квадратные скобки. Первый индекс 0 :
Мы также можем получить длину массива JavaScript :
Упс! Мы создали массив с двумя фруктами и ослом. Теперь нам нужно удалить осла.
Работа с массивами JS — методы pop и push
Метод pop в JavaScript удаляет элемент массива и возвращает его.
В следующем примере показано, как « Осел » извлекается из массива:
Обратите внимание, что pop изменяет сам массив.
Аналог pop — это метод push , который добавляет элемент в массив. Например, мы забыли добавить персик:
Задание для самостоятельного выполнения
- Создайте массив styles с элементами “ Jazz ”, “ Blues ”;
- Добавьте значение » Rock’n’Roll «;
- Замените второе значение с конца значением » Classic «. У вас должен получиться массив: “ Jazz ”, ” Classic ”, ” Rock’n’Roll ”. Код должен работать для любой длины массива;
- Извлеките последнее значение из массива и выведите его через alert .
Решение
Работа с массивами JS — методы shift/unshift
Методы shift/unshift работают с концом массива, но вы также можете использовать shift , чтобы сдвинуть элементы вверх ( первое значение массива удаляется со сдвигом элементов ). Метод unshift позволяет в JavaScript добавить элемент в массив с конца:
И shift , и unshift могут работать с несколькими элементами одновременно:
Задание для самостоятельного выполнения
Напишите код, чтобы вывести через alert случайное значение из массива arr :
Примечание: Код для получения случайного числа от минимального до максимального значения ( включительно ) следующий:
Решение
Нам нужно извлечь случайное число от 0 до arr.length-1 ( включительно ):
Работа с массивами JS — перебор массива
В JavaScript перебор массива осуществляется с помощью цикла for :
Задание для самостоятельного выполнения
Создайте функцию find(arr,value) , которая находит значение в заданном массиве и возвращает его индекс или -1 , если значение не найдено.
Решение
Возможное решение может выглядеть так:
Но это неверно, потому что == не определяет разницу между 0 и false .
Более корректно при работе с массивами в JavaScript использовать === . Кроме того новейший стандарт ES5 содержит функцию Array#indexOf . С ее помощью мы можем определить функцию следующим образом:
Еще разумнее было бы определить find через условие, чтобы проверить, существует ли метод indexOf .
Задание для самостоятельного выполнения
Создайте функцию filterNumeric(arr) , которая принимает массив и возвращает новый массив, содержащий только числовые значения из arr .
Пример того, как это должно работать:
Решение
Решение заключается в том, чтобы перебрать массив и добавить значения в новый массив, если они являются числовыми.
Работа с массивами JS — join и split
Иногда нужен быстрый способ преобразовать JavaScript массив в строку. Именно для этого предназначен метод join .
Он объединяет массив в строку, используя заданный разделитель:
Обратное преобразование легко выполняется с помощью метода split :
Задание для самостоятельного выполнения
Объект включает в себя свойство className , которое содержит имена классов, разделенные пробелами:
Напишите функцию addClass(obj, cls) , которая добавляет класс cls , но только если он не существует:
Решение
Нужно разделить className и цикл на части. Если класс не найден, тогда он добавляется.
Цикл немного оптимизирован для увеличения производительности:
В приведенном выше примере переменная c определяется в начале цикла, и для ее последнего индекса задается значение i .
Сам цикл обрабатывается в обратном направлении, заканчиваясь условием i>=0 . Потому что i>=0 проверить быстрее, чем i . Что в JavaScript ускоряет поиск в массиве.
Работа с массивами JS — использование length для обрезки массива
С помощью свойства length можно обрезать массив следующим образом:
Вы задаете длину, и браузер обрезает массив.
Работа с массивами JS — array представляет собой объект, что из этого следует
На самом деле в JavaScript Array — это Object , дополненный автоматической установкой длины и специальными методами.
Это отличается от концепции в других языках, где массивы представляют собой непрерывный сегмент памяти. Это также отличается от очереди или стека на основе связанных списков.
Работа с массивами JS — нечисловые ключи массива
Ключи — это числа, но они могут иметь любые имена:
Но делать этого не рекомендуется. Числовые массивы подходят для числовых ключей, а JavaScript ассоциативный массив — для связанных пар ключ-значение. И смешивать их не стоит.
Массивы в JavaScript представляют собой хэш-таблицы с их преимуществами в плане производительности, но и с определенными недостатками.
Например, push/pop работают только с крайними элементами массива, поэтому они невероятно быстры.
push работает только с концом:
Методы shift/unshift медленные, потому что им нужно изменить нумерацию всего массива. Метод splice также может привести к изменению нумерации:
Таким образом, shift/unshift работают медленнее, чем push/pop . Чем больше массив, тем больше времени занимает в JavaScript сортировка массива.
Задание для самостоятельного выполнения
Какой получится результат? Почему?
Решение
Поскольку массивы являются объектами, arr<a href=»/..»>..</a> фактически является вызовом метода объекта, таким как obj<a href=»/method»>method</a>:
Работа с массивами JS — разреженные массивы, описание length
Свойство length позволяет получить не размер массива в JavaScript , а последний индекс + 1 . Это важно, если речь идет о разреженных массивах, с » промежутками » в индексах.
В следующем примере мы добавим два элемента в пустые fruits , но значение length останется 100 :
Если вы попытаетесь вывести разреженный массив, браузер выдаст значения пропущенных индексов как пустые элементы:
Но массив — это объект с двумя ключами. Недостающие значения не занимают места.
Разреженные массивы ведут себя причудливо, когда к ним применяются методы массива. Они понятия не имеют о том, что индексы пропущены:
Старайтесь избегать разреженных массивов. Во всяком случае, их методы не будут работать нормально. Вместо этого используйте Object .
Работа с массивами JS — удаление из массива
Как мы знаем, массивы — это объекты, поэтому мы могли бы использовать delete , чтобы удалить значение:
Вы видите, что значение удаляется, но не так, как мы хотели бы, потому что массив содержит незаданный элемент.
Оператор delete удаляет пару ключ-значение, и это все. Естественно, так как массив — это только хэш, позиция удаленного элемента становится undefined .
Чаще всего нам нужно удалить элемент, не оставляя « дыр » между индексами. Существует еще один метод, который поможет нам в этом.
Метод splice
Метод splice может удалять элементы и заменять их в JavaScript многомерных массивах. Его синтаксис:
Удаляет элемент deleteCount , начиная с index , а затем вставляет на его место elem1, . elemN .
Давайте рассмотрим несколько примеров:
Таким образом, вы можете использовать splice , чтобы удалить один элемент из массива. Номера элементов массива сдвигаются, чтобы заполнить пробел:
В следующем примере показано, как заменять элементы:
Метод splice возвращает массив удаленных элементов:
Данный метод также может использовать отрицательный индекс, который отсчитывается с конца массива:
Задание для самостоятельного выполнения
Объект содержит свойство className , в котором содержатся имена классов, разделенные пробелами:
Напишите функцию removeClass(obj, cls) , которая удаляет класс cls , если он задан:
Решение
Нужно разделить className на части и перебрать эти части через цикл. Если найдено совпадение, оно удаляется из JavaScript массива объектов, а затем добавляется обратно в конец.
Немного оптимизируем это:
В приведенном выше примере переменная c задана в начале цикла, и для i задан ее последний индекс.
Сам цикл выполняется в обратном направлении, заканчиваясь условием i>=0 . Это сделано потому, что i>=0 проверяется быстрее, чем i . Что ускоряет поиск свойства в c .
Работа с массивами JS — метод slice
Обратите внимание, что этот метод не изменяет в JavaScript количество элементов в массиве, а копирует его часть.
Можно опустить второй аргумент, чтобы получить все элементы, начиная с определенного индекса:
Метод поддерживает отрицательные индексы, так же, как String#slice .
Работа с массивами JS — метод reverse
Еще один полезный метод — reverse . Предположим, я хочу получить последнюю часть домена, например, “ com ” от “ my.site.com ”. Вот как это можно сделать:
Обратите внимание, что JavaScript массивы поддерживают сложный синтаксис (reverse()[0]) для вызова метода, а затем извлечения элемента из полученного массива.
Вы можете создавать более длинные вызовы, например, reverse()<a href=»/0%5D%5B1″>0][1</a>[5]. синтаксис языка позволяет это.
Работа с массивами JS- сортировка, метод sort(fn)
Метод sort() сортирует массив, не изменяя количество элементов:
Запустите приведенный выше код. Вы получите порядок 1 , 15 , 2 . Это потому, что метод преобразует все в строку и использует по умолчанию лексикографический порядок.
Чтобы сделать метод « умнее », нам нужно передать в него пользовательскую функцию сравнения. Она должна принимать два аргумента и возвращать 1, 0 или -1 :
Теперь все работает правильно.
Задание для самостоятельного выполнения
Создайте функцию ageSort(people) для сортировки массива объектов людей по возрасту:
Выведите имена людей после сортировки JavaScript двумерного массива.
Решение
Нужно использовать Array#sort и пользовательское сравнение:
Более короткий вариант
Функция сравнения может быть короче. Альтернативное решение:
Оно работает, так как нам не нужно возвращать 1 / -1 / 0 , будут работать положительные или отрицательные числа.
Работа с массивами JS — подробнее об определении массива
new Array()
В JavaScript объявление массива можно осуществить с помощью другого синтаксиса:
Он используется редко только потому, что квадратные скобки [] короче.
Также существует вероятность того, что new Array , вызываемый с одним числовым аргументом, создаст массив заданной длины с неопределенными элементами:
В приведенном выше примере мы получили undefined , потому что new Array(number) создает пустой массив с параметром length равным number .
Это может быть весьма неожиданно. Но если вы знаете об этой особенности, вы можете использовать new Array(number) , например, так:
Это оптимизированный способ повторить строку.
Многомерный массив JS
Массивы в JavaScript могут хранить любой тип данных:
Это можно использовать для создания многомерных массивов:
Заключение
Это все, что касается углубленного определения JavaScript массивов.
- Как объявляется массив, два различных синтаксиса;
- Как добавлять, заменять, удалять элементы массива;
- Как перебрать массив;
- Как разбить строку на массив, а затем собрать ее снова;
- Сравнение Array и Object в JavaScript .
Этого должно быть достаточно в 95% случаев. Чтобы узнать о других методах, обратитесь к Руководству по массиву на Mozilla .
Массивы
— это упорядоченная коллекция значений. Значения в массиве называются , и каждый элемент характеризуется числовой позицией в массиве, которая называется . Массивы в языке JavaScript являются нетипизированными: элементы массива могут иметь любой тип, причем разные элементы одного и того же массива могут иметь разные типы. Элементы массива могут даже быть объектами или другими массивами, что позволяет создавать сложные структуры данных, такие как массивы объектов и массивы массивов.
Отсчет индексов массивов в языке JavaScript начинается с нуля и для них используются 32-битные целые числа — первый элемент массива имеет индекс 0. Массивы в JavaScript являются динамическими: они могут увеличиваться и уменьшаться в размерах по мере необходимости; нет необходимости объявлять фиксированные размеры массивов при их создании или повторно распределять память при изменении их размеров.
Массивы в языке JavaScript — это специализированная форма объектов, а индексы массивов означают чуть больше, чем просто имена свойств, которые по совпадению являются целыми числами.
Создание массивов
Легче всего создать массив с помощью литерала, который представляет собой простой список разделенных запятыми элементов массива в квадратных скобках. Значения в литерале массива не обязательно должны быть константами — это могут быть любые выражения, в том числе и литералы объектов:
Синтаксис литералов массивов позволяет вставлять необязательную завершающую запятую, т.е. литерал [,,] соответствует массиву с двумя элементами, а не с тремя.
Другой способ создания массива состоит в вызове конструктора Array(). Вызвать конструктор можно тремя разными способами:
Вызвать конструктор без аргументов:
В этом случае будет создан пустой массив, эквивалентный литералу [].
Вызвать конструктор с единственным числовым аргументом, определяющим длину массива:
В этом случае будет создан пустой массив указанной длины. Такая форма вызова конструктора Array() может использоваться для предварительного распределения памяти под массив, если заранее известно количество его элементов. Обратите внимание, что при этом в массиве не сохраняется никаких значений.
Явно указать в вызове конструктора значения первых двух или более элементов массива или один нечисловой элемент:
В этом случае аргументы конструктора становятся значениями элементов нового массива. Использование литералов массивов практически всегда проще, чем подобное применение конструктора Array().
Чтение и запись элементов массива
Доступ к элементам массива осуществляется с помощью оператора []. Слева от скобок должна присутствовать ссылка на массив. Внутри скобок должно находиться произвольное выражение, возвращающее неотрицательное целое значение. Этот синтаксис пригоден как для чтения, так и для записи значения элемента массива. Следовательно, допустимы все приведенные далее JavaScript-инструкции:
Напомню, что массивы являются специализированной разновидностью объектов. Квадратные скобки, используемые для доступа к элементам массива, действуют точно так же, как квадратные скобки, используемые для доступа к свойствам объекта. Интерпретатор JavaScript преобразует указанные в скобках числовые индексы в строки — индекс 1 превращается в строку «1» — а затем использует строки как имена свойств.
В преобразовании числовых индексов в строки нет ничего особенного: то же самое можно проделывать с обычными объектами:
Особенность массивов состоит в том, что при использовании имен свойств, которые являются неотрицательными целыми числами, массивы автоматически определяют значение свойства 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 не поддерживает «настоящие» многомерные массивы, но позволяет неплохо имитировать их при помощи массивов из массивов. Для доступа к элементу данных в массиве массивов достаточно дважды использовать оператор [].
Например, предположим, что переменная matrix — это массив массивов чисел. Каждый элемент matrix[x] — это массив чисел. Для доступа к определенному числу в массиве можно использовать выражение matrix[x][y]. Ниже приводится конкретный пример, где двумерный массив используется в качестве таблицы умножения:
Методы класса 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() возвращает фрагмент, или подмассив, указанного массива. Два аргумента метода определяют начало и конец возвращаемого фрагмента. Возвращаемый массив содержит элемент, номер которого указан в первом аргументе, плюс все последующие элементы, вплоть до (но не включая) элемента, номер которого указан во втором аргументе.
Если указан только один аргумент, возвращаемый массив содержит все элементы от начальной позиции до конца массива. Если какой-либо из аргументов имеет отрицательное значение, он определяет номер элемента относительно конца массива. Так, аргументу -1 соответствует последний элемент массива, а аргументу -3 — третий элемент массива с конца. Вот несколько примеров:
Метод splice()
Метод Array.splice() — это универсальный метод, выполняющий вставку или удаление элементов массива. В отличие от методов slice() и concat(), метод splice() изменяет исходный массив, относительно которого он был вызван. Обратите внимание, что методы splice() и slice() имеют очень похожие имена, но выполняют совершенно разные операции.
Метод splice() может удалять элементы из массива, вставлять новые элементы или выполнять обе операции одновременно. Элементы массива при необходимости смещаются, чтобы после вставки или удаления образовывалась непрерывная последовательность.
Первый аргумент метода splice() определяет позицию в массиве, начиная с которой будет выполняться вставка и/или удаление. Второй аргумент определяет количество элементов, которые должны быть удалены (вырезаны) из массива. Если второй аргумент опущен, удаляются все элементы массива от указанного до конца массива. Метод splice() возвращает массив удаленных элементов или (если ни один из элементов не был удален) пустой массив.
Первые два аргумента метода splice() определяют элементы массива, подлежащие удалению. За этими аргументами может следовать любое количество дополнительных аргументов, определяющих элементы, которые будут вставлены в массив, начиная с позиции, указанной в первом аргументе.
Методы push() и pop()
Методы push() и pop() позволяют работать с массивами как со стеками. Метод push() добавляет один или несколько новых элементов в конец массива и возвращает его новую длину. Метод pop() выполняет обратную операцию — удаляет последний элемент массива, уменьшает длину массива и возвращает удаленное им значение. Обратите внимание, что оба эти метода изменяют исходный массив, а не создают его модифицированную копию.
Методы unshift() и shift()
Методы unshift() и shift() ведут себя почти так же, как push() и pop(), за исключением того, что они вставляют и удаляют элементы в начале массива, а не в конце. Метод unshift() смещает существующие элементы в сторону больших индексов для освобождения места, добавляет элемент или элементы в начало массива и возвращает новую длину массива. Метод shift() удаляет и возвращает первый элемент массива, смещая все последующие элементы на одну позицию вниз, чтобы занять место, освободившееся в начале массива.
Array
Массив ( Array ) в JavaScript является глобальным объектом, который используется для создания массивов; которые представляют собой высокоуровневые спископодобные объекты.
Создание массива
Доступ к элементу массива по индексу
Итерирование по массиву
Добавление элемента в конец массива
Удаление последнего элемента массива
Удаление первого элемента массива
Добавление элемента в начало массива
Поиск номера элемента в массиве
Удаление элемента с определённым индексом
Удаление нескольких элементов, начиная с определённого индекса
Создание копии массива
Синтаксис
Описание
Массивы являются спископодобными объектами, чьи прототипы содержат методы для операций обхода и изменения массива. Ни размер JavaScript-массива, ни типы его элементов не являются фиксированными. Поскольку размер массива может увеличиваться и уменьшаться в любое время, то нет гарантии, что массив окажется плотным. То есть, при работе с массивом может возникнуть ситуация, что элемент массива, к которому вы обратитесь, будет пустым и вернёт undefined . В целом, это удобная характеристика; но если эта особенность массива не желательна в вашем специфическом случае, вы можете рассмотреть возможность использования типизированных массивов.
Некоторые полагают, что вы не должны использовать массив в качестве ассоциативного массива. В любом случае, вместо него вы можете использовать простые объекты , хотя у них есть и свои подводные камни. Смотрите пост Легковесные JavaScript-словари с произвольными ключами(англ.) в качестве примера.
Доступ к элементам массива
Массивы в JavaScript индексируются с нуля: первый элемент массива имеет индекс, равный 0 , а индекс последнего элемента равен значению свойства массива length минус 1.
Элементы массива являются свойствами, точно такими же, как, например, свойство toString , однако попытка получить элемент массива по имени его свойства приведёт к синтаксической ошибке, поскольку имя свойства не является допустимым именем JavaScript:
Это не особенность массивов или их свойств. В JavaScript к свойствам, начинающимся с цифры, невозможно обратиться посредством точечной нотации; к ним можно обратиться только с помощью скобочной нотации. Например, если у вас есть объект со свойством, названным ‘3d’ , вы сможете обратиться к нему только посредством скобочной нотации. Примеры:
Обратите внимание, что во втором примере 3d заключено в кавычки: ‘3d’ . Индексы можно заключать в кавычки (например years[‘2’] вместо years[2] ), но в этом нет необходимости. Значение 2 в выражении years[2] будет неявно приведено к строке движком JavaScript через метод преобразования toString . Именно по этой причине ключи ‘2’ и ’02’ будут ссылаться на два разных элемента в объекте years и следующий пример выведет true :
Аналогично, к свойствам объекта, являющимся зарезервированными словами(!) можно получить доступ только посредством скобочной нотации:
Взаимосвязь свойства length с числовыми свойствами
Свойство массивов length взаимосвязано с числовыми свойствами. Некоторые встроенные методы массива (например, join , slice , indexOf и т.д.) учитывают значение свойства length при своём вызове. Другие методы (например, push , splice и т.д.) в результате своей работы также обновляют свойство length массива.
При установке свойства в массиве, если свойство имеет действительный индекс и этот индекс выходит за пределы текущих границ массива, движок соответствующим образом обновит свойство length :
Увеличиваем свойство length
Однако, уменьшение свойства length приведёт к удалению элементов.
Более подробно эта тема освещена на странице, посвящённой свойству Array.length .
Создание массива с использованием результата сопоставления
Результатом сопоставления регулярного выражения строке является JavaScript-массив. Этот массив имеет свойства и элементы, предоставляющие информацию о сопоставлении. Подобные массивы возвращаются методами RegExp.exec , String.match и String.replace . Чтобы было проще понять, откуда и какие появились свойства и элементы, посмотрите следующий пример и обратитесь к таблице ниже:
Свойства и элементы, возвращаемые из данного сопоставления, описаны ниже: