Массивы в JavaScript — это переменные, которые могут хранить более одного значения. Традиционно переменная может хранить только одно значение/элемент, но с помощью массивов вы можете хранить несколько значений/элементов в самой переменной. Это руководство научит вас всему, что необходимо знать, чтобы начать использовать массивы в коде JavaScript.
Прежде чем мы начнем, если вы хотите узнать больше о JavaScript или других темах, вам стоит заглянуть на SkillShare, вам стоит заглянуть на SkillShare. SkillShare — это платформа онлайн-обучения, содержащая учебники практически по всему, что вы хотите узнать. Чтобы узнать больше о SkillShare и его огромной библиотеке курсов и получить скидку 30%, нажмите на ссылку ниже:
Если вы хотите использовать VS code для JavaScript, ознакомьтесь с нашим руководством по разработке JavaScript в VS code.
Итак, давайте начнем с учебника!
- Теперь давайте приступим к работе с модулем JavaScript.
- Как создать массив в JavaScript
- Использование конструктора массивов в JavaScript
- Объявление таблицы в JavaScript
- Инициализация таблицы в JavaScript
- Пример инициализации таблицы в JavaScript:
- Метод оценки в массиве JavaScript
- Пример: Объявление и инициализация на разных строках в JavaScript
- Пример: Объявление и инициализация массива JavaScript в одной строке
- Как добавить элемент в конец таблицы в JavaScript
- Как добавить элемент в начало таблицы в JavaScript
- Как удалить элемент из конца таблицы в JavaScript
- Как удалить элемент из начала таблицы в JavaScript
- Как удалить элемент из таблицы в JavaScript
- Использование оператора delete для удаления элемента из таблицы JavaScript
- Удаление элементов из массива JavaScript с помощью метода splice()
- Как удалить несколько элементов из массива в JavaScript
- Как очистить массив в JavaScript
- Как просмотреть массив в JavaScript
- Популярные методы массивов JavaScript
Теперь давайте приступим к работе с модулем JavaScript.
Как упоминалось ранее, переменные обычно содержат одно значение. Ниже приведены примеры переменных с одним значением:
Пример переменной JavaScript с одним значением основные переменные с одним значением в JavaScript
Приведенные выше примеры — это две строки (Apple и Willy Wonka) и число (23).
Теперь давайте создадим несколько массивов из одиночных элементов. Откройте редактор JavaScript или IDE и введите команды, показанные ниже: Простой массив фруктов в JavaScript
Массивы обычно используются, когда определенная категория или переменная будет иметь большое количество различных значений.
Образец массива JavaScript, содержащего имена студентов
Например, если вы используете переменную/класс для хранения имен студентов в классе. Вместо того чтобы использовать переменную для каждого ученика, вы можете использовать переменную массив для хранения имен всех учеников. Массив JavaScript, хранящий различные типы значений
Массивы также могут содержать различные типы значений. Массив может содержать строки, числа, другие массивы, булевы значения (True, False) и даже объекты. Это может показаться очень сложным, но по мере того, как вы будете работать с массивами, станет понятнее, как они работают.
Как создать массив в JavaScript
- Использование конструктора массива.
- Использование массива с литеральной точкой.
Использование конструктора массивов в JavaScript
Построители массивов позволяют создавать переменные массива (переменные, в которых хранится массив). Вы можете либо создать массив без размера или значений и позже присвоить размер/значения, либо инициализировать массив значениями при его создании. Ниже перечислены шаги по использованию конструктора таблиц:
- Объявите таблицу с именем переменной и конструктором массива.
- Инициализируйте ее либо количеством значений, которые будет содержать таблица, либо самими значениями.
Объявление таблицы в JavaScript
На этом шаге вы, по сути, объявляете в коде, что существует новая таблица с именем переменной. Однако это еще не выделяет память под таблицу. Вместо этого просто создается переменная типа table. Объявление таблицы в JavaScript
Как показано на скриншоте выше, вы определяете переменную (в нашем примере — баллы) как новую таблицу. Таблица, упомянутая выше, еще не инициализирована. Давайте поговорим об инициализации таблицы.
Инициализация таблицы в JavaScript
Как уже упоминалось ранее, при инициализации таблицы в JavaScript вы либо явно указываете длину таблицы, либо значения, которые она будет хранить. Только после этого создается таблица и под нее выделяется память.
Пример инициализации таблицы в JavaScript:
Символ //, который вы видите в приведенном ниже примере, является комментарием. Комментарии служат для предоставления дополнительной информации и не являются частью инициализации массива.
Создание и инициализация новой переменной массива длиной 5 элементов
- Создание новой переменной (баллы)
- Установите ее как массив
- Установите размер массива в 5 элементов
Это означает, что вы инициализировали переменную (scores) для хранения пяти элементов. Как упоминалось ранее, эти элементы могут быть смесью чисел, булевых значений (True/False), твиков, массивов и даже объектов.
Метод оценки в массиве JavaScript
Шаги этого метода аналогичны, за исключением того, что здесь не используется конструктор массива. Однако вы также можете создать массив, объявив и инициализировав массив в той же строке кода.
Пример: Объявление и инициализация на разных строках в JavaScript
Создание и инициализация массива, содержащего четыре элемента, в JavaScript
В приведенном выше примере мы объявили нашу переменную (scores) как пустой массив ([]). Для обозначения пустого массива мы используем открытые ([) и закрытые (]) скобки без пробела между ними. Затем мы начинаем каждый элемент массива со значения.
Присвоение числа 25 первому элементу массива JavaScript
Для того чтобы добавить значение к определенному элементу таблицы, вы должны сослаться на индекс таблицы в вашей инициализации. В приведенном выше примере мы хотим добавить число 25 к первому элементу таблицы. Элементы массива начинаются с позиции 0, а не 1.
Поэтому вы должны написать: JavaScript индекс таблицы 0
Позиция элемента, который вы хотите добавить в массив, известная как индекс массива элемента, записывается между открывающим и закрывающим рычагами (в нашем примере [0]).
Если вы хотите экспортировать ваш массив на экран, вы можете использовать метод Console. log и передать переменную. Например, вы можете напечатать следующее:
Это экспортирует содержимое переменных скоринга в консоль, что вы можете увидеть на следующем снимке экрана: экспорт содержимого массива JavaScript
Как видите, все элементы нашего массива (scores) выводятся на консоль по порядку.
Вы также можете объявить и инициализировать массив в JavaScript, используя литеральную нотацию, как показано в примере ниже.
Пример: Объявление и инициализация массива JavaScript в одной строке
Объявление и инициализация массива в JavaScript в одной строке
Как добавить элемент в конец таблицы в JavaScript
JavaScript предоставляет несколько методов, позволяющих добавлять или удалять элементы в начало или конец таблицы. Первый метод, который мы обсудим, — это метод push. Метод push добавляет или убирает элемент в конец таблицы.
Используя массив баллов, который мы создали ранее, мы можем использовать метод push() для добавления значения (в нашем примере — строки) в конец массива баллов, как показано во фрагменте кода ниже: добавление строки в массив JavaScriptИспользование метода push()
Как видно из скриншота редактирования кода выше, когда мы используем метод push, а затем экспортируем содержимое массива баллов, наша новая строка (chocolate) добавляется в конец массива баллов.
Далее мы рассмотрим, как добавить новый элемент в начало массива с помощью метода unshift.
Как добавить элемент в начало таблицы в JavaScript
Метод unshift() инициализирует или добавляет элемент в начало таблицы. Ниже приведен пример использования метода unshift() для добавления булева значения false в начало массива (оценки).
Когда мы экспортируем наш массив после использования метода unshift(), вы можете увидеть, что наше булево значение false было добавлено в начало таблицы scores.
Но что, если мы хотим удалить элементы из начала или конца нашей таблицы? К счастью, JavaScript предоставляет два метода, pop() и shift(), которые позволяют нам это сделать.
Как удалить элемент из конца таблицы в JavaScript
Чтобы удалить элемент из конца таблицы в JavaScript, мы используем метод pop(). Ниже приведен пример использования метода pop():
Заметили ли вы какие-нибудь отличия от наших предыдущих методов? В методе pop нам не нужно передавать значение. Это происходит потому, что метод уже знает, что ему нужно удалить последний элемент таблицы, поэтому нам не нужно ничего передавать методу.
Удаление последнего элемента в таблице JavaScript с помощью метода pop().
Как вы можете видеть на скриншоте выше, после использования метода pop() последний элемент в нашей таблице оценок (шоколад) был удален из таблицы.
Далее мы рассмотрим, как удалить первый элемент таблицы с помощью метода shift().
Как удалить элемент из начала таблицы в JavaScript
Удалить элемент из начала таблицы очень просто с помощью метода shift(). Ниже приведен пример использования метода shift() для удаления элемента из начала таблицы: Удаление первого элемента из таблицы JavaScript с помощью метода shift()
Метод shift() удаляет первый элемент из таблицы, как показано на скриншоте выше.
Далее мы рассмотрим, как удалять определенные элементы в таблице с помощью методов delete() и splice().
Как удалить элемент из таблицы в JavaScript
- Использование оператора delete
- Использование метода splice
Использование оператора delete для удаления элемента из таблицы JavaScript
Оператор delete удаляет текущее значение из таблицы JavaScript, используя индекс элемента. Индекс — это позиция элемента в таблице.
Так, в приведенном выше примере, если бы я хотел удалить строку «table» из таблицы scores, я бы использовал оператор delete для таблицы scores и передал бы индекс строки «table». Удаление значения в таблице JavaScript с помощью оператора Delete
Заметили на выходе, что таблица все еще имеет ту же длину? Это потому, что оператор delete удаляет значение в элементе таблицы, но не удаляет позицию элемента. В результате у вас есть неопределенный элемент в индексе, на котором вы использовали оператор delete (в нашем случае позиция 3 таблицы оценок).
Вы можете спросить себя: это работает отлично, но что если у меня огромный массив, и я не знаю индекс значения, которое хочу удалить с помощью оператора delete? JavaScript предлагает вам метод Indexof. Вы можете использовать метод Indexof для получения индекса значения, которое вы передаете. Звучит запутанно? Что ж, давайте покажем пример:
В приведенном выше примере я создал массив баллов в первой строке. Затем я использовал оператор delete для массива баллов, но на этот раз, внутри скобок, я использовал метод Indexof для массива баллов, передав строку «Array». Если вы только начинаете, это может быть непонятно, но по мере того, как вы будете использовать этот метод все чаще, он станет более естественным. Удаление значения в массиве JavaScript с помощью оператора delete и метода Indexof
Как видите, использование метода Indexof позволяет нам удалить нужное значение без необходимости знать его фактическое местоположение. Довольно круто, верно?
Но что если я хочу удалить и значение, и элемент из таблицы? Тогда нам нужно использовать метод splice(), который мы рассмотрим далее.
Удаление элементов из массива JavaScript с помощью метода splice()
- начальная позиция (первый удаляемый элемент)
- Сколько элементов после этого нужно удалить
Примером использования метода splice() может быть:
Удаление одного элемента из массива JavaScript с помощью метода splice()
В приведенном примере из массива удаляется один элемент, который является элементом на позиции 2 в массиве. Как вы можете видеть, 35 было значением в позиции 2 массива score. Однако после того, как мы выполнили метод splice, из вывода видно, что 35 больше нет в массиве. Кроме того, вы должны заметить, что размер (или длина) массива изменился по мере удаления как значения, так и элемента.
Как удалить несколько элементов из массива в JavaScript
Давайте рассмотрим на примере, как удалить несколько элементов из массива.
Предположим, мы хотим удалить из массива score элементы в позициях 1, 2 и 3 (25, 35 и ‘Array’). Приведенный выше фрагмент кода удаляет три элемента, начиная с позиции 1 массива. Удаление трех элементов из массива JavaScript с помощью метода splice()
Как видно из результата работы метода splice(), показанного на скриншоте выше, элементы, находившиеся в позициях 1-3 массива очков (25, 35, ‘Array’), были удалены из массива.
Как очистить массив в JavaScript
Вы можете очистить таблицу, просто присвоив переменную массива пустой таблице. Смотрите пример кода ниже: Очистка массива JavaScript
Как вы можете видеть в выводе выше, как только мы установили массив score в пустой массив с помощью скобок [], массив стал пустым.
Как просмотреть массив в JavaScript
Иногда требуется вывести или прочитать каждый элемент массива по очереди. Для этого нужно просмотреть массив. Хотя это можно сделать с помощью традиционных механизмов циклов, в JavaScript есть встроенный цикл массива.
Итак, допустим, мы хотим просмотреть каждый элемент нашего массива очков и вывести его на консоль, для этого мы используем следующий код:
Код может показаться немного странным, но на самом деле он очень хорошо описывает то, что делает. Вы выполняете метод foreach() для массива баллов. Внутри фигурных скобок.<>Экспортируете элемент в консоль. Перебор массива JavaScript и экспорт каждого значения в консоль.
Как вы можете видеть, метод foreach выполняет итерации по массиву очков и экспортирует каждое значение в массиве в консоль.
Популярные методы массивов JavaScript
Вы используете один и тот же пароль для нескольких сайтов? У вас проблемы с запоминанием всех паролей? Вам стоит попробовать 1Password! 1Password безопасен и позволяет безопасно входить на сайты и заполнять формы одним щелчком мыши. Я использую 1Password для всех своих паролей, и он действительно упрощает управление всеми паролями.
Для получения дополнительной информации о 1Password и бесплатной 30-дневной пробной версии перейдите на сайт 1Password по ссылке ниже:
Проект 24 от Income School — это программа, которую я использую. Я являюсь участником проекта уже более года и только что продлил свое членство. Я не могу рекомендовать «Проект 24»! Для получения дополнительной информации о школе Income School щелкните по ссылке ниже: