Как создать многомерный массив в JavaScript на примерах

В этом руководстве вы узнаете, как создать и работать с многомерным массивом JavaScript и эффективно манипулировать его элементами.

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

По этой причине мы можем сказать, что в JavaScript — это массив массивов. Самый простой способ определить многомерный массив — использовать литеральную нотацию массива.

Синтаксис:

let activities = [];

В следующем примере определяется двумерный массив с именем activities :

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];

В массиве activities первое измерение представляет действие, а второе показывает количество часов, потраченных в день на каждое из них.

Чтобы отобразить массив activities в консоли, вы используете метод console.table() следующим образом:

console.table(activities);

Ниже показан результат:

┌─────────┬─────────────┬───┐
│ (index) │      0      │ 1 │
├─────────┼─────────────┼───┤
│    0    │   'Work'    │ 9 │
│    1    │    'Eat'    │ 1 │
│    2    │  'Commute'  │ 2 │
│    3    │ 'Play Game' │ 1 │
│    4    │   'Sleep'   │ 7 │
└─────────┴─────────────┴───┘

Обратите внимание, что столбец (index) предназначен для иллюстрации, которая указывает индексы внутреннего массива.

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

В следующем примере возвращается второй элемент первого внутреннего массива в массиве activities выше:

console.log(activities[0][1]);
 // 9

Добавление элементов в многомерный массив

Вы можете использовать методы Array, такие как push() и splice(), для управления элементами многомерного массива.

Например, чтобы добавить новый элемент в конец многомерного массива, используйте метод push() следующим образом:

activities.push(['Study',2]);

console.table(activities);

┌─────────┬─────────────┬───┐
│ (index) │      0      │ 1 │
├─────────┼─────────────┼───┤
│    0    │   'Work'    │ 9 │
│    1    │    'Eat'    │ 1 │
│    2    │  'Commute'  │ 2 │
│    3    │ 'Play Game' │ 1 │
│    4    │   'Sleep'   │ 7 │
│    5    │   'Study'   │ 2 │
└─────────┴─────────────┴───┘

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

activities.splice(1, 0, ['Programming', 2]);

console.table(activities);

Вот результат:

┌─────────┬───────────────┬───┐
│ (index) │       0       │ 1 │
├─────────┼───────────────┼───┤
│    0    │    'Work'     │ 9 │
│    1    │ 'Programming' │ 2 │
│    2    │     'Eat'     │ 1 │
│    3    │   'Commute'   │ 2 │
│    4    │  'Play Game'  │ 1 │
│    5    │    'Sleep'    │ 7 │
│    6    │    'Study'    │ 2 │
└─────────┴───────────────┴───┘

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

activities.forEach(activity => {
    let percentage =((activity[1] / 24) * 100).toFixed();
    activity[2] = percentage + '%';
});

console.table(activities);

Ниже показан вывод в консоли:

┌─────────┬───────────────┬───┬───────┐
│(index) │       0       │ 1 │   2   │
├─────────┼───────────────┼───┼───────┤
│    0    │    'Work'     │ 9 │ '38%' │
│    1    │ 'Programming' │ 2 │ '8%'  │
│    2    │     'Eat'     │ 1 │ '4%'  │
│    3    │   'Commute'   │ 2 │ '8%'  │
│    4    │  'Play Game'  │ 1 │ '4%'  │
│    5    │    'Sleep'    │ 7 │ '29%' │
│    6    │    'Study'    │ 2 │ '8%'  │
└─────────┴───────────────┴───┴───────┘

Удаление элемента

Чтобы удалить элемент из многомерного массива, используйте метод pop() или splice().

Например, следующий оператор удаляет последний элемент массива activities.

activities.pop();

console.table(activities);

Выход:

┌─────────┬───────────────┬───┬───────┐
│ (index) │       0       │ 1 │   2   │
├─────────┼───────────────┼───┼───────┤
│    0    │    'Work'     │ 9 │ '38%' │
│    1    │ 'Programming' │ 2 │ '8%'  │
│    2    │     'Eat'     │ 1 │ '4%'  │
│    3    │   'Commute'   │ 2 │ '8%'  │
│    4    │  'Play Game'  │ 1 │ '4%'  │
│    5    │    'Sleep'    │ 7 │ '29%' │
└─────────┴───────────────┴───┴───────┘

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

activities.forEach((activity) => {
    activity.pop(2);
});

console.table(activities);

Выход:

┌─────────┬───────────────┬───┐
│(index) │       0       │ 1 │
├─────────┼───────────────┼───┤
│    0    │    'Work'     │ 9 │
│    1    │ 'Programming' │ 2 │
│    2    │     'Eat'     │ 1 │
│    3    │   'Commute'   │ 2 │
│    4    │  'Play Game'  │ 1 │
│    5    │    'Sleep'    │ 7 │
└─────────┴───────────────┴───┘

Перебор элементов

Чтобы выполнить итерацию многомерного массива, вы используете вложенный цикл for, как в следующем примере.

// loop the outer array
for(let i = 0; i < activities.length; i++) {
    // get the size of the inner array
    var innerArrayLength = activities[i].length;
    // loop the inner array
    for(let j = 0; j < innerArrayLength; j++) {
        console.log('[' + i + ',' + j + '] = ' + activities[i][j]);
    }
}

Первый цикл перебирает элементы внешнего массива, а вложенный цикл перебирает элементы внутреннего массива.

Ниже показан вывод скрипта в консоли:

[0,0] = Work
[0,1] = 9
[1,0] = Eat
[1,1] = 1
[2,0] = Commute
[2,1] = 2
[3,0] = Play Game
[3,1] = 1
[4,0] = Sleep
[4,1] = 7
[5,0] = Study
[5,1] = 2

Или вы можете использовать метод forEach() дважды:

activities.forEach((activity) => {
    activity.forEach((data) => {
        console.log(data);
    });
});

Выход:

Work
9
Eat
1
Commute
2
Play Game
1
Sleep
7
Study
2