Многомерные массивы в JavaScript. Все способы перебора массива в JavaScript Обращение к элементам многомерного массива javascript
Последнее обновление: 09.04.2018
Для работы с наборами данных предназначены массивы. Для создания массива применяется выражение new Array() :
Var myArray = new Array();
Существует также более короткий способ инициализации массива:
Var myArray = ;
В данном случае мы создаем пустой массив. Но можно также добавить в него начальные данные:
Var people = ["Tom", "Alice", "Sam"]; console.log(people);
В этом случае в массиве myArray будет три элемента. Графически его можно представить так:
Для обращения к отдельным элементам массива используются индексы. Отсчет начинается с нуля, то есть первый элемент будет иметь индекс 0, а последний - 2:
Var people = ["Tom", "Alice", "Sam"]; console.log(people); // Tom var person3 = people; // Sam console.log(person3); // Sam
Если мы попробуем обратиться к элементу по индексу больше размера массива, то мы получим undefined:
Var people = ["Tom", "Alice", "Sam"]; console.log(people); // undefined
Также по индексу осуществляется установка значений для элементов массива:
Var people = ["Tom", "Alice", "Sam"]; console.log(people); // Tom people = "Bob"; console.log(people); // Bob
Причем в отличие от других языков, как C# или Java, можно установить элемент, который изначально не установлен:
Var people = ["Tom", "Alice", "Sam"]; console.log(people); // undefined - в массиве только три элемента people = "Bob"; console.log(people); // Bob
Также стоит отметить, что в отличие от ряда языков программирования в JavaScript массивы не являются строго типизированными, один массив может хранить данные разных типов:
Var objects = ["Tom", 12, true, 3.14, false]; console.log(objects);
spread-операторspread-оператор ... позволяет взять значения из массива по отдельности:
Let numbers = ; console.log(...numbers); // 1 2 3 4 console.log(numbers); //
spread-оператор указывается перед массивом. В результате выражение...numbers возвратит набор чисел, но это будет не массив, а именно отедльные значения.
Многомерные массивыМассивы могут быть одномерными и многомерными. Каждый элемент в многомерном массиве может представлять собой отдельный массив. Выше мы рассматривали одномерный массив, теперь создадим многомерный массив:
Var numbers1 = ; // одномерный массив var numbers2 = [, ]; // двумерный массив
Визуально оба массива можно представить следующим образом:
Одномерный массив numbers1Чтобы получить отдельный элемент массива, также используется индекс:
Var tomInfo = people;
Только теперь переменная tomInfo будет представлять массив. Чтобы получить элемент внутри вложенного массива, нам надо использовать его вторую размерность:
Console.log("Имя: " + people); // Tom console.log("Возраст: " + people); // 25
То есть если визуально двумерный массив мы можем представить в виде таблицы, то элемент people будет ссылаться на ячейку таблицы, которая находится на пересечении первой строки и второго столбца (первая размерность - 0 - строка, вторая размерность - 1 - столбец).
Также мы можем выполнить присвоение:
Var people = [ ["Tom", 25, false], ["Bill", 38, true], ["Alice", 21, false] ]; people = 56; // присваиваем отдельное значение console.log(people); // 56 people = ["Bob", 29, false]; // присваиваем массив console.log(people); // Bob
При создании многомерных массивов мы не ограничены только двумерными, но также можем использовать массивы больших размерностей:
Var numbers = ; numbers = ; // теперь numbers - двумерный массив numbers=; // теперь numbers - трехмерный массив numbers = 5; // первый элемент трехмерного массива равен 5 console.log(numbers);
В предыдущей статье мы поговорили о том что такое и как с ним работать. В этой статье мы поговорим уже о многомерном массиве .
Это массив, у которого один или больше элементов, являются также массивами. В зависимости от глубины объявления, в частности он может называться двумерным массивом (2 уровня) либо трёхмерным массивом (3 уровня) либо четырехмерным (4 уровня) и так далее.
Самый популярный, после одномерного массива, который чаще всего используется это двумерный массив. Именно его, изучим более подробно.
Как видите, элементы двумерного массива являются одномерные массивы. Если бы эти одномерные массивы содержали ещё массивы, то массив arr был бы уже трёхмерным.
Для примера давайте создадим три простых массивов и заполним их данными. Первого мы заполним чётными числами, второго заполним нечётными числами, а третьего какими-то произвольными данными.
//Объявляем три пустых массивов var evenNumbers = new Array(); //Переменная k - для индексов массива evenNumbers var k = 0; var oddNumbers = new Array(); //Переменная n - для индексов массива oddNumbers var n = 0; var data = new Array("car", "plane", true, 89, "m"); //Заполняем массив evenNumbers, с четными числами for(var i = 1; i
Для того чтобы посмотреть что находится внутри массива можно воспользоваться таким инструментом как console .
Например, мы хотим увидеть содержимое массива с нечётными числами oddNumbers. Для этого в коде ниже пишем такую строку:
Console.log(oddNumbers);
Чтобы увидеть результат, необходимо открыть консоль в браузере . В Google Chrome это делается так: нажимаем правый клик мыши на странице, и из контекстного меню выбираем последнею опцию “Просмотреть код”, то есть инспектор. В английской версии, эта опция называется Inspect.
И ниже появится панель инструментов разработчика. В ней необходимо перейти во вкладку Console(Консоль).
Теперь для того чтобы создать двумерный массив , необходимо объявить его, и добавить в нём одномерные массивы, которые создали выше.
//Объявляем двумерный массив twoDimens, и заполняем его var twoDimens = new Array(evenNumbers, oddNumbers, data); console.log(twoDimens);
Посмотрим в консоль содержимое данного массива.
Для начала научимся, как обратится к элементам двумерного массива .
Как и с одинарными массивами, обращение к элементам делается по их индексам.
Для примера давайте выведем на экран, элемент с индексом 3 из массива с нечётными числами(oddNumbers). Индекс одномерного массива oddNumbers в двумерном массиве twoDimens равен единице(1).
Document.write("Элемент с индексом 3 из массива нечётных чисел oddNumbers равен: " + twoDimens); // Элемент: 7
В массиве twoDimens мы обращаемся к элементу с индексом 1. Элемент, который находится под этим индексом, является массив oddNumbers. И в этом массиве мы уже обращаемся к элементу с индексом 3, который является числом 7.
Теперь приступим к самому вопросу как перебрать двумерный массив .
Перебор двумерного массива делается с помощью двойного цикла. Для примера, сделаем перебор нашего массива twoDimens.
For(var i = 0; i < twoDimens.length; i++){ for(var j = 0; j < twoDimens[i].length; j++){ document.write("
Элемент с индексом " + i + " " + j + " равен: " + twoDimens[i][j] + "
"); } }В первом цикле мы делаем перебор самого массива twoDimens. Во втором цикле мы делаем уже перебор самого элемента (массива). Сначала, переменная i равна 0. Поэтому во втором цикле мы сначала делаем перебор первого массива evenNumbers, который имеет индекс 0. И уже внутри второго цикла мы обращаемся к элементам данного массива. Таким образом: twoDimens[j]. Где j меняется от 0 до длины массива evenNumbers.
После перебора элементов из первого массива, возвращаемся к первому циклу, инкрементируем переменную i, и переходим к перебору уже второго массива oddNumbers, который имеет индекс 1. И так вот делается перебор каждого элемента двумерного массива twoDimens.
Теперь посмотрим на результат данного перебора:
Вот и все, о чем хотел я рассказать в этой статье. Теперь Вы знаете, как создать двумерный массив, как обратится к элементам двумерного массива и как перебрать двумерный массив . Надеюсь, что всё было понятно. Желаю Вам больших успехов!
- I. Перебор настоящих массивов
- Метод forEach и родственные методы
- Цикл for
- Правильное использование цикла for...in
- Цикл for...of (неявное использование итератора)
- Явное использование итератора
- Использование способов перебора настоящих массивов
- Преобразование в настоящий массив
- Замечание по объектам среды исполнения
Пример использования:
var a = ["a", "b", "c"];
a.forEach(function(entry) {
console.log(entry);
});
В общем случае использование forEach требует подключения библиотеки эмуляции es5-shim для браузеров, не имеющих нативной поддержки этого метода. К ним относятся IE 8 и более ранние версии, которые до сих пор кое-где еще используются.
К достоинствам forEach относится то, что здесь не нужно объявлять локальные переменные для хранения индекса и значения текущего элемента массива, поскольку они автоматически передаются в функцию обратного вызова (колбек) в качестве аргументов.
Если вас беспокоят возможные затраты на вызов колбека для каждого элемента, не волнуйтесь и прочитайте это .
ForEach предназначен для перебора всех элементов массива, но кроме него ES5 предлагает еще несколько полезных методов для перебора всех или некоторых элементов плюс выполнения при этом каких-либо действий с ними:
- every - возвращает true , если для каждого элемента массива колбек возвращает значение приводимое к true .
- some - возвращает true , если хотя бы для одного элемента массива колбек возвращает значение приводимое к true .
- filter - создает новый массив, включающий те элементы исходного массива, для которых колбек возвращает true .
- map - создает новый массив, состоящий из значений возращаемых колбеком.
- reduce - сводит массив к единственному значению, применяя колбек по очереди к каждому элементу массива, начиная с первого (может быть полезен для вычисления суммы элементов массива и других итоговых функций).
- reduceRight - работает аналогично reduce, но перебирает элементы в обратном порядке.
Var a = ["a", "b", "c"];
var index;
for (index = 0; index < a.length; ++index) {
console.log(a);
}
Если длина массива неизменна в течение всего цикла, а сам цикл принадлежит критическому в плане производительности участку кода (что маловероятно), то можно использовать «более оптимальную» версию for с хранением длины массива:
Var a = ["a", "b", "c"];
var index, len;
for (index = 0, len = a.length; index < len; ++index) {
console.log(a);
}
Теоретически этот код должен выполняться чуть быстрее, чем предыдущий.
Если порядок перебора элементов не важен, то можно пойти еще дальше в плане оптимизации и избавиться от переменной для хранения длины массива, изменив порядок перебора на обратный:
Var a = ["a", "b", "c"];
var index;
for (index = a.length - 1; index >= 0; --index) {
console.log(a);
}
Тем не менее, в современных движках JavaScript подобные игры с оптимизацией обычно ничего не значат.
Тем не менее, в некоторых случаях, таких как перебор разреженных массивов , for...in может оказаться полезным, если только соблюдать при этом меры предосторожности, как показано в примере ниже:
// a - разреженный массив var a = ; a = "a"; a = "b"; a = "c"; for (var key in a) { if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key