JavaScript. Двумерные массивы. Массивы в массивах. Трехмерные массивы

Двумерные массивы. Массивы в массивах. Трехмерные массивы


Содержание


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

1. Виды двумерных массивов. Объявление и использование двумерного массива с использованием ключевого слова new

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

  • с одинаковым количеством элементов в каждой строке (рисунок 1-a);
  • с произвольным количеством элементов в каждой строке (рисунок 1-b).

При этом каждый элемент также может быть массивом или другим сложным объектом.

JavaScript. Виды двумерных массивов

Рисунок 1. Виды двумерных массивов. Количество элементов в каждой строке одинаково (a) и произвольно (b)

 

2. Литеральное определение двумерного массива [ ]. Общая форма

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

В наиболее общем виде создание двумерного массива размером M×N (все строки имеют одинаковый размер) выглядит следующим образом

var ArrayName =
  [
    [ item11, item12, ..., item1N],
    [ item21, item22, ..., item2N],
    ...
    [ itemM1, itemM2, ..., itemMN]
  ]

здесь

  • ArrayName – имя объявляемого массива;
  • M – количество строк в массиве;
  • N – количество столбцов в массиве;
  • item11, item12, …, itemMN – элементы массива. Эти элементы могут быть объектами любого типа (число, строка и т.п.) и даже другими массивами.

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

var ArrayName =
  [
    [ item11, item12, ..., item1_N1 ],
    [ item21, item22, ..., item2_N2 ],
    ...
    [ itemM1, itemM2, ..., itemM_NM ]
  ]

здесь

  • N1, N2, NM – соответственно количество элементов в строке 1 (позиция 0), строке 2 и строке M. То есть количество элементов в каждой строке отличается.

 

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

В примере создается двумерная таблица, изображенная на рисунке 2.

JavaScript. Двумерная таблица

Рисунок 2. Двумерная таблица

Матрица создается двумя разными способами

// Двумерные массивы

// Способ 1.
// 1. Создать двумерную матрицу целых чисел размером 3*4
var M = []

M[0] = [ 2, 8, 4, 1 ] // Первая строка матрицы
M[1] = [ 4, 2, 0, 9 ] // вторая строка матрицы
M[2] = [ 1, 7, 5, 4 ] // третья строка матрицы

// 2. Вывести матрицу в цикле
document.write("M:<br>")
for (var i=0; i<3; i++)
{
  for (var j=0; j<4; j++)
    document.write(M[i][j] + " ")
  document.write("<br>")
}

// Способ 2.
var MM =
  [
    [ 2, 8, 4, 1 ],
    [ 4, 2, 0, 9 ],
    [ 1, 7, 5, 4 ]
  ]

// 2. Вывести матрицу в цикле
document.write("MM:<br>")
for (var i=0; i<3; i++)
{
  for (var j=0; j<4; j++)
    document.write(MM[i][j] + " ")
  document.write("<br>")
}

Результат

M:
2 8 4 1
4 2 0 9
1 7 5 4
MM:
2 8 4 1
4 2 0 9
1 7 5 4

 

4. Определение двумерного массива с помощью оператора new

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

Ниже приведена общая форма создания двумерного массива, в котором количество элементов во всех строках одинаково

var ArrayName = new Array(
  new Array(item11, item12, ..., item1N),
  new Array(item21, item22, ..., item2N),
  ...
  new Array(itemM1, itemM2, ..., itemMN)
)

здесь

  • ArrayName – имя создаваемого массива;
  • M – количество строк в массиве;
  • N – количество элементов в строке (количество столбцов);
  • item11, item12, itemMN – элементы массива. Это могут быть строки, числа, объекты и другие массивы (подмассивы).

Если массив содержит разное количество элементов в каждой строке, то общая форма создания такого массива следующая

var ArrayName = new Array(
  new Array(item11, item12, ..., item1_N1),
  new Array(item21, item22, ..., item2_N2),
  ...
  new Array(itemM1, itemM2, ..., itemM_NM)
)

здесь

  • N1, N2, NM – соответственно количество элементов в строке 1 (позиция 0), строке 2 и строке M. То есть количество элементов в каждой строке разное.

При объявлении двумерных массивов можно совмещать данный способ создания массива с литеральным способом (п. 2).

 

5. Пример создания массива чисел с разной длиной строк оператором new

В примере с помощью оператора new создается массив чисел, который отображен на рисунке 3.

JavaScript. Массив чисел с разной длиной строкРисунок 3. Массив чисел с разной длиной строк

Текст примера следующий

