Массивы в javascript примеры. Многомерные массивы в javascript и несколько способов их сортировки. Использование способов перебора настоящих массивов

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

Предположим, что переменная matrix представляет собой массив массивов целых чисел. Каждый из элементов matrix[j] представляет собой массив чисел. Для обращения к отдельному числу используем запись: matrix[j][k].

Пример. Используем для создания таблицы умножения двухмерный массив.

var matrix = new Array(10); // в матрице 10 строчек

for(var j = 0; j < matrix.length; j++)

matrix [j] = new Array(10); //d каждой строчке создали 10 столбцов

for(var row = 0; row < matrix.length; row++) {

for(col = 0; col < matrix .length; col++) {

matrix = row*col; // заполнение элементов массива

var rezult = matrix ; // результат умножения 24

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

mеnu = nеw Аrrаy();

mеnu = nеw Аrrаy ("Опция 1.1", " Опция 1.2", ", " Опция 1.3");

mеnu = nеw Аrrаy ("Опция 2.1", " Опция 2 . 2 ");

mеnu = nеw Аrrаy("Опция 3.1", "Опция 3.2", "Опция 3.3", "Опция 3.4");

Для обращения к 1-й опции 2-го подменю, нужно написать:

menu // значение равно "Опция 2.1";

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

mеnu = nеw Аrrау()

menu = nеw Аrrау ("Меню1", "Меню2", "МенюЗ");

menu = nеw Аrrау ();

menu = nеw Аrrау ("Опция 1.1". " Опция 1.2", " Опция 1.3");

menu = nеw Аrrау ("Опция 2.1", " Опция 2 . 2 ");

menu = nеw Аrrау ("Опция 3.1", " Опция 3 . 2 " , " Опция З.3", " Опция 3.4");

menu // значение равно "Меню2"

menu // значение равно "Меню3"

menu // значение равно " Опция 2.1"

menu // значение равно " Опция 3.2 "

Методы работы с массивами

В данном разделе рассмотрим методы, с помощью которых можно манипулировать элементами массивов.

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

var arr = ; // задан массив из трех элементов

var str = arr.join(); // значение str равно "12,23,38"

str = arr.join("; "); // str == "12; 23; 38"

Как уже отмечалось ранее, метод Array.join() является обратным по отношению к строковому методу String.split(), разбивающему строки на элементы массива.

reverse() – метод, изменяющий порядок расположения элементов в массиве на противоположный. Данный метод не создает нового массива, а изменяет их порядок в исходном массиве.

var arr = nеw Аrrау (1,2,3); // arr = 1, arr = 2, arr = 3

arr.reverse(); // arr = 3, arr = 2,arr = 1

var str = arr.jоin(); // str == "3,2,1"

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

var arr = nеw Аrrаy("bаnаnа", "сhеrrу", "аррlе");

var str = arr.join(", "); // str == " аррlе, bаnаnа, сhеrrу"

Если в составе массива имеется неопределенный элемент, он переносится в конец массива.

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

Произведем сортировку в числовом порядке.

var arr = ;

arr.sort(); // в алфавитном порядке: 11111, 2222, 333, 44

arr.sort(function(first,second) { //

return first - second; }); // Числовой порядок: 44, 333, 2222, 11111

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

Определяя другие функции сортировки, можно осуществлять самые разнообразные способы сортировки.

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

var arr = ;

arr.соncаt(4, 5) // результат

arr. соncаt (); // результат

arr. соncаt (,) // результат

arr. соncаt (4, ]) // результат ]

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

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

var arr = ;

arr.sliсе(0,3); // вернет

arr. sliсе (3); // вернет

arr. sliсе (1,-1); // вернет

arr. sliсе (-3,-2); // вернет

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

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

var arr = ;

arr.splice(4); // вернет ; arr станет равен

arr.splice(1,2); // вернет ; arr станет равен

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

var arr = ;

arr.splice(2,0,"ab","cd"); /* вернет ; arr станет равен */

arr.splice(2,2,,3); /* вернет ["ab","cd"]; arr станет равен ,3,33,44,55] */

Следует учитывать тот факт, что метод splice() аргументы-массивы не разбивает на отдельные вставляемые элементы, а вставляет сам массив.

push() и pop() – методы, позволяющие использовать массивы как стеки. Метод push() добавляет в конец массива новые элементы и возвращает новую длину массива. Метод pop() удаляет последний элемент в массиве и возвращает в качестве результата работы удаленное значение.

Оба метода изменяют исходный массив. При использовании в коде комбинации методов push() и pop() в JavaScript можно с помощью массива создать стек с правилом обслуживания: «первым вошел – последним вышел».

vаr stасk = ; // пустой стек

stасk.push(1,2); // массив: вернет 2

stасk. рор (); // массив: вернет 2

stасk.push(3); // массив: вернет 2

stасk.рор(); // массив: вернет 3

stасk.push(); // массив: ] вернет 2

stасk. рор () // массив: вернет

stасk. рор (); // массив: вернет 1

unshift() и shift() – методы, работающие почти так же, как push() и pop(), но они вставка и удаление элементов осуществляется не в конце массива, а в начале.

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

var arr = ; // arr:

arr.unshift(1); // arr: вернет 1

arr.unshift(22); // arr: вернет 2

arr.shift(); // arr: вернет 22

arr.unshift(3,); // arr:,1] вернет 3

arr.shift(); // arr:[,1] вернет 3

arr.shift(); // arr: вернет

arr.shift(); // arr: вернет 1

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

toString() и toLocaleString() - методы, преобразующие каждый из элементов массива в строку и выводящие список полученных строк через запятую. Метод toString(), как уже отмечалось, имеется у любого объекта в JavaScript, и у массива в том числе. Обратите внимание, что в результате работы методов вокруг значений массива не остается ни квадратных скобок, ни каких-то других разделителей.

ToString() // вернет "1,2,3"

["а", "b", "с"].tоString() // вернет "а,b,c"

].tоString() // вернет "1,2,с"

Метод toString() вернет такую же строку, как и метод join() в случае его вызова без параметров.

toLocaleString() – метод, при котором итоговые строки конкатенируются с использованием разделителя, специфического для региона.

Пример 1. Создание циклического баннера (слайд-шоу).

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

Пример 2. Вывод случайного афоризма на странице. Случайный афоризм появляется при каждом обновлении страницы.

Объект Date

В JavaScript объект Date предназначен для работы со значениями даты и времени. Создается экземпляр объекта конструктором Date() с использованием оператора new.

var nеw_day = new Date(); /* Создан экземпляр объекта, в котором хранится информация о текущем времени и дате (считываются показания системного времени компьютера). */

var Christmas = new Date(2016, 11, 25); /*Создан экземпляр объекта с датой Рождества. Номера месяцев отсчитываются с нуля, поэтому декабрь по порядку имеет номер 11 */

Методы, определенные для объекта Date(), позволяют устанавливать и сохранять различные значения времени и даты, выполнять над ними ряд действий с использованием либо локального времени, либо времени по Гринвичу (GMT).

Christmas.setFullYear(xmas.getFullYear() + 1); /* Дата Рождества в следующем году */

var wееkdау = Christmas.getDay(); // День недели Рождества.

document.write("Сегодня: " + nеw_day.toLocaleString()); // Строковое значение текущей даты и времени.

В JavaScript для объекта Date() определены функции (вызываются не через объект Date(), поэтому не методы, а функции) для преобразования даты, которая задана в числовой форме или в виде строки, во внутреннее представление в миллисекундах, использующееся в некоторых операциях с датами.

Конструктор при создании нового экземпляра объекта Date() можно использовать в следующих вариантах:

nеw Dаtе(); /*Конструктор Date() без аргументов создает объект, у которого значение равно текущей дате и времени. */

nеw Dаtе(число_миллисекунд); /* В конструкторе указано единственное числовое значение, оно используется как представление даты в миллисекундах, что аналогично такому значению, которое вернет метод getTime().*/

new Dаtе(дата_строковое_представление); /* Если в конструкторе указан один строковый аргумент, его рассматривают как строковое представление даты в формате, который принимает метод Date.parse(). */

new Dаtе(год, месяц, день, часы, минуты, секунды, миллисекунды); /* Конструктору может быть передано от двух до семи числовых аргументов, указывающих отдельные поля даты и времени. Кроме первых двух полей, указывающих год и месяц, все прочие аргументы являются необязательными. */

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

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

число_миллисекунд - количество миллисекунд в промежутке между нужной датой и полуночью 01 января 1970 года (UTC). Скажем, если аргумент равен 5000, будет создана дата, обозначающая пять секунд после полуночи 01.01.1970.

дата_строковое_представление – аргумент задает в виде строки дату и необязательное время. Строка должна быть указана в формате, понятном для метода Date.parse().

год - четыре цифры года. Для совместимости с более ранними реализациями JavaScript, если значение аргумент находится между 0 и 99, к его значению добавляется число 1900.

день - целое число от 1 до 31, означающее день месяца. Аргумент необязателен.

часы – целое число от 0, означающего полночь, до 23. Аргумент необязателен.

минуты – целое число от 0 до 59. Аргумент необязателен.

секунды. Секунды в минутах, указанные в виде целого от 0 до 59. Необязательный аргумент.

миллисекунды – количество миллисекунд, указанное в виде целого числа в пределах от 0 до 999. Аргумент необязателен.

В этой статье мы рассмотрим стандартные JavaScript массивы с числовыми индексами. Массивы объявляются с помощью квадратных скобок:

var fruits = ["Apple", "Orange", "Donkey"]

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

var fruits = ["Apple", "Orange", "Donkey"] alert(fruits) alert(fruits) alert(fruits)

Мы также можем получить длину массива JavaScript :

var fruits = ["Apple", "Orange", "Donkey"] alert(fruits.length)

Упс! Мы создали массив с двумя фруктами и ослом. Теперь нам нужно удалить осла.

Методы pop и push

Метод pop в JavaScript удаляет элемент массива и возвращает его.

В следующем примере показано, как «Осел » извлекается из массива:

var fruits = ["Apple", "Orange", "Donkey"] alert("Я удаляю "+fruits.pop()) // Теперь у нас только ["Apple","Orange"] alert("Теперь размер массива: "+fruits.length) // осел удален

Обратите внимание, что pop изменяет сам массив.

Аналог pop — это метод push , который добавляет элемент в массив. Например, мы забыли добавить персик:

var fruits = ["Apple", "Orange"] fruits.push("Peach"); // теперь у нас есть ["Apple", "Orange", "Peach"] alert("Последний элемент:"+fruits)

1. Создайте массив styles с элементами “Jazz ”, “Blues ”;
2. Добавьте значение «Rock’n’Roll «;
3. Замените второе значение с конца значением «Classic «. У вас должен получиться массив: “Jazz ”, ”Classic ”, ”Rock’n’Roll ”. Код должен работать для любой длины массива;
4. Извлеките последнее значение из массива и выведите его через alert .

Решение

// 1 var styles = ["Jazz", "Bluez"] // 2 styles.push("Rock"n"Roll") // или: styles = "Rock"n"Roll" // 3 styles = "Classic" // 4 alert(styles.pop())

Методы shift/unshift

Методы shift/unshift работают с концом массива, но вы также можете использовать shift , чтобы сдвинуть элементы вверх (первое значение массива удаляется со сдвигом элементов ). Метод unshift позволяет в JavaScript добавить элемент в массив с конца:

var fruits = ["Apple", "Orange"] var apple = fruits.shift() // теперь у нас остался только ["Orange"] fruits.unshift("Lemon") // теперь мы имеем ["Lemon", "Orange"] alert(fruits.length) // 2

И shift , и unshift могут работать с несколькими элементами одновременно:

var fruits = ["Apple"] fruits.push("Orange","Peach") fruits.unshift("Pineapple","Lemon") // теперь массив выглядит так: ["Pineapple", "Lemon", "Apple", "Orange", "Peach"]

Задание для самостоятельного выполнения

Напишите код, чтобы вывести через alert случайное значение из массива arr :

var arr = ["Plum","Orange","Donkey","Carrot","JavaScript"]

Примечание: Код для получения случайного числа от минимального до максимального значения (включительно ) следующий:

var rand = min + Math.floor(Math.random()*(max+1-min))

Решение

Нам нужно извлечь случайное число от 0 до arr.length-1 (включительно ):

var arr = ["Plum","Orange","Donkey","Carrot","JavaScript"] var rand = Math.floor(Math.random()*arr.length) alert(arr)

Перебор массива

В JavaScript перебор массива осуществляется с помощью цикла for :

var fruits = ["Pineapple", "Lemon", "Apple", "Orange", "Peach"] for(var i=0; i

Задание для самостоятельного выполнения

Создайте функцию find(arr,value) , которая находит значение в заданном массиве и возвращает его индекс или -1 , если значение не найдено.

Например:

arr = [ "test", 2, 1.5, false ] find(arr, "test") // 0 find(arr, 2) // 1 find(arr, 1.5) // 2 find(arr, 0) // -1

Решение

Возможное решение может выглядеть так:

function find(array, value) { for(var i=0; i

Но это неверно, потому что == не определяет разницу между 0 и false .

Более корректно при работе с массивами в JavaScript использовать === . Кроме того новейший стандарт ES5 содержит функцию Array#indexOf . С ее помощью мы можем определить функцию следующим образом:

function find(array, value) { if (array.indexOf) return array.indexOf(value) for(var i=0; i

Еще разумнее было бы определить find через условие, чтобы проверить, существует ли метод indexOf .

Задание для самостоятельного выполнения

Создайте функцию filterNumeric(arr) , которая принимает массив и возвращает новый массив, содержащий только числовые значения из arr .

Пример того, как это должно работать:

arr = ["a", 1, "b", 2]; arr = filterNumeric(arr); // теперь arr =

Решение

Решение заключается в том, чтобы перебрать массив и добавить значения в новый массив, если они являются числовыми.

join и split

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

Он объединяет массив в строку, используя заданный разделитель:

var fruits = ["Lemon","Apple","Orange","Peach"]; var str = fruits.join(", "); alert(str);

Обратное преобразование легко выполняется с помощью метода split :

var fruits = "Apple,Orange,Peach"; var arr = fruits.split(","); // arr содержит теперь ["Apple", "Orange", "Peach"] alert(arr);

Задание для самостоятельного выполнения

Объект включает в себя свойство className , которое содержит имена классов, разделенные пробелами:

Напишите функцию addClass(obj, cls) , которая добавляет класс cls , но только если он не существует:

ddClass(obj, "new") // obj.className="open menu new" addClass(obj, "open") // без изменений (class already exists) addClass(obj, "me") // obj.className="open menu new me" alert(obj.className) //

Решение

Нужно разделить className и цикл на части. Если класс не найден, тогда он добавляется.

Цикл немного оптимизирован для увеличения производительности:

function addClass(elem, cls) { for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) { if (c[i] == cls) return } elem.className += " "+cls } var obj = { className: "open menu" } addClass(obj, "new") addClass(obj, "open") alert(obj.className) // open menu new

В приведенном выше примере переменная c определяется в начале цикла, и для ее последнего индекса задается значение i .

Сам цикл обрабатывается в обратном направлении, заканчиваясь условием i>=0 . Потому что i>=0 проверить быстрее, чем i . Что в JavaScript ускоряет поиск в массиве.

Использование length для обрезки массива

С помощью свойства length можно обрезать массив следующим образом:

Вы задаете длину, и браузер обрезает массив.

Array представляет собой объект, что из этого следует

На самом деле в JavaScript Array — это Object , дополненный автоматической установкой длины и специальными методами.

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

Нечисловые ключи массива

Ключи — это числа, но они могут иметь любые имена:

arr = arr = 5 arr.prop = 10 // не делайте так

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

Например, push/pop работают только с крайними элементами массива, поэтому они невероятно быстры.

push работает только с концом:

var arr = ["My", "array"] arr.push("something") alert(arr) // строка "array"

Методы shift/unshift медленные, потому что им нужно изменить нумерацию всего массива. Метод splice также может привести к изменению нумерации:

Таким образом, shift/unshift работают медленнее, чем push/pop . Чем больше массив, тем больше времени занимает в JavaScript сортировка массива.

Задание для самостоятельного выполнения

Какой получится результат? Почему?

arr = ["a", "b"] arr.push(function() { alert(this) }) arr() // ?

Решение

Поскольку массивы являются объектами, arr.. фактически является вызовом метода объекта, таким как objmethod:

arr() // то же самое что arr() // синтаксически это неправильно, но концептуально то же самое: arr.2() // переписанное в том же стиле, что и obj.method() this = arr в таком случае передается функции, поэтому выводится содержимое arr. arr = ["a", "b"] arr.push(function() { alert(this) }) arr() // "a","b",функция

Разреженные массивы, описание length

Свойство length позволяет получить не размер массива в JavaScript , а последний индекс + 1 . Это важно, если речь идет о разреженных массивах, с «промежутками » в индексах.

В следующем примере мы добавим два элемента в пустые fruits , но значение length останется 100 :

var fruits = // пустой массив fruits = "Peach" fruits = "Apple" alert(fruits.length) // 100 (но элементов в массиве всего 2)

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

var fruits = // пустой массив fruits = "Peach" fruits = "Apple" alert(fruits) // ,Peach,Apple (или что-то вроде этого)

Но массив — это объект с двумя ключами. Недостающие значения не занимают места.

Разреженные массивы ведут себя причудливо, когда к ним применяются методы массива. Они понятия не имеют о том, что индексы пропущены:

var fruits = fruits = "Peach" fruits = "Apple" alert(fruits.pop()) // выталкиваем "Apple" (на индекс 9) alert(fruits.pop()) // выталкиваем не заданный элемент (на индекс 8)

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

Удаление из массива

Как мы знаем, массивы — это объекты, поэтому мы могли бы использовать delete , чтобы удалить значение:

var arr = ["Go", "to", "home"] delete arr // теперь arr = ["Go", undefined, "home"] alert(arr) // не задано

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

Оператор delete удаляет пару ключ-значение, и это все. Естественно, так как массив — это только хэш, позиция удаленного элемента становится undefined .

Чаще всего нам нужно удалить элемент, не оставляя «дыр » между индексами. Существует еще один метод, который поможет нам в этом.

Метод splice

Метод splice может удалять элементы и заменять их в JavaScript многомерных массивах. Его синтаксис:

arr.splice(index, deleteCount[, elem1, ..., elemN])

Удаляет элемент deleteCount , начиная с index , а затем вставляет на его место elem1, …, elemN .

Давайте рассмотрим несколько примеров:

var arr = ["Go", "to", "home"] arr.splice(1, 1) // удалить 1 элемент, начиная с индекса 1 alert(arr.join(",")) // ["Go", "home"] (1 элемент удален)

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

var arr = ["Go", "to", "home"] arr.splice(0, 1) // удаляем 1 элемент, начиная с индекса 0 alert(arr) // "to" стал первым элементом

В следующем примере показано, как заменять элементы:

Метод splice возвращает массив удаленных элементов:

var arr = ["Go", "to", "home", "now"]; // удаляем 2 первых элемента var removed = arr.splice(0, 2) alert(removed) // "Go", "to" <-- массив удаленных элементов splice может вставлять элементы, задайте 0 для deleteCount. var arr = ["Go", "to", "home"]; // со второй позиции // удаляем 0 // и вставляем "my", "sweet" arr.splice(2, 0, "my", "sweet") alert(arr) // "Go", "to", "my", "sweet", "home"

Данный метод также может использовать отрицательный индекс, который отсчитывается с конца массива:

var arr = // для элемента -1 (предпоследнего) // удаляем 0 элементов, // и вставляем 3 и 4 arr.splice(-1, 0, 3, 4) alert(arr) // 1,2,3,4,5

Задание для самостоятельного выполнения

Объект содержит свойство className , в котором содержатся имена классов, разделенные пробелами:

var obj = { className: "open menu" }

Напишите функцию removeClass(obj, cls) , которая удаляет класс cls , если он задан:

removeClass(obj, "open") // obj.className="menu" removeClass(obj, "blabla") // без изменений (класса для удаления не существует)

Решение

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

Немного оптимизируем это:

function removeClass(elem, cls) { for(var c = elem.className.split(" "), i=c.length-1; i>=0; i--) { if (c[i] == cls) c.splice(i,1) } elem.className = c.join(" ") } var obj = { className: "open menu" } removeClass(obj, "open") removeClass(obj, "blabla") alert(obj.className) // menu

В приведенном выше примере переменная c задана в начале цикла, и для i задан ее последний индекс.

Сам цикл выполняется в обратном направлении, заканчиваясь условием i>=0 . Это сделано потому, что i>=0 проверяется быстрее, чем i . Что ускоряет поиск свойства в c .

Метод slice

Можно извлечь часть массива с помощью метода slice(begin[, end]): var arr = ["Why", "learn", "JavaScript"]; var arr2 = arr.slice(0,2) // принимает 2 элемента, начиная с 0 alert(arr2.join(", ")) // "Why, learn"

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

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

var arr = ["Why", "learn", "JavaScript"]; var arr2 = arr.slice(1) // принимает все элементы, начиная с 1 alert(arr2.join(", ")) // "learn, JavaScript"

Метод поддерживает отрицательные индексы, так же, как String#slice .

Метод reverse

Еще один полезный метод — reverse . Предположим, я хочу получить последнюю часть домена, например, “com ” от “my.site.com ”. Вот как это можно сделать:

var domain = "my.site.com" var last = domain.split(".").reverse() alert(last)

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

Вы можете создавать более длинные вызовы, например, reverse()0] arr.sort() alert(arr) // 1, 15, 2

Запустите приведенный выше код. Вы получите порядок 1 , 15 , 2 . Это потому, что метод преобразует все в строку и использует по умолчанию лексикографический порядок.

В предыдущей статье мы поговорили о том что такое и как с ним работать. В этой статье мы поговорим уже о многомерном массиве .

Это массив, у которого один или больше элементов, являются также массивами. В зависимости от глубины объявления, в частности он может называться двумерным массивом (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.

Теперь посмотрим на результат данного перебора:

Вот и все, о чем хотел я рассказать в этой статье. Теперь Вы знаете, как создать двумерный массив, как обратится к элементам двумерного массива и как перебрать двумерный массив . Надеюсь, что всё было понятно. Желаю Вам больших успехов!

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

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

Как создаются многомерные массивы и для чего они нужны?

Для начала стоит вспомнить, как создается обычный одномерный массив.

var array =

А теперь запомните, что многомерный массив – это массив массивов. Соглашусь, звучит, как тавтология. Однако прочитайте определение еще раз. Действительно, многомерный массив состоит из определенного количества вложенных в него .

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

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

Выглядеть все это будет следующим образом:

var results = [ ["Маркус", 333], ["Наташа", 211], ["Алексей", 124] ];

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

При этом обращение к элементам происходит через двойной оператор .

Для закрепления материала проанализируйте небольшую программку.

Значение results =

Массивы являются достаточно удобным средством для хранения упорядоченных комплексных данных при их обработке. К тому же работать с ними очень удобно и при этом скорость их обработки достаточно высокая.

Способы сортировки данных

Для массивов в JavaScript-е предусмотрен встроенный метод под названием sort () . Данный инструмент очень гибок. И сейчас объясню почему.

Если вы используете метод без параметров, то он автоматически упорядочивает подмассивы по первому элементу в алфавитном порядке. Так, при вызове results. sort () разбираемый объект будет выглядеть вот так:

Алексей,124

Маркус,333

Наташа,211

А если поменять в каждом вложенном массиве элементы местами, то получится:

124,Алексей

211,Наташа

333,Маркус

При этом для сравнения все элементы временно преобразовываются к строкам.

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

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

В качестве примера давайте первоначальный массив results отсортируем по очкам. При чем результаты будут упорядочены от большего к меньшему. Это можно реализовать двумя способами.

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

Рекордная таблица:

А вот во втором способе оставил логику сортировки нетронутой, но использовал дополнительно другой метод – reverse () . Как видно из названия, reverse изменяет порядок следования элементов на противоположный.

Поэтому функция sort () будет выглядеть следующим образом:

1 2 3 4 5

function RecordSort(a, b) { if (a > b) return 1; else if (a < b) return -1; else return 0; }

function RecordSort(a, b) { if (a > b) return 1; else if (a < b) return -1; else return 0; }

А вот после нее добавим указанный выше метод.

Вывод производится аналогичным образом.

Хочу обратить ваше внимание на один важный момент. При использовании данных функций все изменения происходят с массивом, к которому вы их применяете. Таким образом, если вам необходимо сохранить первоначальный вид данных, то создавайте копию, а после редактируйте уже ее.

Ну, вот я и рассказал о многомерных массивах и их сортировке. Если вам понравилась статья, то подписывайтесь на блог и читайте другие не менее интересные публикации. Буду благодарен за репосты. До новых встреч!

Пока-пока!

С уважением, Роман Чуешов

• I. Перебор настоящих массивов
  1. Метод forEach и родственные методы
  2. Цикл for
  3. Правильное использование цикла for...in
  4. Цикл for...of (неявное использование итератора)
  5. Явное использование итератора
• 1. Использование способов перебора настоящих массивов
  2. Преобразование в настоящий массив
  3. Замечание по объектам среды исполнения

I. Перебор настоящих массивов

На данный момент есть три способа перебора элементов настоящего массива:

1. метод Array.prototype.forEach ;
2. классический цикл for ;
3. «правильно» построенный цикл for...in .

Кроме того, в скором времени, с появлением нового стандарта ECMAScript 6 (ES 6), ожидается еще два способа:

1. цикл for...of (неявное использование итератора);
2. явное использование итератора.

1. Метод forEach и родственные методы

Если ваш проект рассчитан на поддержку возможностей стандарта ECMAScript 5 (ES5), вы можете использовать одно из его нововведений - метод forEach .

Пример использования:
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, но перебирает элементы в обратном порядке.

2. Цикл for

Старый добрый for рулит :

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 подобные игры с оптимизацией обычно ничего не значат.

3. Правильное использование цикла for...in

Если вам посоветуют использовать цикл for...in , помните, что перебор массивов - не то, для чего он предназначен . Вопреки распространенному заблуждению цикл for...in перебирает не индексы массива, а перечислимые свойства объекта.

Тем не менее, в некоторых случаях, таких как перебор разреженных массивов , 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 <= 4294967294) { console.log(a); } }
В данном примере на каждой итерации цикла выполняется две проверки:

1. то, что массив имеет собственное свойство с именем key (не наследованное из его прототипа).
2. то, что key - строка, содержащая десятичную запись целого числа, значение которого меньше 4294967294 . Откуда берется последнее число? Из определения индекса массива в ES5, из которого следует, что наибольший индекс, который может иметь элемент в массиве: (2^32 - 2) = 4294967294 .

Конечно, такие проверки отнимут лишнее время при выполнении цикла. Но в случае разреженного массива этот способ более эффективен, чем цикл for , поскольку в этом случае перебираются только те элементы, которые явно определены в массиве. Так, в примере выше будет выполнено всего 3 итерации (для индексов 0, 10 и 10000) - против 10001 в цикле for .

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

Function arrayHasOwnIndex(array, key) { return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key <= 4294967294; }
Тогда тело цикла из примера значительно сократится:

For (key in a) { if (arrayHasOwnIndex(a, key)) { console.log(a); } }
Рассмотренный выше код проверок является универсальным, подходящим для всех случаев. Но вместо него можно использовать более короткую версию, хотя формально и не совсем правильную, но, тем не менее, подходящую для большинства случаев:

For (key in a) { if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) { console.log(a); } }

4. Цикл for...of (неявное использование итератора)

ES6, пока все еще пребывающий в статусе черновика , должен ввести в JavaScript итераторы.

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

1. done (boolean) - принимает значение true , если итератор достиг конца итерируемой последовательности. В противном случае имеет значение false .
2. value - определяет значение, возвращаемое итератором. Может быть не определено (отсутствовать), если свойство done имеет значение true .

Многие встроенные объекты, в т.ч. настоящие массивы, имеют итераторы по умолчанию. Простейший способ применения итератора в настоящих массивах - использовать новую конструкцию for...of .

Пример использования for...of:

Var val; var a = ["a", "b", "c"]; for (val of a) { console.log(val); }
В приведенном примере цикл for...of неявно вызывает итератор объекта Array для получения каждого значения массива.

5. Явное использование итератора

Итераторы можно также использовать и явно, правда, в этом случае код становится значительно сложнее, по сравнению с циклом for...of . Выглядит это примерно так:

Var a = ["a", "b", "c"]; var it = a.entries(); var entry; while (!(entry = it.next()).done) { console.log(entry.value); }
В данном примере метод Array.prototype.entries возвращает итератор, который используется для вывода значений массива. На каждой итерации entry.value содержит массив вида [ключ, значение] .

II. Перебор массивоподобных объектов

Кроме настоящих массивов, в JavaScript встречаются также массивоподобные объекты . С настоящими массивами их роднит то, что они имеют свойство length и свойства с именами в виде чисел, соответствующие элементам массива. В качестве примеров можно назвать DOM коллекции NodeList и псевдомассив arguments , доступный внутри любой функции/метода.

1. Использование способов перебора настоящих массивов

Как минимум большинство, если не все, способы перебора настоящих массивов могут быть применены для перебора массивоподобных объектов.

Конструкции for и for...in могут быть применены к массивоподобным объектам точно тем же путем, что и к настоящим массивам.

ForEach и другие методы Array.prototype также применимы к массивоподобным объектам. Для этого нужно использовать вызов Function.call или Function.apply .

Например, если вы хотите применить forEach к свойству childNodes объекта Node , то это делается так:

Array.prototype.forEach.call(node.childNodes, function(child) { // делаем что-нибудь с объектом child });
Для удобства повторного использования этого приема, можно объявить ссылку на метод Array.prototype.forEach в отдельной переменной и использовать ее как сокращение:

// (Предполагается, что весь код ниже находится в одной области видимости) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) { // делаем что-нибудь с объектом child });
Если в массивоподобном объекте имеется итератор, то его можно использовать явно или неявно для перебора объекта таким же способом, как и для настоящих массивов.

2. Преобразование в настоящий массив

Есть также еще один, очень простой, способ перебора массивоподобного объекта: преобразовать его в настоящий массив и использовать любой из рассмотренных выше способов перебора настоящих массивов. Для преобразования можно использовать универсальный метод Array.prototype.slice , который может быть применен к любому массивоподобному объекту. Делается это очень просто, как показано в примере ниже:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Например, если вы хотите преобразовать коллекцию NodeList в настоящий массив, вам нужен примерно такой код:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Update : Как было отмечено в комментариях rock и torbasow , в ES6 вместо Array.prototype.slice можно использовать более наглядный метод Array.from .

3. Замечание по объектам среды исполнения

Если вы применяете методы Array.prototype к объектам среды исполнения (таких как DOM коллекции), то вы должны иметь в виду, что правильная работа этих методов не гарантирована во всех средах исполнения (в т.ч. в браузерах). Это зависит от поведения конкретного объекта в конкретной среде исполнения, если точнее, от того, как в этом объекте реализована абстрактная операция HasProperty . Проблема в том, что сам стандарт ES5 допускает возможность неправильного поведения объекта по отношению к этой операции (см. §8.6.2).

Поэтому важно тестировать работу методов Array.prototype в каждой среде исполнения (браузере), в которой планируется использование вашего приложения.