Вложенные массивы javascript. JavaScript - Массивы

Учимся индексировать массивы в js , удалять и добавлять их элементы.

Массив в JavaScript - это глобальный объект, предназначенный для хранения списка значений.

Он похож на другие переменные тем, что может хранить данные любого типа. Но у массива есть одно важное отличие от переменной: в нём может одновременно храниться больше одного элемента.

Массив - это упорядоченный набор значений. Каждое значение называется элементом и имеет свой номер, который называется индекс.

Элемент внутри массива может быть любого типа. Причём элементы одного массива могут быть разных типов: числа, строки, логические элементы и даже объекты или другие массивы.

Порядок элементов массива отсчитывается с 0 . Получается, что в массиве всегда будет смещение индекса на единицу: у первого элемента будет индекс 0 , у второго 1 , и т.д.

Вот пример массива с элементами различных типов:

Массивы очень удобны, потому что в них можно хранить столько данных, сколько нужно. Максимально возможный размер js -массива — 2 32 элемента.

Нужно сказать JavaScript , что мы хотим создать именно массив. Для этого есть два варианта: значение в квадратных скобках или ключевое слово new .

Заключённый в квадратные скобки список значений, разделённых запятыми.

var myArray = [ "Джек", "Сойер", "Джон", "Дезмонд" ];

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

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

Чтобы объявить пустой массив, оставьте скобки пустыми:

var myArray = ;

var lostArray = new Array("Джек", "Сойер", "Джон", "Дезмонд"); var twinPeaksArray = new Array("Лора", 2, ["Боб", "Лиланд", "Дейл"]);

Ключевое слово new говорит JavaScript создать новый массив, значения которого передаются как параметры.

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

var myArray = new Array(80);

Выражение, приведенное выше, создаст пустой массив, состоящий из 80 слотов со значениями undefined .

Объявление пустого массива:

var myArray = new Array();

С помощью индекса каждого элемента можно работать с любыми данными в массиве, обращаясь к ним при помощи оператора :

var myArray = ["Джек", "Сойер", "Джон", "Дезмонд"]; console.log(myArray); // Выводит “Джек” console.log(myArray); // Выводит “Дезмонд”

В массиве может быть несколько уровней, то есть каждый элемент может сам быть массивом. В итоге получится двумерный js -массив . Как же обратиться к этим массивам, которые располагаются внутри других - «многомерным массивам »?

Для примера давайте рассмотрим массив, представляющий семью. Дети из этой семьи записаны отдельным массивом внутри главного:

var familyArray = ["Мардж", "Гомер", ["Барт", "Лиза", "Мэгги"]];

Можно представить его следующим образом:

Для обращения к значению «Лиза »:

var lisa = familyArray; console.log(lisa); // выводит «Лиза»

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

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

var myArray = [ "Кейт", "Сун"]; myArray = "Джулиет"; console.log(myArray); // Выводит "Кейт, Сун, Джулиет"

Что произойдёт, если я объявлю элемент с индексом, перед которым нет других элементов? Массив сам создаст все недостающие элементы и присвоит им значение undefined :

var myArray = ["Кейт", "Сун"]; myArray = "Джулиет"; console.log(myArray.length); // Выводит «6» console.log(myArray); // Prints ["Кейт", "Сун", undefined, undefined, undefined, "Джулиет"]

Узнать какова длина js -массива можно, воспользовавшись свойством length . В примере, приведенном выше, в массиве шесть элементов, и для трёх из них не было задано значение - они обозначены как undefined .

С помощью метода push() можно добавить в js -массив один или несколько элементов. Push() принимает неограниченное количество параметров, все они будут добавлены в конец массива.

var myArray = [ "Кейт", "Сут"]; myArray.push("Джулиет"); // Добавляет в конец массива элемент "Джулиет" myArray.push("Либби", "Шеннон");// Добавляет в конец массива элементы "Либби" и "Шеннон" console.log(myaArray); // Prints ["Кейт", "Сун", " Джулиет ", "Либби", "Шеннон"]

Метод unshift() работает также как и push() , только добавляет элементы в начало массива.

var myArray = [ "Кейт", "Сун"]; myArray.unshift("Джулиет"); // Добавляет в начало массива элемент "Джулиет" myArray.unshift("Либби", "Шеннон"); // Добавляет в начало массива элементы "Либби" и "Шеннон" console.log(myArray); // Выводит ["Либби", "Шеннон", "Джулиет", "Кейт", "Сун"]

