Видео курс JavaScript Essential. Массивы - видео курсы ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

Выбери свою IT специальность

Подписка

×

Вы открыли доступ к тесту! Пройти тест

Вы действительно хотите открыть доступ к тестированию по курсу JavaScript Стартовый 2015 на 40 дней?

ВИДЕОУРОК №4. Массивы

Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео
Во вступительном видео ролике вы узнаете о назначении языка JavaScript и о структуре видео курса “JavaScript Essential”. Учебная программа предусматривает знакомство с синтаксисом языка, изучение базовых методов, конструкций, а также освоение основных принципов алгоритмизации с возможностью будущего применения на практике.
Читать дальше...
Данный видео урок познакомит вас с историей языка JavaScript и его синтаксисом. Вы узнаете о переменных и типах данных языка, о том как выполнять арифметические операции с переменными и преобразовывать типы данных. Также в этом уроке тренер расскажет о способах подключения сценария к странице и о вариантах отображения данных пользователю через диалоговые окна.
Читать дальше...
В видео уроке будет рассмотрено назначение операторов ветвления, также тренер расскажет Вам об условных конструкциях: if, if else, тернарных операторах и операторах многозначного выбора switch-case. Во второй части урока будет рассмотрена работа с циклическими операторами - do while, while, for, также отдельное внимание будет уделено работе операторов break и continue.
Читать дальше...
В этом видео уроке Вы научитесь создавать массивы в JavaScript и изучите разные типы массивов - одномерные, многомерные, зубчатые. Во второй части видео урока тренер расскажет Вам о методах, которые позволяют изменять состояние массива, добавлять или удалять элементы массива, преобразовывать массив в строку, сортировать массив.
Читать дальше...
После просмотра этого видео урока Вы узнаете, что такое функция. Также в этом уроке Вы узнаете о особенностях использования функций в JavaScript и изучите такие конструкции как функции-литералы, функции обратного вызова. В этом уроке будут рассмотрены особенности языка связанные с областями видимости, поэтому для понимания принципов разработки сложных JavaScript модулей этот урок будет очень важным.
Читать дальше...
Объекты – важная тема, которой Вы должны уделить особое внимание. Для понимания сложных JavaScript сценариев и использования современных фреймворков Вам нужно уметь создавать объекты и работать с ними. После просмотра урока Вы будете знать техники создания объектов в JavaScript, Вы узнаете, что такое свойство и метод. Объекты в JavaScript сильно отличаются от объектов в других языках программирования и на этом уроке Вы узнаете о этих отличиях.
Читать дальше...
ПОКАЗАТЬ ВСЕ
основные темы, рассматриваемые на уроке
0:00:00
Вступление. Массивы
0:06:30
Пример создания массива
0:17:59
Пример свойство length
0:26:01
Пример ассоциативных массивов
0:31:09
Пример многомерного массива
0:40:28
Пример метод Join
0:44:22
Пример метод concat
0:48:25
Пример метод reverse
0:49:00
Пример метод slice
0:51:57
Пример метод slice
0:53:22
Пример метод splice
0:58:45
Пример метод sort
1:00:26
Пример метод push
1:02:31
Пример метод pop
1:04:03
Пример метод shift
1:04:59
Пример метод UnShift
ПОКАЗАТЬ ВСЕ
Титры видеоурока

Давайте обсудим для чего нужны массивы в JavaScript и в любом другом языке программирования. Представьте вы создаете сайт для банка. И банк попросил сделать страницу с кредитным калькулятором. На этой странице будет находится несколько элементов управления, например, поле ввода для внесения суммы кредита, поле ввода для указания на какой период берется кредит, например, какие-нибудь Checkbox для определения типа кредита, и кнопочка рассчитать кредит. Кликнув по кнопке, пользователь должен увидеть помесячно сколько ему придется платить банку, в случае если он возьмет такой кредит. Вот страница должна вывести Январь – сумма такая-то, Февраль – сумма такая-то, Март – следующая сумма. И так помесячно на какой-то определенный период показать информацию о платежах, которые придется делать пользователю. Вот наш сценарий, получается, должен будет хранить информацию о суммах, которые помесячно нужно будет выплатить. Сумму на Январь, Февраль, Март, Апрель, и так там допустим 12 значений, в течении года. Как мы будем хранить эти данные у себя в приложении. Один из вариантов мы можем создать переменную, например, month1. То есть месяц первый – значение такое-то. Потом переменную month2 – другое значение, month3. То есть просто создать 12 переменных, в каждую переменную по отдельности записать значения. Но что если кредитный калькулятор при одних настройках считает на один период времени, допустим на год, при других настройках – на полгода, при третьих настройках – на пять лет. Получается нам нужно будет создать на 12 переменных, а 24 переменные, или еще больше. Наш код будет очень некрасивым, очень тяжело будет сопровождать, потому что у нас будет просто куча переменных, month1, month2, month3, month4.. Работать с этими переменными будет очень тяжело. Вам придется писать очень большой JavaScript код, который будет постоянно инициализировать по отдельности каждую переменную. Вот когда у вас задача сохранить какой-нибудь объем значений. Когда ваша задача все эти значения сложить в одну переменную, но при этом чтобы это было значение, которое можно будет удобно обработать, запустить цикл и пошагово каждое значение лежащее в одной переменной, как-то его проанализировать и изменить, вот для таких ситуаций, мы будем использовать массивы. Вот получается, что вот эта страница с кредитным калькулятором, она будет в себе содержать массив и когда пользователь нажмет на кнопочку посчитать кредит, то вместо того, чтобы инициализировать 12 попеременных, мы просто заполним значениями один единственный массив. В нулевой элемент массива мы запишем значение, которое нужно заплатить за январь, в первый элемент массива – за февраль и так далее. То есть пошагово заполним весь массив. Что же такое массив в JavaScript. Массив – это именованный набор не строго типизированных переменных, расположенных в коде непосредственно друг за другом и доступ, к этим значениям расположенных в памяти осуществляется посредством индекса. Если посмотреть на слайд, мы определяем переменную с именем array. Во всех предыдущих примерах, когда мы создавали переменную, то переменной присваивалось одно единственное значение. А в этом примере вы видите, что значение присваиваемая переменной взято в квадратные скобочки и каждое значение перечислено через запятую. Вот когда вы видите квадратные скобки, это означает, что вы определяете массив. Мы сейчас создаем массив, в котором находится раз, два, три, четыре, пять значений. То есть в одной переменной одновременно будет хранится пять разных значений. Почему в определении написано нестрого типизированных переменных. Потому что в одном массиве может одновременно хранится строковые, целочисленные, логические значения, любой тип данных может хранится в одном массиве. В большинстве языках программирования создавая массив мы можем в этом массив записать только значения одного и того же типа. Создать массив строк, массив целочисленных значений, массив логических значений, но так как JavaScript это динамический язык программирования, то массив может содержать одновременно много различных типов. По сути в памяти массив можно представить, как набор ячеек, каждое значения, которое задано в массив через запятую, будет записано в отдельную ячейку. В одной ячейке будет находится текст, в другой ячейке – два, три, четыре. Потом alex, потом true, четыре, три, пять. И каждый элемент, вот это одна ячейка массива называется элементом массива. Для того чтобы получить доступ к этому элементу массива, нам нужно использовать его порядковый номер или индекс. В большинстве языках программирования, индексация массива начинается с нуля. То есть, чтобы получить доступ к этому элементу, нам нужно будет обратится по нулевому индексу, чтобы получить доступ к последнему элементу, нам нужно будет обратится по четвертому индексу. Чем больше будет значений в массиве, тем больше индексов в нас будет в массиве. Но в итоге, все вот эти значения, которые вы сейчас видите на слайде, все это является одни единым массивом, массивом с именем array. Давайте сейчас посмотрим несколько примеров и посмотрим, как в коде выглядит работа с массивами. В первых примерах мы рассмотрим разные варианты создания массивов, разный синтаксис того как можно определить массив, заполнить его значениями, или создать пустой массив. На 18 строке создается переменной с именем «а», и в эту переменную в квадратных скобочках записывается несколько цифр от 1 до 6. Вот мы сейчас создаем массив, массив с именем «а», и инициализируем этот массив пятью значениями. Массив, который сейчас получился, состоит из 5 элементов. Первый элемент, нулевой по индексу будет единицей, последний – шестеркой. Пусть вас не путает шестерка, потому что здесь видите четыре, шесть, то есть пятерка пропущена. И на 20 строке мы вызывая document.write, значение массива «а» отображаем в тело документа. Когда мы массив с помощью метода write, отображаем в документ, этот массив выводится через запятую, как строковая переменная, через запятую, поэтому в итого не экране мы увидим, один запятая, два, три, четыре, шесть. Каждый элемент будет выведен в соответствии со своей позиции. Другой вариант создания массива, 23 строчка, создаем переменную «b» и заполняем эту переменную значениями с именами месяцев года: September, October, November и так далее. А потом на строке 28 мы выводим значение массива «b» в тело документа. Давайте посмотрим на первую часть вывода. Вот что у нас вывелось вначале, один, два, три, четыре, шесть и то что вывелось вторым методом September, October все месяца, которые лежали в массиве. Если мы создаем массив используя вот такой вот синтаксис, через запятую, один, два, три, три запятые. Это означает, что мы создаем массив на три элемента. Но при этом каждый элемента массива будет пустым значением, то есть массив состоит из трех значений. Когда мы такой массив будем выводить в документ, вот мы его отображаем на 34 строчке, то в итоге мы будем видеть просто две пустые запятые. То есть первое значение, запятая, второе значение, запятая, и третье значение. Ну, как бы видите, массив пустой. Ну и особенность языка JavaScript, создавая массив, мы можем заполнить его разнотипными значениями. На 37 строке массив содержит в себе текст «Hello», потом целочисленное значение, потом логическое значение и все эти три значения без проблем умещаются в одном массиве. Далее мы на 41 строке вызывая document.write выводим этот массив. Все значения, которые лежат в массиве по сути преобразовываются в троку, и отображаются через запятую пользователю. Вот мы видим, «Hello, 3, 4, true». Все вывелось в виде текста на экран.

