Меню
Спросить
JS

Массивы в JavaScript

25 октября 2017
Массивы в JavaScript

Всем привет друзья. Сегодня поговорим про одномерные и многомерные массивы в JavaScript. Познакомимся с такими методами как pop(), shift(), unshift(), push(), slice() и свойство length. Так же будем знать как создавать массив, как добавлять элементы в массив и как их удалять, как читать массив и тд. Как обычно, для начала, ответим на вопрос - что такое массив?
Мы с вами на сегодняшний день знаем, что такое переменные. Так вот, массив - это можно сказать тоже переменная, но с типом данных "массив", в отличие от обычной переменной, массив может содержать в себе не одно значение и причем каждое значение может быть с разным типом данных. Например, массив может содержать в себе 10 разных значений, у каждого есть свой порядковый номер - индекс, и 5 из них числа, а другие 5 строки. Значения массивы перечисляются через запятую в квадратных скобках.
Давайте попробуем объявить или создать массив.

Создание массива

Мы умеем создавать объекты. Массив создается не сложнее, либо с использованием оператора new, либо просто квадратные скобки.

  1. var
  2. mass = new Array(), // Создали новый пустой массив []
  3. mass2 = []; // Тоже создали новый пустой массив []

Мне привычнее создавать массив без использование оператора new. Так проще. Но это не точно.
Поехали дальше. Давай создадим НЕ пустой массив.

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];

Как видишь, массив действительно может содержать в себе различные типы данных значений.
Я надеюсь ты запомнил, то что я сказал выше. Каждое значение имеет свой порядковый номер - индекс. Отсчет есесна начинается с лева и с нуля. Наш массив содержит 8 элементов, но последний будет иметь индекс 7. Если еще не понятно, то давай перечислим:

  1. значение "0" - индекс 0
  2. значение "1" - индекс 1
  3. значение "2" - индекс 2
  4. значение " 'abc' " - индекс 3
  5. значение " 'Привет МАссив' " - индекс 4
  6. значение "2.34" - индекс 5
  7. значение "true" - индекс 6
  8. значение "-25" - индекс 7

Вот теперь думаю закрепили, что такое индекс элемента в массиве. Поехали дальше друг мой.
Окей, массив создавать умеем, знаем ЧО такое индекс, теперь давай разберемся как обращаться к определенному элементу в массиве, чтобы например его изменить или вывести.
Чтобы обратится к элементу массива, нужно знать его индекс. Написать название массива, открыть квадратные скобки и в скобках указать индекс элемента к которому хотим обратиться.
Например, возьмем тот же массив, что выше записывали и выведем например значение элемента под индексом 4.

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];
  3. alert( mass[4] );

Получилось? Воот, так то лучше. Теперь давай перечислим все элементы массива. В этом нам поможет что? Правильно, цикл!
Воспользуемся циклом FOR и перечислим каждый элемент массива.

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];

  3. for (var i = 0; i<?; i++) {

  4. }

Что нужно поставить вместо знака вопроса? Вместо знака вопроса нужно поставить длину массива, мы ведь хотим все элементы обработать. Да кстати, у массива имеется такое свойство как "длина", длину массива можно посчитать самому, в нашем случае это 8, 8 элементов, поэтому длина массива равна 8. НО, можно и не считать самому, для этого есть свойство length.
И так чтобы получить длину массива нужно к названию массива добавить свойство length.

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];

  3. for (var i = 0; i < mass.length; i++) {

  4. }

Теперь просто выведем алертом каждый элемент массива.
Если мы обращались к конкретному элементу, мы при этом знали его индекс, но сейчас вместо индекса нужно подставить переменную i, которая изначальна равна нулю, а отсчет индексов у массива идет от нуля, и каждый раз она будет увеличиваться на единицу, то есть каждый раз мы будем обращаться к новому элементу, до тех пор пока переменная i не станет равна 8, а 8 не меньше 8, поэтому цикл остановит свою работу после обработки элемента под индексом 7, что нам и нужно - от 0 до 7 включительно.
Чтобы было понятней смотрите как эта работа выглядит:

  1. запустили массив где i < 8 {
  2. i изначально равна 0;
  3. выводим элемент массива под индексом 0 - mas[i] или mas[0];
  4. i++; // увеличили на единицу
  5. теперь i равна 1;
  6. выводим элемент массива под индексом 1 - mas[i] или mas[1];
  7. i++;
  8. и тд.
  9. }