Методы pop() и shift() удаляют последний и первый элемент массива, соответственно:

var myArray = ["Джек", "Сойер", "Джон", "Дезмонд", "Кейт"]; myArray.pop(); // Удаляет элемент "Кейт" myArray.shift(); // Удаляет элемент "Джек" console.log(myArray); // Выводит ["Сойер", "Джон", "Дезмонд"]

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

В следующем примере метод splice() добавляет два элемента, начиная с индекса 2 (то есть с третьего элемента ):

var fruitArray = ["яблоко", "персик", "апельсин", "лимон", "лайм", "вишня"]; fruitArray.splice(2, 0, "дыня", "банан"); console.log(fruitArray); // Выводит ["яблоко", "персик", "дыня", "банан", "апельсин", "лимон", "лайм", "вишня"]

Первый параметр метода splice() - индекс. Он указывает, на какой позиции нужно добавить/удалить элементы. В нашем примере мы выбрали индекс 2 (со значением «апельсин» ).

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

Следующие параметры - необязательные. Они добавляют в массив новые значения. В нашем случае нужно добавить «дыню» и «банан», начиная с индекса 2.

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

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

У каждой ячейки есть номер. Именно по этому номеру, по окончанию покупок, вы можете понять в какой именно ячейке лежат ваши вещи.

По аналогии мы можем назвать переменной одну ячейку шкафа в котором хранятся ваши вещи, а все ячейки - это массив .

В языке Javascript массив можно создать разными способами.

Этот способ для числовых данных и объектов:

Этот способ для строк:

Данным способом мы создали массив из четырех элементов.

Второй способ создания массивов в Javascript через объекты.

Выглядит это так:

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

Для того, чтобы обратиться к первому элементу массива, нужно написать:

где, достаем первый элемент массива - array. Console.log - отображает содержимое массива.

Нумерация массивов начинается с нуля. Именно поэтому когда мы обращаемся array нам выводится значение первого элемента 1 или в примере со строками - Один.

В Javascript существуют методы для работы с массивами. Эти методы очень полезны и некоторые программисты по непонятной причине избегают их и пишут свои велосипеды.

Метод reverse изменяет массив и формирует новый массив с элементами в обратном порядке.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.reverse();

Результат:

["Четыре", "Три", "Два", "Один"]

Метод concat объединяет массив с другим массивом или данным. Метод concat не изменяет исходный массив.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.concat(12);

Результат:

["Один", "Два", "Три", "Четыре", 12]

Метод slice обрезает часть строки и может принимать на вход как два параметра(начало и конец), так и один параметр.

Если второй параметр задать -1, тогда он вернет остальную часть строки c предпоследним элементом.

Метод slice не изменяет исходный массив.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.slice(1,-1);

Результат:

Метод splice достаточно многофункциональный.

На вход он принимает три аргумента:

2. Количество элементов массива которые нужно удалить

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

Метод splice изменяет исходный массив.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.splice(1, 2, "2", "3");

Результат:

["Один", "2", "3", "Четыре"]

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

Метод push вставляет элемент в конец массива

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.push("Пять");

Результат:

["Один", "Два", "Три", "Четыре", "Пять"]

Метод unshift вставляет элемент в начало массива

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.unshift("Ноль");

Результат:

["Ноль", "Один", "Два", "Три", "Четыре"]

Метод pop удаляет последний элемент из массива и возвращает удаленный элемент.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.pop();

Результат:

["Один", "Два", "Три"]

Метод shift удаляет первый элемент из массива и возвращает удаленный элемент.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

Результат:

["Два", "Три", "Четыре"]

Метод join в Javascript преобразует массив в строку и позволяет задать свой собственный разделитель. По умолчанию, метод join в качестве разделителя использует запятую. Давайте попробуем поставить разделитель "-".

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.join("-");

Результат:

Один-Два-Три-Четыре

Метод Soft по умолчанию сортирует массив в алфавитном порядке. Мы можем передать ему функцию с другой логикой сортировки. Об этом поговорим в отдельной статье посвященный методам отдельно.

Пример:

array = ["а", "в", "б", "г"];

Результат:

["а", "б", "в", "г"]

Циклы - это очень важные методы для работы с массивами. С помощью них мы можем обращаться к отдельно взятому элементу массива и проходить по всему массиву.