Следующий способ создания массива использования конструктора. С понятием конструктора мы будем знакомится с вами немножко позже, мы будем учится создавать свои собственные конструкторы, но массивы мы обязательно должны посмотреть, способ создания массивов через конструкторы, поэтому мы немножко забегаем вперед, разбирая такой термин как конструктор. Когда вы встречаете в JavaScript коде названия с большой буквы, всякие вот функции с большой буквы, то скорее всего это являются конструкторы, специальными функциями, создающими объекты, создающие настроены сущности, имеющие какие-то поведение, имеющие набор свойств определенных. Вот сейчас на 19 строке, вызывая array, круглые скобочки, без параметров, мы создаем, в переменную «а» задаем просто пустой массив. Можно было бы по-другому сделать запись этой строки, написать просто квадратные скобочки, этот тоже было бы пустым массивом, в котором ничего нет. Другой способ создания массива через конструктор – это вызов конструкции array, и передача в эту функцию через запятую несколько значений. Каждое значение будет в итоге превращено в отдельный элемент массива. По сути вот 20 строчка, запись array эквивалентна вот такой записи, когда значения будут просто взяты в квадратные скобочки.

Третий вариант использования функции array, это использование функции только с одним параметром. Указывая одно значение, мы говорим, что хотим создать массив состоящий из десяти элементов. Использовать функцию-конструктор array, ну, можно сказать не желательно. Многие разработчики не рекомендуют использовать этот подход. Почему не рекомендуют? Потому что если вы не указываете параметров – массив пустой. Если параметров больше одного – это означает, что вы создаете элементы массива. Если параметр один, это размерность массива. Получается использование функции array не очень очевидно. Вы можете просто случайно потом редактируя свой код подумать, а сейчас я попробую создать массив на один элемент, вы удалили, допустим как-бы лишние параметры, решили создать, чтобы массив содержал только в себе значения десять, например, только одно значение. Но в итоге, когда вы свой код запускаете, оказывается, что у вас появляется пустой массив на десять элементов. Получается, что использование функции array, оно может потом привести к таким нежелательным последствиям, поэтому рекомендуют использовать квадратные скобочки для того, чтобы определять массивы. Вот первые два примера показали нам как создать массивы, мы увидели, что создав массив, мы создаем набор значений, лежащих в одной переменной. Теперь появляется вопрос. Как можно извлечь значения, которое мы записали в массив. В третьем примере мы посмотрим, как это делать. На 15 строке создается массив с помощью функции Конструктор array. Мы уже с вами знаем, что если передать только одно значение, это означает, что массив будет состоять из пяти пустых элементов. Элементы пустые, но скорее всего нас это не устраивает, для того чтобы работать со значениями какими-то, нам нужно чтобы они были не пустыми, а чем-то инициализированы. Поэтому этот массив мы начинаем заполнять данными. В JavaScript, как и в других языках программирования, для того, чтобы обратится к массиву, нужно использовать специальную конструкцию, которая называется индексатором. Нам нужно в квадратных скобочках после имени массива, указать порядковый номер элемента, который мы хотим прочитать или изменить. На 17 строке мы обращаемся к массиву с именем arr, который создан выше и указываем в квадратных скобочках значение ноль. Это означает, что мы сейчас хотим в нулевой элемент массива записать значение два. На 18 строке мы говорим, что обращаемся к первому элементу массива, и записываем туда значение 5. Потом во второй 12, 8 и 23. Получается, что массив, который изначально был пустой, в котором ничего не было, после выполнение всех этих пяти строчек кода, он будет заполнен данными. И на строке 23 мы проверим, действительно ли у нас данные в массиве появились, мы выведем переменную arr на экран и если данные в массиве есть, то через запятую мы будем видеть все цифры, которые были внесены в массив. Вот, чтобы вам всем было понятнее, давайте мы сейчас попробуем нарисовать. Вот на строке 14, когда мы написали arr[5], у нас по сути просто появилось 5 ячеек, пустых ячеек, в которых ничего не было. Далее, когда мы выполнили 17 строчку, мы сказали, что в ячейке, вот это нулевой индекс, это первый, второй, третий, четвертый. Выполнив 17 строчку, мы сказали, что вот сюда нам необходимо поместить значение два. Дальше, когда сработала 18 строка, в ячейку с индексом 1, нам нужно записать значение 5. На 19 строке, во второй элемент массива мы записываем 12, потом в третий элемент массива мы записываем 8, а на 21 строке, последний элемент 23. И вот изначально массив был пустым, после выполнения этого кода массив стал заполненным данными. Потом мы можем эти данные с массива начать извлекать или изменять их. Сейчас мы подойдем и посмотрим, как это будет выглядеть. Вот, например, сейчас на 25 строке пишем array, по четвертому индексу – 4. Получается, что по четвертому индексу вот здесь это значение у нас удаляется и вместо его записывается значение, которое вот здесь прописали. На строке 26 мы указываем, что мы хотим по десятому элементу записать значение 10. В большинстве языков программирования, это бы привело к ошибке. Что происходит в JavaScript коде, когда вы обращаетесь к несуществующему элементу массива. Видите, у нас максимальный индекс сейчас 4, десятого индекса у нас нету. Но если мы делаем такое обращение, то JavaScript интерпретатор просто увеличивает массив, добавляет элемент, шестой, седьмой, восьмой, девятый и десятый. Эти элементы остаются пустыми, в них ничего нету, то есть по сути на эти элементы даже не выделяется память, эти элементы со значениями undefined. Помните, в предыдущем уроке, на первом уроке, мы с вами смотрели вот такое значение, по сути этих элементов у нас нет в массиве, есть просто десятый элемент, в котором находится значение 10, вот здесь будет хранится строка. Ну и чтобы проверить, на строке 30 мы выводим еще раз массив, мы увидим, что четвертый элемент изменился, потом у нас будут пустые элементы идти, а потом в конце будет находится значение 10. Давайте запустим сейчас и проверим. Вот видите, содержимое массива вот у нас есть, изначальное содержимое, которое вот здесь у нас было, а потом, когда мы произвели изменение, добавили 4 и 10 элемент, вот что у нас получилось. Вывелись пустые элементы, которые находятся между четвертым и десятым индексом, ну и мы видим, что поменялись значения отдельные. Если вы захотите отобразить данные из массива, например, вытащить только одно значение, допустим только по второму индексу, вы хотите увидеть информацию. Вы можете обратится к массиву и просто указать в квадратных скобочках [2]. Вот такое обращение указывает, что вас интересует только второй элемент массива. Если мы сейчас запустим такой код, то мы увидим в содержимом массива значение 12. Вот содержимое массива по второму индексу, по сути. В следующем примере мы увидим свойства, которые есть в любом массиве, это свойства lenght. С его помощью мы можем узнать какое количество элементов сейчас находится в массиве. Это очень важное свойство, потому что дальше, когда мы дойдем до использования всех элементов массива, мы будем запускать циклы, для того чтобы знать на какое количество итераций цикл нужно запустить, мы будем применять свойства lenght. На 15 строке определяется массив, в котором находится 5 букв, g, i, и так далее. А потом на 17 строке вначале мы выводим само значение массива, вот между квадратными скобочками, делая конкатенацию, а потом выводим массив, array. lenght. lenght это свойство объекта массива. И вот свойство lenght сейчас будет хранить значение 5. По сути количество элементов, которое находится в массиве. Мы видим, что длина массива равна 5.

В следующем примере, мы увидим, что свойство lenght в JavaScript коде может быть изменено. У большинстве языках программирования, создавая массив мы делаем массив фиксированным. Если мы сказали, что массив будет состоять из пяти элементов, то этот массив будет состоять только из пяти элементов. Увеличить или уменьшить количество элементов просто так у нас не получится. Если мы хотим сделать так, чтобы массив был больших размеров, нам нужно создать новый массив, на больше количество элементов, и с старого массива скопировать данные. Но в JavaScript все на много проще. Если вам нужно сделать, чтобы массив стал больше, вы можете просто поменять значение свойства lenght и тогда массив просто расширится. На строке 16 создается массив изначально на 5 элементов и если прочитать значения свойства lenght и переменной array, мы увидим значение пять. Но на 18 строке мы указываем, что теперь lenght имеет новое значение, lenght теперь равен 7. Получается, что сейчас вот в этом массиве появляется два дополнительных значения, в конце появляются две пустые ячейки, в которые мы можем записать информацию. И так же мы сейчас с вами видим в чем преимущество массивов перед обычными переменными. Если мы создадим 5 простых переменных, в которые будет записаны те же самые значения, мы не сможем эти 5 простых переменных обработать в цикле. Нам для того, чтобы поменять значения переменных, вывести на экран, нам нужно постоянно работать с каждой переменной по отдельности. А имея массив, мы можем сделать вот такую конструкцию. Мы можем запустить цикл, в кортом будет счетчик, начинаю со значения ноль, и счетчик у нас будет работать до значения меньше длины массива, то есть от нуля до длины массива, счетчик «i» будет постоянно увеличивается на единицу на каждой итерации. На первой итерации счетчик «i» будет равный нулю. Получается, что на 21 строке мы обратимся к массиву и по нулевому индексу отобразим информацию, лежащую в массиве. По нулевому индексу у нас находится значение age. Когда мы выведем значение age на экран, в тело документа. Мы перейдем к следующей итерации массива. Помните с предыдущего урока, что в начале у нас произойдет операция, заложенная в цикле, то есть мы увеличим «i» на единицу. Со значение 0 «i» поменяется на 1, теперь мы проверим, если единица не превышает размеры массива, то тогда мы возьмем и выведем первый элемент массива, на следующей итерации мы выведем второй элемент массива, 3, 4, ну а до 5 мы не дойдем, потому что если у нас переменная «i» будет равна 5, а длина массива у нас тоже 5, то 5 элемент по 5 индексу мы не выводим. А это в принципе нормально, потому что у нас всего лишь элементов, как бы если у нас 5 элементов, то индекс последнего будет равно 4. Но в случае с этим примером, у нас длина массива была изменена. И у нас сейчас не 5 элементов, а по сути 7 элементов. Вот получается, что у нас произойдет еще две итерации, которые выведут те пустые значения, которые находятся в этом массиве. Если мы сейчас запустим пример, то вот мы видим, что массив у нас сработал, первые 5 элементов вывелись, а последние два элемента, которые появились из-за изменения свойства lenght. Вот последние два элемента – это udefined. Кроме того, что мы можем увеличивать значение массива, мы так же можем массив уменьшать. Для этого нам нужно использовать свойство lenght. На 27 строке, обращаясь к lenght и присваивая этому свойству значение 2, мы по сути отрезаем все лишние значения и оставляем только два первых, то есть нулевой и первый элементы, так чтобы размер массива был равен двум. Получается, что дальше мы запускаем такой же цикл, как на 20 строке, но этот цикл уже выводит только два элемента, потому что длина массива стала равная двум.

