JavaScript, Теория

JavaScript. Массивы. Одномерные массивы. Создание массива

Массивы. Одномерные массивы. Создание массива. Свойство length. Формирование массива

Содержание

Поиск на других ресурсах:

1. Понятие массива. Виды массивов

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

Следовательно, массив – это именованный набор элементов, которые:

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

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

  • имеет свою позицию в массиве (индекс). В JavaScript первый элемент массива имеет индекс 0, второй – индекс 1 и т.д.;
  • сохраняет значение. Доступ к элементу массива осуществляется по индексу.

Различают следующие виды массивов:

  • одномерные. В одномерных массивах элементы формируются в ряд. Доступ к элементам массива осуществляется путём указания одного индекса (позиции);
  • многомерные. Здесь элементы сформированы по двум, трем и более измерениям. Каждое измерение это тоже ряд элементов. Доступ к элементам многомерных массивов осуществляется на основе двух, трех и более индексов.

  ⇑

2. Объявление (создание) одномерного массива в JavaScript

В языке JavaScript одномерный массив создается одним из двух способов:

  • с помощью ключевого слова new. В этом случае вызывается конструкция вида new Array();
  • с помощью квадратных скобок []. Этот способ еще называют «литеральное определение массива».

  ⇑

2.1. Объявление массива с помощью ключевого слова new

В самом простом случае, объявление массива с использованием оператора new выглядит следующим образом:

var ArrayName = new Array(value1, value2, ..., valueN)

здесь

  • ArrayName – имя массива;
  • value1, value2, valueN – значения, которыми заполняются элементы массива. Здесь также можно указывать имена объявленных ранее переменных, соответственно, значения этих переменных будут подставляться в массив. Размерность массива (количество частей) устанавливается равной N.

Если нужно создать массив, не содержащий ни одного элемента (так называемый «пустой» массив), то синтаксис объявления следующий

var ArrayName = new Array()

здесь ArrayName – имя создаваемого массива.

Пример.

В примере демонстрируется создание массивов с помощью оператора new.

// Массив

// Создание массива оператором new
// 1. Создать пустой массив
var EmptyArray = new Array()

// 2. Создать массив из 5 чисел типа int
var AI = new Array(7, 10, 2, 5, -3)

// 3. Вывести массив AI на экран в строку
document.write("AI:<br>")
for (var i=0; i<AI.length; i++)
  document.write(AI[i]+" ")
document.write("<br>")

// 4. Создать массив из 4 строк и вывести его на экран
var Seasons = new Array("Winter", "Spring", "Summer", "Autumn")
document.write("Seasons:<br>")
for (var i=0; i<Seasons.length; i++)
  document.write(Seasons[i]+" ")
document.write("<br>")

// 5. Создать массив разнотипных объектов
var AObj = new Array("Hello, world!", 2.88, true, '+', 3000)

// 6. Создать и вывести массив, содержащий элементы на основе переменных и вычислений
var radius = 2.5
var ResultArray = new Array(
  2*Math.PI*radius,
  Math.PI*radius*radius,
  4.0/3.0*Math.PI*radius*radius*radius
)

document.write("<br>ResultArray:<br>")
for (var i=0; i<ResultArray.length; i++)
  document.write(ResultArray[i] + "<br>")
document.write("<br>")

  ⇑

2.2. Литеральное создание массива. Конструкция []

Для создания массива этим способом используется следующий общий синтаксис.

var ArrayName = [ value1, value2, ..., valueN ]

здесь

  • ArrayName – имя массива;
  • value1, value2, valueN – значения элементов массива. Значения могут быть также переменными или результатами вычислений выражений.

Для создания «пустого» массива используется следующий синтаксис

var ArrayName = []

тут ArrayName – имя создаваемого массива.

Пример.

// Массивы

// Создание массива литеральным способом []
// 1. Создать пустой массив
var EmptyArray = []

// 2. Создать массив из 5 чисел типа int
var AI = [ 7, 10, 2, 5, -3 ]

// 3. Вывести массив AI на экран в строку
document.write("AI:<br>")
for (var i=0; i<AI.length; i++)
  document.write(AI[i]+" ")
document.write("<br>")

// 4. Создать массив из 4 строк и вывести его на экран
var Seasons = [ "Winter", "Spring", "Summer", "Autumn" ]
document.write("Seasons:<br>")
for (var i=0; i<Seasons.length; i++)
  document.write(Seasons[i]+" ")
document.write("<br>")

// 5. Создать массив разнотипных объектов
var AObj = [ "bestprog.net", -12.404, false, '+', 1E3 ]

// 6. Создать и вывести массив, содержащий элементы на основе переменных и вычислений
var radius = 2.5
var ResultArray = [
  2*Math.PI*radius,
  Math.PI*radius*radius,
  4.0/3.0*Math.PI*radius*radius*radius
]

document.write("<br>ResultArray:<br>")
for (var i=0; i<ResultArray.length; i++)
  document.write(ResultArray[i] + "<br>")
document.write("<br>")

Результат

AI:
7 10 2 5 -3
Seasons:
Winter Spring Summer Autumn

ResultArray:
15.707963267948966
19.634954084936208
65.44984694978736

  ⇑

3. Доступ к элементам массива. Свойства индекса массива. Добавление элементов к массиву

После объявления массива можно этот массив использовать или изменять. Доступ к отдельному элементу массива выполняется с помощью квадратных скобок []

ArrayName[index]

здесь

  • ArrayName – имя массива;
  • index – позиция в массиве. Это может быть число, строка, символ и т.д.