Простой цикл для перебора массива

Пример:

Результат:

Один
Два
Три
Четыре

Улучшенный цикл для перебора массива. На вход может принимать три элемента: element, index, array.

Пример 1:

Результат:

Один
Два
Три
Четыре

Пример 2:

Метод toUpperCase() делает все элементы с большой буквы

Результат:

["ОДИН", "ДВА", "ТРИ", "ЧЕТЫРЕ"]

Для работы с массивами в Javascript существует много методов. В этой статье мы рассмотрели не все методы, в следующих статьях обязательно уделим им внимание, но если вы будете уметь пользоваться методами работы с массивами из этой статьи, ваш скилл будет плюс 150 процентов и вы значительно повысите свой уровень frontend разработчика на языке программирования Javascript.

Следите за новыми статьями и видеоуроками, подписывайтесь на наш канал YouTube и вступайте в группу

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

Массив – это упорядоченный набор данных, который имеет имя и является экземпляром объекта Array. Он состоит из элементов, доступ к которым осуществляется с помощью их порядкового номера (индекса). Нумерация элементов в массиве начинается не с 1, а с 0.

На следующем рисунке приведён числовой массив, состоящий из 7 элементов. Элементы данного массива содержат следующие данные: 1 элемент (0 индекс) - число 123, 2 элемент (1 индекс) - число 214, 3 элемент (2 индекс) - число 315 и т.д.

//элемент в который будем выводить массив //создание числового массива var numberArray = new Array(123,214,315,312,124,206,218); //вывести массив в элемент, имеющий id="myP" document.getElementById("myP").innerHTML = "1 Элемент массива: " + numberArray + "
" + "2 Элемент массива: " + numberArray + "
" + "3 Элемент массива: " + numberArray + "
" + "4 Элемент массива: " + numberArray + "
" + "5 Элемент массива: " + numberArray + "
" + "6 Элемент массива: " + numberArray + "
" + "7 Элемент массива: " + numberArray;

Создание массива на языке JavaScript осуществляется с помощью оператора new и функции-конструктора Array . В круглых скобках функции-конструктора Array можно указать одно из следующих значений:

• Число. В этом случае данная функция создаст массив, состоящий из указанного числа элементов. Все эти элементы будут иметь значения undefined .
• Несколько значений через запятую. В данном случае функция-конструктор Array создаст массив, состоящий из указанного количества элементов, и присвоит им соответствующие значения.
• Ничего. В этом случае данная функция создаст пустой массив.

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

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

Например, создадим пустой массив и добавим в него 4 текстовых элемента:

//создание пустого массива smartphoneColors var smartphoneColors = new Array(); //присваиваем 1 элементу массива (индекс 0) значение "Black" smartphoneColors = "Black"; //присваиваем 2 элементу массива (индекс 1) значение "White" smartphoneColors = "White"; //присваиваем 3 элементу массива (индекс 2) значение "Grey" smartphoneColors = "Grey"; //присваиваем 4 элементу массива (индекс 3) значение "Blue" smartphoneColors = "Blue";

Например, выведем в консоль браузера (F12) значения 2 и 4 элемента массива smartphoneColors:

Console.log("2 элемент = " + smartphoneColors); console.log("4 элемент = " + smartphoneColors);

Определение количества элементов в массиве осуществляется с помощью свойства length .

//создадим массив путём перечисления значений элементов в функции Array var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //переменной lengthArray присвоим длину массива volumeHDDs var lengthArray = volumeHDDs.length;

Получение значения первого элемента массива осуществляется с помощью указания в квадратных скобках этого массива числа 0:

//создание массива, состоящего из 3 элементов var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //получение значения первого элемента массива var firstValue = volumeHDDs;

Получение значения последнего элемента массива осуществляется с помощью указания в квадратных скобках этого массива выражения имя_массива.length-1:

//создание массива, состоящего из 3 элементов var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //получение значения последнего элемента массива var lastValue = volumeHDDs;

Перебор элементов массива осуществляется с помощью цикла for .

Например, переберём все элементы массива и выведем их значения в консоль браузера (F12):

//создание массива nameStudents, состоящего из 4 элементов var nameStudents = new Array("Петя","Вася","Коля","Максим"); //перебор элементов массива от 0 до длины массива-1 for (var i=0; i