Массивы. Одномерные массивы. Создание массива. Свойство length . Формирование массива
При разработке приложений часто нужно использовать и обрабатывать большое количество данных, которые имеют одинаковый тип или требуют группирования по некоторым критериям. Если это количество достигает нескольких десятков, сотен, тысяч и даже миллионов единиц, это требует ввода соответствующих средств группового хранения данных и доступа к этим данным. В 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.
Если нужно создать массив, не содержащий ни одного элемента (так называемый «пустой» массив), то синтаксис объявления следующий
здесь 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:
") for (var i=0; i" ") document.write("
") // 4. Создать массив из 4 строк и вывести его на экран var Seasons = new Array("Winter", "Spring", "Summer", "Autumn") document.write("Seasons:
") for (var i=0; i" ") document.write("
") // 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("
ResultArray:
") for (var i=0; i"
") document.write("
")
2.2. Литеральное создание массива. Конструкция []
Для создания массива этим способом используется следующий общий синтаксис.
var ArrayName = [ value1, value2, . valueN ] - ArrayName – имя массива;
- value1 , value2 , valueN – значения элементов массива. Значения могут быть также переменными или результатами вычислений выражений.
Для создания «пустого» массива используется следующий синтаксис
тут ArrayName – имя создаваемого массива.
// Массивы // Создание массива литеральным способом [] // 1. Создать пустой массив var EmptyArray = [] // 2. Создать массив из 5 чисел типа int var AI = [ 7, 10, 2, 5, -3 ] // 3. Вывести массив AI на экран в строку document.write("AI:
") for (var i=0; i" ") document.write("
") // 4. Создать массив из 4 строк и вывести его на экран var Seasons = [ "Winter", "Spring", "Summer", "Autumn" ] document.write("Seasons:
") for (var i=0; i" ") document.write("
") // 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("
ResultArray:
") for (var i=0; i"
") document.write("
")
AI: 7 10 2 5 -3 Seasons: Winter Spring Summer Autumn ResultArray: 15.707963267948966 19.634954084936208 65.44984694978736
3. Доступ к элементам массива. Свойства индекса массива. Добавление элементов к массиву
После объявления массива можно этот массив использовать или изменять. Доступ к отдельному элементу массива выполняется с помощью квадратных скобок []
- ArrayName – имя массива;
- index – позиция в массиве. Это может быть число, строка, символ и т.д.
После объявления массива с некоторым набором элементов в этом массиве значения index формируются в возрастающем порядке, начиная с 0 (0, 1, 2, …). Однако язык JavaScript допускает использовать в качестве index любой объект. Этим объектом может быть строка, число с плавающей запятой, целое число, символ и т.д. Например, в строке
создается ячейка со значением 2.88 но индекс ячейки будет значение ‘+’ . То есть, в обратной операции
переменная 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 color: #800000;">"
") // 2. Индекс массива - символ // 2.1. Создать пустой массив var AC = [] // 2.2. Добавить элементы к массиву AC['+'] = "Plus" AC['-'] = "Minus" AC['*'] = "Multiplication" // 2.3. Получить название по индексу '+' var sign = AC['+'] document.write("sign color: #800000;">"
") // 2.4. Получить название по несуществующему индексу sign = AC['&'] // sign = undefined document.write("sign color: #800000;">"
") // 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 color: #800000;">"
") // 3.3. Получить элемент с индексом которого нету в массиве number = A["Nine"] // number = undefined document.write("number color: #800000;">"
") // 3.4. Попробовать получить элемент с индексом, имя которого // задано некорректно (со строчной литеры) number = A["one"] // number = undefined document.write("number color: #800000;">"
")
t = 2 sign = Plus sign = undefined number = 2 number = undefined number = undefined
4. Определение размера массива. Свойство length
Для определения размера массива используется свойство length , которое возвращает целое число, равное количеству элементов массива. Обращение к свойству для массива ArrayName может быть следующим
Свойство length базируется на самом высоком значении индекса занятого элемента в массиве, а не на количестве фактически созданных элементов.
// Массивы. Получить размер массива. Свойство length // 1. Объявить пустой массив var EmptyArray = new Array() // 2. Получить и вывести размер массива EmptyArray var size = EmptyArray.length // size = 0 document.write(size + "
") // 3. Объявить массив из 3-х строк var AS = [ "December", "January", "February" ] size = AS.length // size = 3 document.write(size + "
") // 4. Добавить к массиву AS элемент AS[3] = "May" size = AS.length // size = 4 document.write(size + "
") // 5. Добавить к массиву AS элемент с нецелочисленным индексом AS['&'] = 123 size = AS.length // size = 4 - размер не изменился document.write(size + "
")
5. Формирование массива путём добавления новых элементов. Изменение длины массива
Массив можно создавать простым добавлением новых элементов в пустой или в уже существующий массив. Как известно, можно в качестве индекса использовать объект строчного, символьного типов или даже числового типа с плавающей запятой ( float ). В этом случае при добавлении элемента размер массива не будет изменен. Если к массиву добавить элемент с индексом целочисленного типа, то размер массива может измениться, если значение индекса больше или равно текущего размера массива.
При добавлении целочисленных элементов рассматриваются следующие случаи:
При добавлении одного элемента индекс этого элемента должен быть на 1 больше максимального значимого индекса в массиве.
Рисунок 1. Добавление одного элемента. Увеличение длины массива на 1 (свойство A.length)
В случае добавления нескольких целочисленных элементов, индекс добавляемого элемента как минимум на 2 больше максимального индекса массива (рисунок 2). Промежуточные элементы массива заполняются значением undefined.
Рисунок 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("
" + A.length) // 3 // 5. Добавить элемент с индексом 3 A[3] = 100 // 6. Еще раз вывести длину document.write("
" + A.length) // 4
6.2. Добавление элементов с целочисленными индексами
В примере показано увеличение размера массива при добавлении к нему элемента с индексом, который на 3 позиции превышает текущий размер массива.
// Массивы. Формирование массива // 1. Объявить массив из 3-х элементов типа Number var A = new Array(2, 8, 5) document.write("length(A) color: #008000;">// length(A) = 3 // 2. Добавить элемент с индексом 6 A[6] = 50 // 3. Вывести длину массива и сам массив document.write("
length(A) color: #008000;">// length(A) = 7 document.write("
") for (var i = 0; i" ") document.write("
")
length(A) = 3 length(A) = 7 2 8 5 undefined undefined undefined 50