// Двумерные и многомерные массивы

// Создать массив с помощью оператора new.
// Длина каждой строки в массиве отличается.

// 1. Объявление массива и заполнение значениями
var M = new Array (
  new Array( 5, 9, 3),
  new Array( 8, 1.23, 2.99, 6.54, 5.4),
  new Array( 7.2, 2, -40.6, -1.03)
)

// 2. Вывести массив M поэлементно
document.write("M:<br>")
for (var i=0; i<M.length; i++)
{
  for (var j=0; j<M[i].length; j++)
    document.write(M[i][j] + " ");
  document.write("<br>")
}

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

// 4. Вывести отдельный элемент массива в массиве
document.write(M[1][2]+"<br>") // 2.99

Результат

M:
5 9 3
8 1.23 2.99 6.54 5.4
7.2 2 -40.6 -1.03
-----------------------
M:
5,9,3
8,1.23,2.99,6.54,5.4
7.2,2,-40.6,-1.03
-----------------------
2.99

 

6. Особенности использования массивов в массивах

Как было сказано выше (п. 1), элементом массива может быть другой массив любого измерения. На рисунке 4 изображены элементы массива, также являющиеся массивами. Для доступа к элементу 7 подмассива [2, 7, 3] необходимо обратиться к M[0][0][1].

JavaScript. Массив в массиве

Рисунок 4. Массив в массиве

 

7. Пример создания массива в массиве литеральным способом

 

// Двумерные и многомерные массивы
// Создать массив в массиве литеральным способом
var M = []
var m1 = [2, 7, 3]

M[0] = [ 5, m1, 9 ] // первая строка матрицы
M[1] = [ 8, 1.23, [] , "abc" ] // вторая строка матрицы
M[2] = [ [7.2, 1 ], [ 'a', 2 ] ] // третья строка матрицы

// 2. Вывести массив в цикле
document.write("M:<br>")
for (var i=0; i<3; i++)
{
  for (var j=0; j<M[i].length; j++)
    document.write(M[i][j] + " ")
  document.write("<br>")
}

// Вывести отдельный элемент массива в массиве
document.write(M[0][1][0]+"<br>") // 7
document.write(M[2][0][1]+"<br>") // 1
document.write(M[2][1][0]+"<br>") // 'a'

Результат

M:
5 2,7,3 9
8 1.23 abc
7.2,1 a,2
2
1
a

 

8. Пример создания массива в массиве сочетанием оператора new и литеральным способом

При создании многомерного массива можно совмещать создание массива оператором new и литеральным способом.

// Двумерные и многомерные массивы

// Создать массив в массиве с помощью оператора new.
// Сформировать массив, в котором названию времени года соответствует
// определенный перечень месяцев
// M:
// [ "December", "January", "February"]
// [ "March", "April", "May"]
// [ "June", "July", "August" ]
// [ "September", "October", "November"]

// 1. Создать массив месяцев, соответствующих временам года
var M = new Array(
  ["December", "January", "February"],
  ["March", "April", "May"],
  ["June", "July", "August"],
  ["September", "October", "November"]
)

// 2. Вывести массив M
for (var i=0; i<M.length; i++)
  document.write(M[i]+"<br>");

// 3. Вывести отдельный элемент массива в массиве
document.write(M[1][2]+"<br>") // May
document.write(M[3][0]+"<br>") // September

Результат

December,January,February
March,April,May
June,July,August
September,October,November
May
September

 

9. Создание двумерного массива заданного размера. Размер задается с клавиатуры. Свойство length

Условие задачи. Создать двумерный массив размера m×n, где m – количество строк, n – количество столбцов. Значения m, n вводятся с клавиатуры. Элементы массива заполнить значениями 1.

Решение.

После ввода m, свойство length массива устанавливается в соответствующие значения.

// Двумерные и многомерные массивы

// Задача. Создать массив заданного размера m*n,
// где m, n вводятся с клавиатуры.
// Заполнить массив значениями 1.

// 1. Ввести m, n
var m = prompt("m = ")
var n = prompt("n = ")

// 2. Объявление массива
var A = new Array()

// 3. Указать количество строк
A.length = m;

// 4. Указать количество столбцов
for (var i=0; i<m; i++)
{
  // Создать подмассив в массиве
  A[i] = new Array()

  // Установить длину массива
  A[i].length = n
}

// 5. Заполнить массив A значениями 1
for (var i=0; i<A.length; i++)
  for (var j=0; j<A[i].length; j++)
    A[i][j] = 1