После объявления массива с некоторым набором элементов в этом массиве значения index формируются в возрастающем порядке, начиная с 0 (0, 1, 2, …). Однако язык JavaScript допускает использовать в качестве index любой объект. Этим объектом может быть строка, число с плавающей запятой, целое число, символ и т.д. Например, в строке

ArrayName['+'] = 2.88

создается ячейка со значением 2.88 но индекс ячейки будет значение ‘+’. То есть, в обратной операции

var c = ArrayName['+']

переменная c будет иметь значение 2.88.

Если указать несуществующий индекс, то результатом будет значение undefined

var A = [ 1, 2, 5]
var item = A[15] // item = undefined

Пример.

// Массивы. Индекс массива

// 1. Массив чисел, индексы массива равны 0, 1, 2.
var AI = [ 2, 3, 8]
var t
t = AI[0] // t = 2
document.write("t = " + t + "<br>")

// 2. Индекс массива - символ
// 2.1. Создать пустой массив
var AC = []

// 2.2. Добавить элементы к массиву
AC['+'] = "Plus"
AC['-'] = "Minus"
AC['*'] = "Multiplication"

// 2.3. Получить название по индексу '+'
var sign = AC['+']
document.write("sign = " + sign + "<br>")

// 2.4. Получить название по несуществующему индексу
sign = AC['&'] // sign = undefined
document.write("sign = " + sign + "<br>")

// 3. Индекс массива - строка символов
// 3.1. Создать пустой массив
var A = new Array()
A["One"] = 1
A["Two"] = 2
A["Five"] = 5

// 3.2. Получить элемент с индексом "two"
var number = A["Two"]
document.write("number = " + number + "<br>")

// 3.3. Получить элемент с индексом которого нету в массиве
number = A["Nine"] // number = undefined
document.write("number = " + number + "<br>")

// 3.4. Попробовать получить элемент с индексом, имя которого
//      задано некорректно (со строчной литеры)
number = A["one"] // number = undefined
document.write("number = " + number + "<br>")

Результат

t = 2
sign = Plus
sign = undefined
number = 2
number = undefined
number = undefined

  ⇑

4. Определение размера массива. Свойство length

Для определения размера массива используется свойство length, которое возвращает целое число, равное количеству элементов массива. Обращение к свойству для массива ArrayName может быть следующим

ArrayName.length

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

Пример.

// Массивы. Получить размер массива. Свойство length

// 1. Объявить пустой массив
var EmptyArray = new Array()

// 2. Получить и вывести размер массива EmptyArray
var size = EmptyArray.length   // size = 0
document.write(size + "<br>")

// 3. Объявить массив из 3-х строк
var AS = [ "December", "January", "February" ]
size = AS.length   // size = 3
document.write(size + "<br>")

// 4. Добавить к массиву AS элемент
AS[3] = "May"
size = AS.length // size = 4
document.write(size + "<br>")

// 5. Добавить к массиву AS элемент с нецелочисленным индексом
AS['&'] = 123
size = AS.length // size = 4 - размер не изменился
document.write(size + "<br>")

Результат

0
3
4
4

  ⇑

5. Формирование массива путём добавления новых элементов. Изменение длины массива

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

При добавлении целочисленных элементов рассматриваются следующие случаи:

  • добавляется один элемент (рисунок 1);
  • добавляется несколько элементов (рисунок 2).

При добавлении одного элемента индекс этого элемента должен быть на 1 больше максимального значимого индекса в массиве.

JavaScript. Массивы. Свойство length. Добавление одного элемента. Увеличение длины массива на 1

Рисунок 1. Добавление одного элемента. Увеличение длины массива на 1 (свойство A.length)

В случае добавления нескольких целочисленных элементов, индекс добавляемого элемента как минимум на 2 больше максимального индекса массива (рисунок 2). Промежуточные элементы массива заполняются значением undefined.

JavaScript. Массивы. Свойство length. Добавление группы элементов. Увеличение длины массива

Рисунок 2. Добавление группы элементов. Увеличение длины массива на 4 элемента

  ⇑

6. Примеры добавления элементов к массиву
6.1. Добавление частей с нецелочисленными индексами

В нижеприведенном коде в массив два раза добавляются элементы с индексами ‘+’ и ‘-‘. При этом свойство length не учитывает эти элементы, хотя элементы имеются в массиве. После того, как к массиву добавляется элемент с целочисленным индексом, свойство length увеличивается на 1.

// Массивы. Формирование массива

// 1. Объявить массив из 3-х элементов типа Number
var A = new Array(2, 8, 5)
document.write(A.length) // 3

// 2. Добавить элемент с индексом '+'
A['+'] = 50

// 3. Добавить элемент с индексом "abcd"
A["abcd"] = 25

// 4. Вывести длину массива повторно
document.write("<br>" + A.length) // 3

// 5. Добавить элемент с индексом 3
A[3] = 100

// 6. Еще раз вывести длину
document.write("<br>" + A.length) // 4

Результат

3
3
4

  ⇑

6.2. Добавление элементов с целочисленными индексами

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

Пример.

// Массивы. Формирование массива

// 1. Объявить массив из 3-х элементов типа Number
var A = new Array(2, 8, 5)
document.write("length(A) = " + A.length) // length(A) = 3

// 2. Добавить элемент с индексом 6
A[6] = 50

// 3. Вывести длину массива и сам массив
document.write("<br>length(A) = " + A.length) // length(A) = 7

document.write("<br>")
for (var i = 0; i<A.length; i++)
  document.write(A[i] + " ")
document.write("<br>")

Результат

length(A) = 3
length(A) = 7
2 8 5 undefined undefined undefined 50

  ⇑

Связанные темы

  ⇑