Можете запустить и проверить как это работает, только все это происходит за доли секунды.

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];

  3. for (var i = 0; i < mass.length; i++) {
  4.     alert( mass[i] );
  5. }

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

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];
  3. mass[3] = 25;

Теперь значение элемента под индексом 3 изменилось с 'abc' на 25.
Если вы забыли добавить какое-то значение в массив, можно сделать так.

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];
  3. mass[mass.length] = 2456;
  4. // массив теперь станет таким:
  5. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25, 2456];

У массива так же есть свои методы, давайте рассмотрим методы массива.

Методы массивов в JavaScript

Массивы имеют свои методы, некоторые из них похожи на те действия, которые мы писали выше.

Метод push()

Метод push() добавляет в конец массива новый элемент с указанным значением

  1. mas.push('Новый элемент');

Метод pop()

Метод pop() работает как push(), только pop() удаляет конечный элемент.

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];
  3. mass.pop(); // удалит последний элемент со значением -25 и вернет данное значение

Метод splice()

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

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];
  3. mass.splice(3); // Массив станет таким - [0, 1, 2] 

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

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];
  3. mass.splice(3, 2); // Массив станет таким - [0, 1, 2, 2.34, true, -25]

И наконец третий параметр, в нем мы указывает то значение, которое будет принимать новый элемент с индексом равным первому параметру. Причем значение может быть не одно.
Например.

  1. var
  2. mass = [0, 1, 2, 'abc', 'Привет МАссив', 2.34, true, -25];
  3. mass.splice(3, 2, 'новье', 'еще новье');
  4. // Массив станет таким - [0, 1, 2, 'новье', 'еще новье', 2.34, true, -25]

Метод sort()

Метод sort() сортирует массив.
Например.

  1. var
  2. mass = [23, 3, 5, 1];
  3. mass.sort(); // Массив станет таким - [1, 3, 5, 23]

Метод reverse()

Метод reverse() обращает массив в обратную сторону.
Например.

  1. var
  2. mass = [1, 2, 3, 4, 5];
  3. mass.reverse(); // Массив станет таким - [5, 4, 3, 2, 1]

Метод shift()

Метод shift() удаляет элементы массива с самого начала.

  1. var
  2. mass = [1, 2, 3, 4, 5];
  3. mass.shift(); // Массив станет таким - [2, 3, 4, 5]

Метод unshift()

Метод unshift() делает тоже самое, только не удаляет а вставляет в начало.

  1. var
  2. mass = [1, 2, 3, 4, 5];
  3. mass.unshift(23); // Массив станет таким - [23, 1, 2, 3, 4, 5]

Метод join()

Метод join() делает из массива строку, в параметре можно указать значение, которым они будут слеплены. По умолчанию это запятая.
Например.

  1. var
  2. mass = ['Мама', 'мыла', 'раму'];
  3. mass = mass.join(' '); // Вернет строку - 'Мама мыла раму'

Возможно конечно это не все методы массивов в JavaScript, если что я дополню)))
Поехали дальше =)

Многомерные массивы

Многомерные массивы - это те же массивы, только в качестве элементов тоже массивы. Если кто проходил тему Матриц из математики, то будет легче.
Рассмотрим пример для полноты понимания.

  1. var
  2. arr = [
  3.     [1, 2, 'abc', 2],
  4.     [23, 0, 'hehehe'],
  5.     [2345, 2, 3, 4]
  6. ];

Это и есть многомерный массив, то есть массив который состоит из трех массивов.
Попробуем вывести элемент массива под индексом 0.

  1. var
  2. arr = [
  3.     [1, 2, 'abc', 2],
  4.     [23, 0, 'hehehe'],
  5.     [2345, 2, 3, 4]
  6. ];
  7. alert( arr[0] ); // Выведет - 1, 2, 'abc', 2

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

  1. var
  2. arr = [
  3.     [1, 2, 'abc', 2],
  4.     [23, 0, 'hehehe'],
  5.     [2345, 2, 3, 4]
  6. ];

  7. for (var i = 0; i < arr.length; i++) {
  8.     console.log('Массив под индексом - '+i);
  9.     for (var j = 0; j < arr[i].length; j++) {
  10.         console.log( arr[i][j] );
  11.     }
  12. }

Заключение

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

Следующая статьяПредыдущая статья