В следующем примере мы посмотрим, как можно менять значение элементов. На 14 строке создается массив и заполняется тремя значениями. На строке 15, когда мы выведем размерность массива, обратимся к свойству lenght, мы увидим значение три. На строке 18 мы обращаемся к массиву по индексу 10 и записываем туда три семерки. Мы видим, что массив у нас на три элемента, последний индекс у нас равен двум, ноль, один, два. Десятого индекса у нас явно нету. Получается, что сейчас из-за обращение на 18 строке массив у нас расширится, добавится у нас еще одна ячейка, по 10 индексу и в эту ячейку запишется значение три 7. Если мы обращаемся к свойству lenght, по сути свойство lenght – оно у нас будет выводить информацию, что элементов сейчас у нас в массиве 10. Даже на самом деле не 10, а 11. Потому что если мы обращаемся к 10 элементу, к 10 индексу, так как у нас отчет идет с нуля, у нас выводится, что всего элементов у нас 11. Получается, нужно сказать, что свойство lenght возвращает нам значение, которое на единицу больше чем последний индекс массива. Последний индекс массива 10, соответственно длина массива 11. Вот вы видите, что у нас сейчас находится в массиве. Мы отобразили все значение, лежащие в массиве, видим, что первые три у нас существуют, потом у нас идут значение undefined, и потом идет значение три семерки, которое находится по 10 индексу. Если посчитать все элементы, то мы увидим, что их 11. То есть длина массива 11.

В следующем примере мы увидим, что такое ассоциативные массивы. В JavaSctipt коде можно создавать как массивы, так и объекты. Сейчас на строке 15 мы создаем с вами объект. Что такое объект? Объект – это набор значений, у каждого значения есть свое имя. Что такое массив? Можно сказать, что массив – это набор значений, у каждого значения есть порядковый номер. Вот допустим, если взять наши предыдущие примеры, вот массив «b» это набор значений September, October, November, December и так далее, и у каждого значения есть просто номер: 0, 1, 2, 3 и 4. Это массив. Что такое объект? Объект – это тоже переменная, в которой находится сущность, состоящая из нескольких значений, но вместо порядковых номеров, у этих значений присутствуют номера. С объектами мы с вами будем еще работать. У нас есть последний урок в этом курсе, который посвящен объектам, мы будем разбирать все особенности работы с объектами в JavaSctipt коде. Ну а сейчас очень простой пример создания объекта. Мы создаем объект laptop. Ну представьте, что задача JavaSctipt кода нашего, работать с информацией о ноутбуках. Выводится какая-то реклама ноутбука на сайте интернет-магазина. И объект laptop состоит из трех значений: Core i7, 4 GB, 15. Core i7 – это CPU, то есть процессор объекта laptop, RAM – это оперативная память, 4 гигабайта, это тоже является значением, лежащим в laptop, и screen, то есть диагональ экрана 15 дюймов, это тоже значение, лежащее в laptop. Вот все эти значения, которые заложены в объект, они у нас называются свойствами. Получается, что у laptop есть три свойства, CPU, RAM и screen. Когда мы создаем объекты в JavaSctipt коде, мы можем к этим объектам обращаться через синтаксис, обращения к массивам, но обращение при этом не по порядковому номеру, а по имени. Сейчас на строке 17 мы просим, чтобы пользователь ввел с клавиатуры одно из трех значений: CPU, RAM или screen. Это введенное значение попадет в переменную key. Вот представьте, что в этой переменной будет находится значение RAM. Что произойдет дальше? На строке 21 возьмем объект laptop, который выше находится, в laptop у нас есть три свойства, CPU, RAM и screen. И мы обратимся к свойству с именем RAM, если такое значение ввел пользователь, и вот это значение, 4 ГБ, оно у нас будет записано в переменную валю, которое на строке 22 мы отобразим в тело документа. Вот давайте сейчас попробуем, вот у нас выводится prompt, введите интересующий вас параметр. Вот мы вводим RAM, и из объекта извлекается значение 4 ГБ, вот выводится 4 ГБ. Если мы обновим страницу и введем значение screen, то должны увидеть значение 15. Получается, если мы работаем с объектами, то объекты у нас являются ассоциативными массивами. То есть массивом, в котором каждое свойство, каждое значение имеет какое-то имя, и мы обращаемся не оп индексу, а по имени. Чтобы было понятней, на 26-27 строке пример как мы обращаемся обычно к объектам. Мы пишем имя объекта и через оператор «.» обращаемся к отдельному значению, которое находится в объекте. Если мы хотим обратится к объекту, у нас так же существует второй вариант, обратится к объекту так, как будто он является массивом. Использовать имя объекта, а потом в квадратных скобках имя свойства, которое необходимо. И первый и второй варианты обращения к объекту, они у нас правильные. Оба варианта возвращают нам одно и то же самое значение. Core i7. Но второй вариант, он удобный в тех случаях, когда мы не знаем точно, какое свойство из объектов нам необходимо получить. Вот как сейчас на 18 строке. Мы не можем знать точно, что пользователь возьмет. RAM, CPU, или screen. Если мы не будем иметь возможности обратится к объекту вот по такому, таким способом, то в таком случае нам нужно после строки 18 написать условие и проверить. Если key равно CPU, то тогда обратится к laptop.CPU. Если key равен RAM, обратится к laptop.RAM. Вместо того, чтобы делать условия и обращаться вот по такому синтаксису, можем просто строковое значение, полученное от пользователя поместить в индекс и обратится по какому-то конкретному индексу. На последнем уроке этого курса мы еще с вами вернемся к этой теме, мы увидим с вами работу с объектами. Вот просто JavaSctipt это такой язык программирования, в кортом и объекты, и массивы – это по сути одно и тоже. Для браузера, для интерпретатора, объекты и массив – это практически одинаковый тип данных, но для нас, как для разработчика, объекты и массива немного отличаются. У нас различный синтаксис создания объектов, различный синтаксис обращения к объектам и к самим массивам. Но в итоге есть очень много общего. Вот мы видим, что к объекту можно обратится так же, как и к массиву, обратится через индекс.

Последний пример из папки основы работы с массивом, мы в этом примере разберем такое понятие как многомерный массив. Мы сейчас делаем массив, который состоит внутри из массивом. По сути мы сейчас свами создаем матрицу. 10х10 элементов. И эта матрица у нас потом отображается в документе. Представьте, что вы создаете игру шахматы, или, ну, шахматы не подойдут к этому примеру, потому что шахматы у нас не 10х10, но представьте, что вы создаете другую игру подобную шахматам. И вот посмотрите, как отображается сейчас страница. У нас рисуется вот такое поле, в котором каждая ячейка – это отдельная картинка, вот такая рисуется, не знаю, что это у на будет, ковер такой нарисованный, с помощью маленьких тайлов. Вот здесь если посмотреть в примере нашем, есть папка images, и в папке images есть три картинки. Паркет 1, 2 и 3. Вот если навести в Visual Studio, Visual Studio показывает превью картинки. Темный квадратик, более светлый квадратик и квадратик вообще з другим узором. И вот мы сейчас посмотрим, как мы создаем многомерный массив, забиваем этот массив картинками, а потом этот массив превращаем в отображаемую пользователю страницу. Значит, чтобы создать многомерный массив, по сути у нас сейчас массив будет вот что-то на подобие вот этого, у нас будет как бы первый уровень массива, я нарисую массив 3х3. Потом второй уровень массива, потом третий уровень массива. Вот как нам можно создать вот такой вот массив и забить его изображениями. Что для этого нужно сделать? В JavaScript есть только один способ создать такой массив. Это вначале создать массив на 10 элементов, вот по сути мы сейчас делаем массив, первый элемент, потом второй элемент, третий и так далее. А потом, строка 18, мы запускаем цикл, который будет перебирать все элементы, находящиеся в массиве table, то есть перебирать каждый элемент по отдельности. И видите, что мы в цикле делаем, мы указываем, что i-тый элемент массива table, должен быть новым массивом на 10 элементов. То есть получается вот здесь, внутри, если посмотреть, там будет находится тоже массив из 10 элементов. Следующая ячейка массива, тоже будет 10 элементов. Следующая ячейка – 10 элементов. И так у нас будет получается массив из 10 ячеек, в каждой ячейке будет находится по 10 элементов. Вот это и есть многоуровневый, многомерный массив. Массив 10х10. Если мы хотим сделать трехмерный массив, то в каждую ячейку мы должны будем поместить еще какое-то количество элементов, то есть сделать так, чтобы был массив, в массиве хранились массивы, а в тех вложенных массивах хранились еще массивы. Но мы пока не будем это разбирать, такое достаточно редко встречается в JavaScript коде, мы разберем только такой вот двумерный массив. То есть в итоге, данные строчки кода создают пустой массив 10х10. И теперь этот массив мы хотим заполнить изображениями, мы хотим сделать так, чтобы изображения чередовались. Сначала одна картинка, потом вторая, одна – вторая, то есть, чтобы они были последовательно внесены. Для того, чтобы сейчас обойти весь массив на 10 элементов, мы запускаем два цикла. Первый цикл на 23 строке, он у нас использует счетчик row, то есть он будет считать строки, row с английского в переводе – строка. И будет использовать в качестве условия row < table.lenght. То есть вначале, первый цикл будет обходить элементы вот этого массива, то есть будет считать именно строчки. А второй цикл, вложенный, будет менять счетчик с именем col, и этот счетчик у нас будет пользоваться условием col < table[row].lenght. То есть table[row] – это один из элементов массива table. Мы знаем, что в каждом элементе table находится вложенный массив на 10 элементов. Вот получается, что мы сейчас получаем доступ к воженному в table массиву и спрашиваем его длину, узнаем, что длина вложенного массива в нашем случае всегда будет равна 10. Вот первый цикл будет перебирать строки, 1 строку, 2 строку, 3 строку. А вложенный цикл будет перебирать находящиеся вот в одной ячейке элементы вложенного массива, то есть по сути будет перебирать колонки. И на строчке 25, для того, чтобы раскрасить массив, заполнить массив разными картинками, чередовать их, мы используем вот такое выражение. Мы берем счетчик row + счетчик col. Получаем их сумму и получаем остаток деления на 2. По сути, если у нас сейчас рисуется нечетная ячейка, то в эту ячейку мы помещаем картинку parquet1. Если у нас рисуется четная ячейка, то в нее мы помещаем parquet2. Для того, чтобы обратится к многомерному массиву, нам нужно указать имя массива, потом, как в морском бое, указать клеточку, в которую мы хотим поместить значение указываем вначале строчку массива, а потом указываем колонку массива. Вот допустим нулевая строчка – колонка один, нулевая строчка – колонка два, нулевая строчка – колонка три. И в каждую ячейку многомерного массива мы будем помещать какое-то конкретное значение. Этот первый цикл, с вложенным циклом, он заполняет массив данными. Потом строка 32, мы хотим отдельную ячейку массива изменить, мы говорим, что table, 8 строка, первая ячейка – это картинка parquet3. Давайте проверим. Вот изначально каждая ячейка – первый паркет – второй паркет, а вот восьмая строчка, первая ячейка, это у нас специальная картинка parquet3. Мы можем поменять отдельную, произвольную ячейку, которая нам будет необходима. Вот мы поменяли эту предпоследнюю ячейку. Для того, чтобы вообще весь этот массив нарисовался у нас, мы делаем вот еще один цикл на 34 строчке. Точно такой же, цикл вложенный в другой цикл, два цикла у нас есть, но на строке 36 вместо того, чтобы что-то изменять в элементах массива, мы просто делаем document.write(table[row][col]). То есть выводим 1 ячейку, 2, 3, 4 и так далее. Но когда мы выводим все элементы из первого элемента массива table, когда этот цикл у нас полностью, до конца отрабатывает, мы делаем перенос на новую строку. Вот этот брр, который на 38 строке нарисованный, он вот здесь по сути находится, мы сделали перенос на новую строку и сделали следующею строчку из массива table и так вот последовательно все отобразили. Ну и так же мы можем просто отдельно получить доступ к элементу массива, за горизонтальной линией отображается еще одна картинка. Вот эту картинку мы отображаем на 41 строке. Обращаясь к массиву table по 8 строке первой колонки, мы получаем элемент, который в итоге на 42 строчки отображаем в тело документа, после горизонтальной линии. Вот этот элемент выводится. Если мы хоти получить доступ к вот этому элементу, левому верхнему, нам нужно определить нулевой индекс, нулевая строчка, нулевая колонка. Давайте попробуем сделать ноль, ноль. Сохранили. Обновили. Вот видите картинка, которая находится вот здесь. Если нам нужно получить доступ к вот этой картинке, то это у нас строка последняя, то есть это 9 строчка в массиве, 10 мы не можем использовать, потому что массив у нас всего на 10 элементов. И если мы хотим обратится к последней ячейки, то это получается колонка с восьмым индексом. Давайте проверим, устанавливаем здесь 9, последняя строчка и предпоследняя колонка 8. Обновляем, получается вот здесь мы сейчас получили доступ к вот этой вот ячейки массива. Вот представьте, что вам нужно сделать игру крестики-нолики, вот с помощью многомерного массива вы будете хранить информацию о том, куда были поставлены крестики, куда были поставлены нолики. Первая часть урока, которая посвящена определению массива, работе с массивом, у нас закончена. Теперь мы перейдем к второй части и разберем несколько стандартных функций, которые вы должны обязательно знать для того, чтобы легко писать сложные выражения работы с массивами.

Теперь мы разберем несколько полезных функций, которые позволяют выполнять различные операции над значениями, заложенными в массив. На 14 строке, в этом первом примере создается массив и заполняется именами месяцев. На строке 16 мы выводим значение массива в документ, и мы видим, что первый раз, когда массив отобразился, значения у нас отобразились через запятую, каждый элемент из массива. Получается, что если мы просто отображаем массив в документе, каждый элемент массива выводится как текст, разделенный запятой. Но если мы хотим поменять это поведение, если мы хотим поменять то, как массив выводится на экран, мы можем использовать функцию join или правильно сказать метод join, который является частью массива. На строке 20 создается переменная res, и в эту переменную записывается значение, которое возвращается методом join. Мы вызываем на array метод join и передаем значение « | ». Получается, что между всеми элементами массива будет находится вот такой символ. Ну и это мы видим в результате, когда переменную рез мы отображаем на 21 строке. Вот как у нас вводится результат «September | October | …» и так далее до самого последнего элемента. В конце уже этот вертикальный слеш не ставится. Другой вариант, строка 25. Мы используем метод join. Передаем его параметр br, то есть перенос на новую строчку, break, и переменная res теперь содержит в себе September, перенос, October, перенос. Вы увидите, как результат выводится на экран, мы просто вывели переменную res, а получили набор значений, каждый из которых на отдельной строке. Другой способ использования функции join может заключатся в создании интересных упрощений для генерации HTML кода. Вот сейчас у нас есть тот же массив с названиями месяцев. На 15 строке мы говорим, что в документ добавляем UL LI. По сути мы сейчас в комментариях напишем, мы создаем элемент UL, в этот элемент добавляем listItem и закрываем listItem. Далее на 17 строке мы создаем переменную res, которая в итоге будет выведена после этого текста и в эту переменную res записываем значение из массива с вызовом метода join, каждое значение массива должно быть отделено закрывающим тегом LI и открывающим тегом LI. Первое значение это September, сразу же выведется у нас после LI. Потом у нас внесется вот такое изменение, мы добавим LI и открывающий ЛИ. Потом следующий элемент из массива, и опять мы добавим закрывающие и открывающие теги. И так до самого конца. Но когда мы будем выводить последний элемент, когда отобразится у нас август, то уже join не срабатывает, он не добавляет эти элементы для последнего элемента из массива. Текст ЛИ и открывающий ЛИ уже не сработают. Поэтому на 20 строке, после вывода всего содержимого массива, мы добавим еще вот такую вот комбинацию для того, чтобы закрыть последний открытий ListItem, и закрыть UL, который был создан в самом начале. И вот получается с помощью этого join создадим обычный маркированный список, в котором будут находится все месяцы. Вот результат, который отобразился в документе.

Следующий метод, который присутствует в массивах – это метод concat. С его помощью мы можем добавить новые элементы в массив или склеить два массива. На строке 13 мы указываем, что изначально в переменной «а» находится массив с тремя элементами. На строке 15 мы указываем, вот такую конструкцию выполняем, выполняем такую операцию: берем массив, вызываем на нем метод concat, и в качестве параметра, передаем в метод два значения 4 и 5. Вот операция concat означает, что к элементам этого массива мы добавляем два этих значения и создаем новый массив, который записываем в переменную «а». Вот этот новый массив с 5 элементами, он у нас отображается на 16 строке, то есть мы увидим 1, 2, 3, 4, 5. Также метод concat может использоваться для того чтобы добавлять не просто по отдельности элементы, а добавлять целые массивы, или вот такие комбинированные значения. Вызывая concat на 19 строке, мы передаем отдельно элемента 6, отдельно элемент 7, и еще один массив состоящий из двух элементов, 8 и 9. И задача метода concat взять по отдельности каждое значение, которое лежит в параметрах, лежит в массивах, которые переданы через параметры, эти значения добавить элементы, которые уже существуют в массиве и на основе полученных значений, создать второй массив, который и будет возвращен функцией concat. То есть, получается, сама функция concat она не меняет массив, она просто берет то что есть в массиве, добавляет эти значения и создает второй массив. Но в нашем случае массив «а» меняется, потому что изменения, которые сделал метод concat, они у нас записываются в переменную «а», в ту же переменную, в которую мы изначально вызвали concat. Эта измененная переменная отображается в нас на 20 строке. В комментариях написано то, что будет выведено. Даже вот этот вложенный массив, он просто станет отдельными элементами массива 8 и 9. Вот мы видим результат.

Четвертый пример показывает применение concat функции. На 13 строке создается массив на три элемента, а на 15 строке мы просим пользователя ввести новый элемент для массива. Пользователь вносит какие-то данные, мы эти данные записываем в переменную input, а далее запускаем цикл while, в котором будем работать до тех пор, пока переменная не равна null. Если изначально пользователь нажмет на cancel или крестик, тогда в переменную input запишется null и соответственно этот цикл не будет срабатывать, но если первое значение было внесено, тогда на 18 строке мы в переменную «а», в массив запишем массив, к котором добавлена значение input. По сути 1.2, 3 увеличенный на один элемент, который внес пользователь и вот массив мы изменили, далее спросили у пользователя еще раз не хочет ли он внести новое значение. Если пользователь внесет новое значение, то тогда цикл продолжит свою работу, вот этот цикл будет крутится и увеличивать работу, добавлять новые элементы массива до тех пор, пока пользователь не нажмет cancel или не делает нажатие по крестику. В итоге, когда все это закончится, мы выведем массив, с помощью join мы каждые элемент массива выведем на отдельной строке в документе. Давайте проверим как это будет работать. Видите, новый элемент массива, вот мы добавляем элемент 8, добавляем элемент 9, и нажимаем cancel и вот видите, что в результате получился массив 1, 2, 3, 8, 9. То есть мы действительно динамически добавили в массив новые значения, новые элементы.

Следующая функция позволяет поменять местами каждый элемент, который находится в массиве. На 13 строке, массив создается со значениями 1, 2, 3, 4, 5, а на 15 строке мы на массиве вызываем метод реверс и этот метод меняет позицию каждого элемента в массиве «а». То есть в итоге после 15 строке в массиве «а» будет находится значение 7, 6, 5, 4, 3, 2, 1. И вот эти изменения мы отобразим в документе. Массив вывелся в обратную сторону.

Следующий пример показывает использование метода slice. Метод slice в переводе как «нарезать кусочками». С помощью метода слайс мы можем взять массив и вырезать из массива маленький кусочек, используя индексы элементов массива. На 16 строке мы создаем переменную темп, в эту переменную мы записываем «а» slice 0,3. В метод слайс нам нужно передать один или два параметра. Изначально массив, вот как он представлен этот массив, из 7 элементов. Мы сейчас указываем, что начальный индекс с которого мы начинаем вырезать – это ноль. А последний индекс, до которого мы собираемся вырезать, это три. Получается, мы вырезаем нулевой, первый, второй, а на третьем останавливаемся. Вот методом слайс мы сейчас из массива извлекаем первые три значения. Эти первые три значения записываем в переменную temp, которую потом выводим. То есть тут будет 1, 2, 3. Давайте проверим. Вот наш первый вывод 1, 2, 3. Следующий вариант использования слайс – это использование слайс с одним параметром. Если мы указываем только одно значение, то это означает, что начальный индекс, с которого мы начнем вырезать элементы до конца массива. В нашем случае, если взять третий индекс, то вот 0, 1, 2, 3. Вот этот элемент – это третий индекс. Вот с третьего индекса и по последний элемент в массиве мы произведем выборку, эту выборку запишем в переменную temp, потом переменную темп отобразим. Вот действительно мы видим, что у нас вывелось 4, 5, 6, 7. Другой вариант использования метода слайс – это передача двух параметров и первые два параметра – это значение, которое будет указывать индекс слева, а второй параметр, если это отрицательное значение – он будет указывать индекс справа. Вот получается сейчас мы хотим взять первый индекс слева, то есть вот 0, 1, двойку взять. Первый индекс справа, то есть 0, 1, шестерку взять. И вот все, что находится между 2 и 6 то есть все эти элементы мы хотим извлечь из массива, вырезать их и поместить в новый массив, в переменную темп. Вот получается, что в переменной темп при выполнении передачи таких параметров, требует содержать 2, 3, 4, 5, 6. Если мы здесь напишем -2, это означает 0, 1, то есть мы будем брать 5 элемент и будет происходить извлечение вот этих 4 значений. Если мы сейчас сохраним и обновим страницу, видите, 2, 3, 4, 5. Теперь небольшой пример использования метода слайс. На 13 строке создается массива arr, заполняется месяцами, на 15 строке мы выводим все месяца через запятую в тело документа. А на 17 строке создается переменная from, после которой создается переменная do. Мы хотим вывести все месяца, летние месяца, то есть Июнь, Июль, Август. Но так как у нас первый индекс не включается, то мы указываем, вот, Июнь – это шестой месяц по счету, мы указываем from 5, то есть, чтобы у нас 5 элемент, 0, 1, 2, 3, 4. Вот 5 элемента, Май, чтобы начиная с этого элемента, мы начинали вырезать June, Jully, August. Вот с 5 по 8, вырезали этих три элемента и на основе этих элементов, получили новый массив. Вот на 20 строке создается переменная res и в этой переменной будет находится вырезка из массива arr, с этого значения по это значение, получается вот тут будет находится June, Jull, August. Вот строка 22, выводим res на экран и видим, что изначальный массив, а потом массив, который произошел после вызова метода slice. Следующий метод, метод slice. Это универсальный элемент для вставки и удаления элементов из массива. Вначале мы разберем как использовать метод slice для удаления элементов. Исходный массив состоит из 7 элементов. Создали массив, проинициализировали его, и вывели элементы массива в документ. Теперь на 24 строке создается переменная «d», в которое записывается значение, возвращаемое методом slice. На массива «а» мы вызываем метод slice, и передаем начальный индекс, с которого будет происходить удаление, и количество элементов, которое мы хотим удалить. То есть с первого индекса мы удаляем три элемента. Первый индекс, это 0, 1, то есть двойка находится по первому индексу. Удаляем три элемента, то есть удаляем второй, третий, четвертый. Вот получается, что метод slice, он в массива «а» удаляет элементы, которые сейчас выделены, эти удаленные элементы записывает в переменную «d». И меняем переменную «a» и одновременно инициализирует переменную «d». Вот здесь сейчас на строке 25 в переменной «d» будет находится 2, 3, 4. А в переменной «a» будут находится значения 1, 5, 6, 7, то, что осталось после удаления. Вот исходный массив, удалены 2, 3, 4. А после удаление остались 1, 5, 6, 7. Но так же метод slice, это универсальный метод для вставки и удаления, мы сейчас выдели удаление. Теперь как происходит вставка в элемент в массив. На 31 строке мы на массиве «а» вызываем метод slice, и указываем, что мы хотим взять первый элемент, первый по индексу один взять, ничего мы не будем удалять, то есть количество удаляемых элементов ноль. То, что мы хотим вставить после удаленных элементов. Сейчас мы фактически никаких элементов не удаляем из массива. Мы хотим вставить значение 2, 3, 4. То есть в начале выполняется удаление, потом в первый индекс вставляется новое значение. Первый взяли, ноль удалили, вставили по первому индексу 2, 3, 4. В массиве «а» в итоге получается значение, которое было изначально. Вот мы взяли по индексу в удаленном массиве то, что у нас оставалось и на строке 31, в переменной «а» по сути находятся эти значения. МЫ сказали, что мы берем по первому индексу удаляем ноль элементов. Вот по первому индексу мы ничего не удалили. Потом мы указываем, что после удаленных элементов указывается 2, 3, 4. То есть вот после 1 вставляется 2, 3, 4 потом 5,6, 7. Если здесь мы напишем не ноль, а единичку, смотрите, что получится. Берем первый элемент, удаляем один элемент начиная с первого и вставляем 2, 3, 4. Вот смотрите, изначально то что было, 1, 5, 6, 7. Потом берем первый элемент и удаляем один элемент. То есть берем 5, удаляем 5. А потом вставляем значение 2, 3, 4. И в итоге получается 1, 2, 3, 4 ,6, 7. То есть без 5. Если сейчас мы вторым параметром поставим значение 2, это означает, что мы берем первый элемент, удаляем 5 и 6, а потом вместо удаленных 5 и 6 вставляем 2, 3,4. Давайте сейчас попробуем. Здесь устанавливаем 2, сохраняем этот документ, а потом обновляем и видим, что 5, 6 удалились, а в них подставились 2, 3,4. Вот в чем заключается работа метода slice. Либо указать индекс и сколько элементов удаляется и что помещается на место удаленных элементов. Вот сейчас мы пока вернем к изначальному варианту. Вот пример использования метода slice. На 13 строке создается массив students. Массив заполняется именами, на строке 15 с помощью функции prompt получается значение переменой prompt. Функцией prompt мы запрашиваем пользователя введите индекс человека, с которого начать выборку. А на 16 строке создается переменная count, в нее записываются значения тоже функции prompt. Но значение введите количество человек, то, откуда мы начинаем выборку и то, сколько человек мы выбираем. На 18 строке в переменную рез мы записываем students.splice(from, count). Получается, что из указанного индекса мы вырежем какое-то количество элементов, запишем их в res, а потом эту переменную отобразим на экран. Индекс начального, или человека из которого произойдет выборка, допустим второй, а количество элементов три. Вот Александр, Владислав и Елена.

С помощью следующего метода мы можем произвести сортировку элементов, находящихся в массиве. На 14 строке создается массив с целочисленными значениями. На строке 16 мы этот массив сортируем и получается, что сортируем элементы массива по срастанию. На 18 строке показываем результат. Видите, массивы от сортировались по возрастанию. Следующий массив на 23 строке мы создаем переменную «s», заполняем ее строковыми значениями, вызываем на массиве метод sort и сейчас тоже произойдет сортировка массива, но сортировка теперь у нас произойдет по алфавиту. На строке 26 мы увидим результат. И вот наш результат, по алфавиту все названия месяцев. Единственное, сортировок целочисленных значений по сути происходит тоже как сортировка строковых значений, потому что у нас значение 1, потом значение 1.1, потом 2, 4, 9, 99. Получается, что мы сейчас введем значение 111, это будет третий элемент массива. Поэтому можно сказать вначале произойдет сортирование текста, потом сортировка по алфавиту. Если вы хотите сделать сортировку самостоятельно, по своим каким-либо критериям, то вам нужно переделать в метод sort дополнительную функцию сортировки, но что такое функция мы выучим с вами на следующем уроке, поэтому детальней по сортировке массивов мы сможем с вами посмотреть после прохождения четвертого урока данного курса.

С помощью следующего метода, метода push, мы можем добавлять отдельно элементы в конец массива. На 14 строке создается массив с тремя месяцами, January, February, March. На строке 15 мы отображаем исходный массив, то есть все три месяца отображаем, а потом на 16 строчке показываем размерность массива. Здесь у нас сейчас находится значение три. Далее вводим горизонтальную линию и на 20 строчке с помощью вызова метода push, добавляем еще один элемент, элемент April, в конце массива. Получается, что после вызова 20 строки, массив у нас увеличится на 1 элемент, и в итоге будет с размерностью 4. На 20 строчке также метод push вернет нам новую длину массива, здесь будет находится значение 4. Вот мы выведем результат изменения, вот мы выведем массив новый и выведем новую разметку. То есть увидим, что значений было раньше три, стало четыре. И другой вариант использования элемента push, это в качестве параметра мы можем передать несколько значений, вот May, June, в таком случае у нас в конец массива будет добавляется два элемента ну и длина, которую мы здесь получим, она будет уже увеличена на 2. Если здесь у нас было 4, то после вызова метода push с двумя параметрами, мы увидим значение 6 ну и изменения отобразим в документе. Изначально массив на 3 элемента. Вызвали push на 20 строчке, добавили еще один элемент в конец массива, размерность массива увеличилась, метод push всегда возвращаем размер нового массива. Потом добавили еще два элемента с помощью push и двух параметров, вот эти два значения добавились в конце массива, которые мы меняли на предыдущем этапе и размер массива стал теперь равен 6.

Следующий метод, это метод pop, который работает по-другому. То есть является противоположным методу push. Если push добавляем элементы в конец массива, то метод pop забирает элементы с конца массива. На строке 14 исходный массив состоит из 6 элементов, мы отображаем эти элементы на экран, выводим размерность массива, то есть выведем значение 6. На 20 строке мы на массиве вызываем метод поп, и этот метод берет последний элемент, который есть в массиве, вырезает его, то есть массив становится меньше на один элемент. Значение, которое извлечено из массива, записывается в переменную, дальше мы отображаем измененный массив, мы указываем какой элемент мы удалили из массива, что мы извлекли и указываем размерность массива. Вот мы видим исходный массив на 6 элементов и длину массива 6, потом после поп у нас исчез месяц June, мы увидим, что мы именно June удалили и размер массива после вызова pop стал на единицу меньше. Вот, с помощью push добавили в конец, с помощью поп удалили с конца. С помощью метода push и pop мы можем организовать очередность работы массива, как бы в виде стека, то есть первый зашел, последний вышел, следовательно, вызываем метод push и pop.

Следующий метод, который доступен для изменения элементов массива – это метод shift. С его помощью мы можем удалять элемент из массива. Если метод pop удаляет последний элемент, то метод шифр удаляет первый элемент. Вот, исходный массив – это элементы 1,2, 3. Отображаем эти элементы, а потом вызываем метод shift и получаем результат. То есть вызывая шифр, мы удаляем начальный элемент из массива, 1 записывается в переменную value, вот мы указываем как массива выглядит после вызова shift и что именно метод shift мы вытащили из массива. То есть по сути метод shift сдвигает все элементы массива на 1 позицию. Вот что в итоге получается до изменений, после вызова shift, после сдвига и то, что методом shift мы получили. Мы получили 1.

Противоположный методу shift является метод unshift, с его помощью мы наоборот добавляем элементы вначале массива. Вот если, например, push добавляет в конец элемент, то unshift добавляем в начало элементы. И в начальный массив 1, 2, 3 на 18 строке вызываем unshift со значение 0. Получается, что мы в начало до 1 добавляем 0 и в итоге массив после вызова этого метода становится с размерностью 4, и элементами 0, 1, 2, 3. Если мы вызываем unshift и передаем несколько параметров, то это означает, что мы в начало массива добавляем вот эти элементы. Массив в итоге становится на 7 элементов длиннее, вначале -3, -2, -1, потом 0, 1, 2, 3. Вот как выглядят массивы после вызова unshift. Вот 0 добавили в начало, а вот потом добавили 3 элемента перед 0.

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

Студенты также смотрят
JavaScript Стартовый
ПОДРОБНЕЕ
JavaScript Шаблоны
ПОДРОБНЕЕ
JavaScript: Расширенные возможности
ПОДРОБНЕЕ
JavaScript Базовый
ПОДРОБНЕЕ

Покупай подпискус доступом ко всем курсам и сервисам

Библиотека современных IT знаний в удобном формате

Выбирай свой вариант подписки в зависимости от задач, стоящих перед тобой. Но если нужно пройти полное обучение с нуля до уровня специалиста, то лучше выбирать Базовый или Премиум. А для того чтобы изучить 2-3 новые технологии, или повторить знания, готовясь к собеседованию, подойдет Пакет Стартовый.

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 10 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
59.99 $
Оформить подписку
Премиум Plus
  • Все видеокурсы на 1 год
  • Тестирование по 24 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
  • Скачивание видео уроков
199.99 $
Оформить подписку
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 16 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
89.99 $
Оформить подписку
комментарии и обсуждения
Notification success