// 6. Вывести массив A на экран
document.write("A:<br>")
for (var i=0; i<A.length; i++)
{
  for (var j=0; j<A[i].length; j++)
    document.write(A[i][j]+" ")
  document.write("<br>")
}

Результат

A:
1 1 1 1
1 1 1 1
1 1 1 1

 

10. Создание трехмерного массива. Свойство length

При создании трехмерного массива размерность каждого измерения устанавливается с помощью свойства length как показано ниже

// Создать одномерный массив размерностью m
A = new Array()
A.length = m

// Добавить вторую размерность n,
// получается двумерный массив размером m*n
A[0] = new Array(); A[0].length = n
A[1] = new Array(); A[1].length = n
...
A[m-1] = new Array(); A[m-1].length = n

// Добавить третью размерность [k]
A[0][0] = new Array(); A[0][0].length = k
A[0][1] = new Array(); A[0][1].length = k
...
A[0][n-1] = new Array(); A[0][n-1].length = k
A[1][0] = new Array(); A[1][0].length = k
...
A[1][n-1] = new Array(); A[1][n-1].length = k
...
A[m-1][0] = new Array(); A[m-1][0].length = k
...
A[m-1][n-1] = new Array(); A[m-1][n-1].length = k

В приведенном выше фрагменте создается трехмерный массив с именем A размером m×n×k. Конечно, процесс построения массива целесообразнее построить в цикле (смотрите следующий пример).

После этого элементу трехмерного массива можно присваивать значение по образцу

A[x][y][z] = value

здесь

  • A – имя массива;
  • x – координата первого измерения массива, x = 0, 1, …, m-1;
  • y – координата второго измерения массива, y = 0, 1, …, n-1;
  • z – координата третьего измерения массива, z = 0, 1, …, k-1;
  • value – некоторое значение.

 

11. Пример создания трехмерного массива по заданным размерам m×n×k. Элементы массива заполняются случайными целыми числами

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

В примере ниже демонстрируется создание трехмерного массива размером m×n×k, где m, n, k вводятся с клавиатуры. Элементы массива заполняются случайными числами в диапазоне [5, 10].

Для получения случайного числа используется функция Math.random().

// Двумерные и многомерные массивы

// Задача. Создать массив заданного размера m*n,
// где m, n вводятся с клавиатуры.
// Заполнить массив значениями 1.

// 1. Ввести m, n, k
var m = prompt("m = ")
var n = prompt("n = ")
var k = prompt("k = ")

// 2. Объявление массива, создать пустой массив
var A = new Array()

// 3. Задать количество элементов по оси X
A.length = m;

// 4. Задать количество элементов по оси Y
for (var i=0; i<m; i++)
{
  // Создать подмассив в массиве,
  // выделить память для другого измерения
  A[i] = new Array()

  // Установить длину массива
  A[i].length = n
}

// 5. Задать количество элементов по оси Z
for (var i=0; i<A.length; i++)
  for (var j=0; j<A[i].length; j++)
  {
    // Выделить память для третьего измерения
    A[i][j] = new Array()

    // Установить длину третьего измерения массива
    A[i][j].length = k
  }

// 6. Заполнить массив случайными значениями
for (var i=0; i<A.length; i++)
  for (var j=0; j<A[i].length; j++)
    for (var t=0; t<A[i][j].length; t++)
      A[i][j][t] = 5 + parseInt(Math.random()*(10-5+1))

// 7. Вывести массив A поэлементно
document.write("A:<br>")
for (var i=0; i<A.length; i++)
  for (var j=0; j<A[i].length; j++)
    for (var t=0; t<A[i][j].length; t++)
      document.write("A["+i+"]["+j+"]["+t+"] = "+A[i][j][t]+"<br>")

Для заданных

m = 2
n = 3
k = 4

программа вывела следующий результат

A:
A[0][0][0] = 9
A[0][0][1] = 5
A[0][0][2] = 5
A[0][0][3] = 10
A[0][1][0] = 9
A[0][1][1] = 7
A[0][1][2] = 10
A[0][1][3] = 8
A[0][2][0] = 5
A[0][2][1] = 6
A[0][2][2] = 10
A[0][2][3] = 6
A[1][0][0] = 6
A[1][0][1] = 6
A[1][0][2] = 7
A[1][0][3] = 5
A[1][1][0] = 6
A[1][1][1] = 6
A[1][1][2] = 10
A[1][1][3] = 6
A[1][2][0] = 9
A[1][2][1] = 7
A[1][2][2] = 5
A[1][2][3] = 6

 


Related topics