JavaScript массивы

В этой части учебника, мы разберём, создание массива в JavaScript и работа с ним, думаю вам понравится.

Что такое массив:

Для начала посмотрим что такое массив, если кратко говоря, то это место, где хранятся несколько данных, каждое из которых можно получить по индексу.

Объявление массива в JS:

Объявление или создание массива происходит также, как и создание переменной, единственное вы вместо значений пишете квадратные скобки.

Как видите, вы можете создать пустой массив или уже наполнить его данными, при чём, вы можете использовать любой тип и даже их перемешивать, например, как то так.

То есть можно даже функции хранить таким образом, о функциях вы прочитаете в следующей части.

Также для создания массива, вы можете использовать класс Array, вот как это делается.

Работа с массивами в JS:

Теперь перейдём к работе с массивом, для начала посмотрим как получить элемент массива, его можно взять ро индексу.

Важно:

В JavaScript индексация начинается с нуля.



Тут просто создаём массив и выводим в консоль его значение по индексу один, вот что вывелось.

Вывод элемента массива в JavaScript

Как видите, у нас вывелся второй элемент, хоть и использовали индекс один, это всё потому что, индексация начинается с нуля.

Также мы можете вывести все элементы массива, для этого нужно использовать цикл.

Здесь всё крайне просто, в цикле мы выводим каждый элемент, самое интересное, это условие, при котором он должен работать, там мы используем метод length, который возвращает количество данных.

То есть цикл будет работать, пока i строга меньше трёх, в нашем случае.

Вывод всех элементов массива

Также вы можете изменять элемент массива как вам надо, для этого просто используете нужный индекс и присваиваете ему значение на которое нужно изменить.

Вот что выведется:

Замена элемента массива

Методы работы с массивами в JS:

Также кроме length есть другие методы для работы с массивами в JavaScript, здесь покажу только самые основные, их четыре.

  • push() — Добавляет элемент в конец массива;
  • pop() — Удаляет элемент в конце массива;
  • unshift() — Добавляем элемент в начала массива;
  • shift() — Удаляем из массива первый элемент;
  • splice() — Заменяет или удаляет элементы
  • concat() — Объединяет массивы;
  • farEach() — Перебор массива;

Это те методы которые вы будите пользоваться чаще всего, вот пару примеров работы с ними.

Здесь мы просто не много изменяем массив, сначала добавляем в конец слово «Киви», а потом удаляем элемент из начала, вот что должно получится.

Добавление и удаление элемента в массиве

Как видите вывод массива изменился, в конец добавилось слово, а в начала удалилось.

Вот этот пример покажет как происходит в JavaScript удаление элемента массива или его замена.

Здесь мы уже используем метод splice(), первый параметр, это с какого индекса удалять элемент, второй, количество удаляемых элементов.

Удаление из массива

Ещё благодаря этому методу, можете заменять элементы.

Тут после параметра который отвечает за количество заменяемых элементов, просто перечисляем все элементы которые мы хотим добавить, и даже не важно какого типа.

Меняем элементы в массиве в JS

Последнее что мы рассмотрим, это как в JavaScript перебрать массив и объединить его с другим массивом.

В начале мы как всегда создаём новый массив, потом с помощью метода concat(), который приминается к массиву, внутри в качестве параметра принимает ещё один массив, возвращает уже объединённый массив данных, мы же присваиваем это значение уже созданному.

Дальше с помощью метода forEach() мы перебираем, внутри в качестве параметра используем функцию, которая принимает в себя ещё два параметра, это item, значение элемента и key, его индекс.

Выводим весь массив в консоль, вот что получилось.

Вывод с перебором массива в JavaScript

Как видите, у нас вывелся объединённый массив, то есть, всё правильно работает.

Вывод:

В этой части вы прочитали о создание массива в JavaScript и узнали что это вообще такое, ну и конечно, поняли как с этим работать.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Дополнительно: