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

Массив – это тип данных, хранящий пронумерованные значения. Каждое пронумерованное значение называется элементом массива, а число, с которым связывается элемент, называется его индексом. Массивы JavaScript нетипизированы, это значит, что элемент массива может иметь любой тип, причем разные элементы одного массива могут иметь разные типы. Помимо этого массивы JavaScript являются динамическими, это значит, что объявлять фиксированный размер не нужно и можно добавить новые элементы в любое время.

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

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

Var empty = ; //пустой массив var numbers = ; //массив с 5 числовыми элементами var diff = ; //массив с 3 элементами различного типа

Значения не обязательно должны быть простыми (числа или строки) - это также могут быть и любые другие выражения, например: литералы объектов, другие массивы или функции.

Var num = 700; var tab = , num + 1];

Второй способ создания массива - вызов конструктора Array(). Вызвать конструктор Array() можно тремя способами.

  • Вызов конструктора без аргументов:
var b = new Array();

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

  • В конструкторе явно указываются значения n элементов массива:
var b = new Array(1, 3, 5, 8, "строка", true);

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

  • Выделение места для последующего присваивания значений. Это делается путем указания при определении массива одного числа в круглых скобках:
var b = new Array(5);

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

Чтение, запись и добавление элементов массива

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

Var numbers = ; document.write(numbers + ", "); //первый элемент массива document.write(numbers + ", "); //второй элемент массива document.write(numbers + ", "); //третий элемент массива document.write(numbers); //четвертый элемент массива

Элементы массива можно изменять:

Var numbers = ; numbers = 10; //изменили первый элемент массива -

Чтобы добавить новый элемент массива, достаточно присвоить новое значение:

Var numbers = ; numbers = 7; //стало

Примечание: в массивах JavaScript может храниться любое число элементов любого типа.

Длина массива

Все массивы, как созданные с помощью конструктора Array(), так и определенные с помощью литерала массива, имеют специальное свойство length, которое возвращает общее число элементов, хранимых в массиве. Поскольку массивы могут иметь неопределенные элементы (имеющие значение undefined), более точная формулировка звучит так: свойство length всегда на единицу больше, чем самый большой индекс (номер) элемента массива. Свойство length автоматически обновляется, оставаясь корректным при добавлении новых элементов в массив.

Var v = new Array(); // v.length == 0 (ни один элемент не определен) v = new Array(1,2,3); // v.length == 3 (определены элементы 0–2) v = ; // v.length == 2 (определены элементы 0 и 1) document.write(v.length);

Чтобы получить последний элемент массива можно воспользоваться так же свойством length:

Var v = ["JavaScript", "Свойство", "Массивы"]; document.write(v);

Последний элемент имеет индекс на 1 меньше чем, длина массива, так как отсчет начинается с нуля. Поэтому, если вы не знаете точное кол-во элементов, но вам надо обратиться к последнему элементу масива используется запись: v.length - 1.

Перебор элементов массива

Наиболее часто свойство length используется для перебора элементов массива в цикле:

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

Var fruits = ["яблоко", "банан", "клубника", "персик"]; for(var i = 0; i

Цикл можно также использовать и для инициализации элементов массива:

Var bar = new Array(10); for(var i = 0; i

Усечение и увеличение массива

При работе с массивами, длина свойства length автоматически обновляется, поэтому нам самим не приходится об этом заботиться. Но стоит упомянуть об одной делати - свойство length доступно не только для чтения, но и для записи. Если свойству length указать значение меньше текущего, то массив укорачивается до новой (заданной) длины, любые элементы, не попадающие в новый диапазон индексов, отбрасываются и их значения теряются, даже если потом вернуть length обратно - значения не будут восстановлены.

Var foo = ; foo.length = 1; //укорачиваем до 1 элемента - foo.length = 4; //восстановим прежнее количество элементов document.write(foo); //прежнего значения нет

Самым простым способом очистить массив будет: foo.length = 0.

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

Удаление элементов массива

Оператор delete записывает в элемент массива значение undefined, при этом сам элемент продолжает существование. Для удаления элементов так, чтобы остающиеся элементы сместились на освободившееся место необходимо воспользоваться одним из предопределенных методов массива. Метод Array.shift() удаляет первый элемент массива, pop() - последний элемент массива, метод splice() - один или диапазон элементов в любом месте массива. Подробно о том как пользоваться этими методами будет описано в следующей главе.

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

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

Var matrix = [ , , ]; document.write(matrix); //выбран центральный элемент

Разберем, что написано в примере, matrix – это массив массивов чисел. Любой элемент matrix[n] – это массив чисел. Для доступа к определенному числу в массиве надо написать matrix[n][n], во вторых квадратных скобках указывается индекс элемента внутреннего массива.

//аналог предыдущей записи - создание с помощью конструктора var table = new Array(3); for(var i = 0; i

Ассоциативные массивы

Объекты можно использовать в качестве ассоциативных массивов. Немного теории - ассоциативные массивы (называемые также хэш-таблицами) позволяют вместо индексов использовать строки. Применение ассоциативных массивов очень похоже на использование имени свойства обычного объекта, но в данном случае при работе в формате массива. Поскольку в JavaScript нет методов для работы с ассоциативными массивами они применяются значительно реже, чем обычные, хотя точно также могут быть полезны для хранения информации и облегчают запоминание элементов, к которым нужно получить доступ.

Var s_list = new Object(); s_list["fat"] = "Толстый"; s_list["small"] = "Маленький"; s_list["name"] = "Гомер"; for (var x in s_list) //выведем на экран все элементы document.write(s_list[x] + "
");

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

Методы упрощают построение логики и её реализации в скрипте.

Ниже приведены базовые методы для работы с массивами в JS.

push

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

Let arr = ; arr.push(312); console.log(arr); // →

pop

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

Let arr = ; arr.pop(); console.log(arr); // →

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

Let img = "https://example.com/img/name.png"; let format = img.split(".").pop(); console.log(format); // → png console.log(img.split(".")); // → ["https://example", "com/img/name", "png"]

unshift

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

Let arr = ; arr.unshift(312); console.log(arr); // →

shift

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

Let arr = ; arr.shift(); console.log(arr); // → ;

Нужно понимать, что при применении методов shift и unshift у каждого элемента массива изменяется его индекс. Это может замедлять выполнение программы если массив имеет большую длину. split

Метод split() применяется для трансформации строки в массив. Split разделяет строку (string) по указаному параметру.

Let str = "Аня, Маша, Саша, Даша"; // это строка let arr = str.split(", "); console.log(arr); // → ["Аня", "Маша", "Саша", "Даша"] - это массив

join

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

Let arr = ["Notpad++", "Sublime", "VSCode"]; // это массив let str = arr.join(", "); console.log("Редакторы для кода: " + str); // → "Редакторы для кода: Notpad++, Sublime, VSCode"

slice

Метод slice() создаёт новый массив, в который копирует элементы из источника начиная с элемента c индексом первого параметра переданного в метод, до элемента с индексом второго параметра.

Например: slice(3, 7) вернёт элементы с индексами 3, 4, 5, 6. Элемент с индексом 7 не войдёт в массив.

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

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

Вот несколько примеров работы метода slice():

Let arr = ["A", "B", "C", "D", "E", "F", "G"]; // Вернёт массив в котором будут элементы с индексами от 2 до 5 console.log(arr.slice(2, 5)); // → ["C", "D", "E"] // Вернёт новый массив в котором будут элементы с индексами от 3 до arr.length console.log(arr.slice(3)); // → ["D", "E", "F", "G"] // Вернёт копию исходного массива console.log(arr.slice()); // → ["A", "B", "C", "D", "E", "F", "G"] // Вернёт новый массив состоящий из последних трёх элементов исходного console.log(arr.slice(-3)); // → ["E", "F", "G"]

splice

Метод splice() изменяет содержимое массива, удаляя существующие элементы и/или добавляя новые.

Синтаксис:

Array.splice(start, deleteCount[, item1[, item2[, ...]]])

Параметры:

  • start - Индекс, по которому начинать изменять массив. Если больше длины массива, реальный индекс будет установлен на длину массива. Если отрицателен, указывает индекс элемента с конца.
  • deleteCount - Целое число, показывающее количество старых удаляемых из массива элементов. Если deleteCount равен 0, элементы не удаляются. В этом случае вы должны указать как минимум один новый элемент. Если deleteCount больше количества элементов, оставшихся в массиве, начиная с индекса start, то будут удалены все элементы до конца массива.
  • itemN - Необязательные параметры. Добавляемые к массиву элементы. Если вы не укажете никакого элемента, splice() просто удалит элементы из массива.
Возвращаемое значение Описание

Если количество указанных вставляемых элементов будет отличным от количества удаляемых элементов, массив изменит длину после вызова.

Let arr = ["Барса", "Шахтёр", "МЮ", "Милан", "Реал", "Аякс", "Ювентус"]; let nax = arr.splice(2, 3); arr.splice(2, 3); console.log(nax); // → ["МЮ", "Милан", "Реал"] console.log(arr); // → ["Барса", "Шахтёр"] arr.splice(1, 0, "Зенит", "ЦСКА", "Спартак"); console.log(arr); // → ["Барса", "Зенит", "ЦСКА", "Спартак", "Шахтёр"]

reverse

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

Let arr = ; console.log(arr.reverce()); // → console.log(["Алиса", "БГ", "ГО", "ДДТ"].reverce()); // → ["ДДТ", "ГО", "БГ", "Алиса"]

map

Метод map() проходит по элементам массива производя с ними заданные действия и возвращает копию массива с изменёнными элементами.

В примере ниже к каждому элементу массива прибавим значение индекса этого элемента (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4):

Let arr = ; let testMap = arr.map((element, index) => element + index); console.log(testMap); //

или каждое значение массива умножим к примеру на 12

Let arr = ; let testMap = arr.map(a => a * 12); console.log(testMap); // →

filter

Метод filter() используется для фильтрации массивов. Он проходит по массиву, возвращая только те элементы, которые проходят заданное условие.

Например отфильтруем значения массива из чисел оставив только те, которые больше 21

Let arr = ; let testFilter = arr.filter(element => element > 21); console.log(testFilter); // →

Обратите внимание, что 21 не вошло в результат массива, так как условие было вернуть то что больше 21. Чтобы и 21 вошло в массив, то условие ставим как больше или равно: element >= 21

reduce

Метод reduce() последовательно идёт по элементам массива, аккумулируя при этом промежуточный результат согласно заданного в условии действия функции. В конечном результате он возвращает всего одно значение.

Часто этот метод применяют для того, чтобы найти сумму всех чисел в массиве. Пример:

Let arr = ; let summa = arr.reduce((acc, element) => acc + element); console.log(summa); // → 370

sort

Метод sort() применяется для сортировки элементов массива согласно заданным параметрам.

Пример - возьмём массив чисел о отсортируем их по порядку возврастания:

Let arr = ; let testSortArr = arr.sort((a, b) => a - b); console.log(testSortArr); // →

includes

Метод includes() определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого true или false .

Пример использования includes() .

Вот такое логическое выражение:

Let animal = "dog"; if (animal == "cat" || animal == "dog" || animal == "lion" || animal == "horse") { // ........ }

используя метод includes можно записать вот так:

Let animal = "dog"; const animals = ["cat", "dog", "lion", "horse"]; if (animals.includes(animal)) { // ........... }

  • Перевод

В большинстве приложений, которые разрабатываются в наши дни, требуется взаимодействовать с некими наборами данных. Обработка элементов в коллекциях - это часто встречающаяся операция, с который вы, наверняка, сталкивались. При работе, например, с массивами, можно, не задумываясь, пользоваться обычным циклом for , который выглядит примерно так: for (var i=0; i < value.length; i++){} . Однако, лучше, всё-таки, смотреть на вещи шире.

Предположим, нам надо вывести список товаров, и, при необходимости, разбивать его на категории, фильтровать, выполнять по нему поиск, модифицировать этот список или его элементы. Возможно, требуется быстро выполнить некие вычисления, в которые будут вовлечены элементы списка. Скажем, надо что-то с чем-то сложить, что-то на что-то умножить. Можно ли найти в JavaScript такие средства, которые позволяют решать подобные задачи быстрее и удобнее, чем с использованием обычного цикла for ?

На самом деле, такие средства в JavaScript имеются. Некоторые из них рассмотрены в материале, перевод которого мы представляем сегодня вашему вниманию. В частности, речь идёт об операторе расширения, о цикле for…of , и о методах includes() , some() , every() , filter() , map() и reduce() . Здесь мы, в основном, будем говорить о массивах, но рассматриваемые здесь методики обычно подходят и для работы с объектами других типов.

Надо отметить, что обзоры современных подходов к разработке на JS обычно включают в себя примеры, подготовленные с использованием стрелочных функций. Возможно, вы не особенно часто пользуетесь ими - может быть из-за того, что вам они не нравятся, может быть потому, что не хотите тратить слишком много времени на изучение чего-то нового, а, возможно, они просто вам не подходят. Поэтому здесь, в большинстве ситуаций, будут показаны два варианта выполнения одних и тех же действий: с использованием обычных функций (ES5) и с применением стрелочных функций (ES6). Для тех, у кого нет опыта работа со стрелочными функциями, отметим, что стрелочные функции не являются эквивалентами объявлений функций и функциональных выражений. Не стоит заменять одно на другое. В частности, это связано с тем, что в обычных и стрелочных функциях ключевое слово this ведёт себя по-разному.

1. Оператор расширения Оператор расширения (spread operator) позволяет «раскрывать» массивы, подставляя в то место, где использован этот оператор, вместо массивов, их элементы. Похожий подход предложен и для литералов объектов.▍Сильные стороны оператора расширения
  • Это - простой и быстрый способ «вытащить» из массива его отдельные элементы.
  • Этот оператор подходит для работы с литералами массивов и объектов.
  • Это - быстрый и интуитивно понятный метод работы с аргументами функций.
  • Оператор расширения не занимает много места в коде - он выглядит как три точки (…).
▍Пример Предположим, перед вами стоит задача вывести список ваших любимых угощений, не используя при этом цикл. С помощью оператора расширения это делается так:

2. Цикл for…of Оператор for…of предназначен для обхода итерируемых объектов. Он даёт доступ к отдельным элементам таких объектов (в частности - к элементам массивов), что, например, позволяет их модифицировать. Его можно считать заменой обычному циклу for .▍Сильные стороны цикла for…of
  • Это - простой способ для добавления или обновления элементов коллекций.
  • Цикл for…of позволяет выполнять различные вычисления с использованием элементов (суммирование, умножение, и так далее).
  • Им удобно пользоваться при необходимости выполнения проверки каких-либо условий.
  • Его использование ведёт к написанию более чистого и читабельного кода.
▍Пример Предположим, у вас имеется структура данных, описывающая содержимое ящика с инструментами и вам надо показать эти инструменты. Вот как это сделать с помощью цикла for...of:

3. Метод includes() Метод includes() используется для проверки наличия в коллекции некоего элемента, в частности, например, определённой строки в массиве, содержащем строки. Этот метод возвращает true или false в зависимости от результатов проверки. Пользуясь им, стоит учитывать, что он чувствителен к регистру символов. Если, например, в коллекции есть строковой элемент SCHOOL , а проверка на его наличие с помощью includes() выполняется по строке school , метод вернёт false .▍Сильные стороны метода includes()
  • Метод includes() полезен в деле создания простых механизмов поиска данных.
  • Он даёт разработчику интуитивно понятный способ определения наличия неких данных в массиве.
  • Его удобно использовать в условных выражениях для модификации, фильтрации элементов, и для выполнения других операций.
  • Его применение ведёт к улучшению читабельности кода.
▍Пример Предположим, у вас имеется гараж, представленный массивом со списком автомобилей, и вы не знаете, есть в этом гараже некий автомобиль, или нет. Для того чтобы решить эту проблему, надо написать код, который позволяет проверять наличие автомобиля в гараже. Воспользуемся методом includes() :

4. Метод some() Метод some() позволяет проверить, существуют ли некоторые из искомых элементов в массиве. Он, по результатам проверки, возвращает true или false . Он похож на вышерассмотренный метод includes() , за исключением того, что его аргументом является функция, а не, например, обычная строка.▍Сильные стороны метода some()
  • Метод some() позволяет проверить, имеется ли в массиве хотя бы один из интересующих нас элементов.
  • Он выполняет проверку условия с использованием переданной ему функции.
  • Этим методом удобно пользоваться.
▍Пример Предположим, вы - владелец клуба, и в общем-то, вас не интересует - кто именно в ваш клуб приходит. Однако, некоторым посетителям вход в клуб закрыт, так как они склонны к излишнему потреблению спиртных напитков, по крайней мере, в том случае, если они оказываются в вашем заведении сами, и с ними нет никого, кто может за ними присмотреть. В данном случае группе посетителей можно войти в клуб только при условии, что хотя бы одному из них не меньше 18-ти лет. Для того чтобы автоматизировать проверку подобного рода, воспользуемся методом some() . Ниже его применение продемонстрировано в двух вариантах.ES5

ES6

5. Метод every() Метод every() обходит массив и проверяет каждый его элемент на соответствие некоему условию, возвращая true в том случае, если все элементы массива соответствуют условию, и false в противном случае. Можно заметить, что он похож на метод some() .▍Сильные стороны метода every()
  • Метод every() позволяет проверить соответствие условию всех элементов массива.
  • Условия можно задавать с использованием функций.
  • Он способствует применению декларативного подхода при программировании.
▍Пример Вернёмся к предыдущему примеру. Там вы пропускали в клуб посетителей, не достигших 18 лет, но кто-то написал заявление в полицию, после чего вы попали в неприятную ситуацию. После того, как всё удалось уладить, вы решили, что вам всё это ни к чему и ужесточили правила посещения клуба. Теперь группа посетителей может пройти в клуб только в том случае, если возраст каждого члена группы не меньше 18 лет. Как и в прошлый раз, рассмотрим решение задачи в двух вариантах, но на этот раз будем пользоваться методом every() .ES5

ES6

6. Метод filter() Метод filter() позволяет создать, на основе некоего массива, новый массив, содержащий только те элементы исходного массива, которые удовлетворяют заданному условию.▍Сильные стороны метода filter()
  • Метод filter() позволяет избежать модификации исходного массива.
  • Он позволяет избавиться от ненужных элементов.
  • Он улучшает читабельность кода.
▍Пример Предположим, вам надо отобрать из списка цен только те, которые больше или равны 30. Воспользуемся для решения этой задачи методом filter() .ES5

ES6

7. Метод map() Метод map() похож на метод filter() тем, что он тоже возвращает новый массив. Однако он применяется для модификации элементов исходного массива.▍Сильные стороны метода map()
  • Метод map() позволяет избежать необходимости изменения элементов исходного массива.
  • С его помощью удобно модифицировать элементы массивов.
  • Он улучшает читаемость кода.
▍Пример Предположим, у вас имеется список товаров с ценами. Вашему менеджеру нужен новый список товаров, цены которых снижены на 25%. Воспользуемся для решения этой задачи методом map() .ES5

ES6

8. Метод reduce() Метод reduce() , в его простейшем виде, позволяет суммировать элементы числовых массивов. Другими словами, он сводит массив к единственному значению. Это позволяет использовать его для выполнения различных вычислений.▍Сильные стороны метода reduce()
  • С помощью метода reduce() можно посчитать сумму или среднее значение элементов массива.
  • Этот метод ускоряет и упрощает проведение вычислений.
▍Пример Предположим, вам надо посчитать ваши расходы за неделю, которые хранятся в массиве. Решим эту задачу с помощью метода reduce() .ES5

ES6

Добавить метки

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

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

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

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

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

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

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

Создание (объявление) массива

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

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

Короткая запись: при помощи квадратных скобок

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

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

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

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

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

var myArray = ;

Длинная запись: при помощи конструктора Array()

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()

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

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

Метод unshift()

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

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

Удаление элементов массива Методы pop() и shift()

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

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

Метод splice()

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

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

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

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

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

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

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

Понятие массива

Массив – это упорядоченный набор данных, который имеет имя и является экземпляром объекта 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