Массив — это упорядоченный список значений, обычно создаваемый с целью циклического перебора числовых значений, начиная с нуля индекса. Что вам нужно знать, так это то, что массивы — это упорядоченные по порядку наборы, а не объекты, имена свойств которых связаны со значениями в нечисловом порядке. По сути, массивы используют числа в качестве ключа поиска, в то время как объекты имеют определяемые пользователем имена свойств. JavaScript не имеет истинных ассоциативных массивов, но объекты могут использоваться для достижения функциональности ассоциативных массивов.
В следующем примере я храню четыре строки в myArray которым я могу получить доступ, используя числовой индекс. Я сравниваю myArray и сравниваю его с литералом объекта, имитирующим ассоциативный массив.
Образец: sample133.html
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html><html lang=»en»><body><script>
var myArray = [‘blue’, ‘green’, ‘orange’, ‘red’];
console.log(myArray[0]);
// Versus
var myObject = { // aka an associative array/hash, known as an object in JavaScript.
‘blue’: ‘blue’,
‘green’: ‘green’,
‘orange’: ‘orange’,
‘red’: ‘red’
};
console.log(myObject[‘blue’]);
</script></body></html>
|
Массивы могут содержать значения любого типа, и эти значения могут быть обновлены или удалены в любое время.
Если вам нужен хеш (иначе называемый ассоциативный массив), объект является наиболее близким решением.
Array() — это просто особый тип Object() . То есть экземпляры Array() в основном являются экземплярами Object() с парой дополнительных функций ( .length и встроенным числовым индексом).
Значения, содержащиеся в массиве, обычно называют элементами.
Array() Параметры
Вы можете передать значения экземпляра массива в конструктор как разделенные запятыми параметры ( new Array('foo', 'bar'); ). Конструктор Array() может принимать до 4 294 967 295 параметров.
Однако, если в конструктор Array() отправляется только один параметр и это значение является целым числом (‘1’, ‘123’ или ‘1.0’), он будет использоваться для установки length массива и будет не должен использоваться как значение, содержащееся в массиве.
Образец: sample134.html
|
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html><html lang=»en»><body><script>
var foo = new Array(1, 2, 3);
var bar = new Array(100);
console.log(foo[0], foo[2]);
console.log(bar[0], bar.length);
</script></body></html>
|
Array() Свойства и Методы
Объект Array() имеет следующие свойства (не включая унаследованные свойства и методы):
Свойства ( Array.prototype ):
Свойства и методы экземпляра объекта массива
Экземпляры объекта массива имеют следующие свойства и методы (не включая унаследованные свойства и методы):
Свойства экземпляра ( var myArray = ['foo', 'bar']; myArray.length; ):
Методы экземпляра ( var myArray = ['foo']; myArray.pop(); ):
Создание массивов
Как и большинство объектов в JavaScript, объект массива может быть создан с использованием оператора new в сочетании с конструктором Array() или с использованием литерального синтаксиса.
В следующем примере я создаю массив myArray1 с предопределенными значениями, используя конструктор Array() , а затем myArray2 используя буквенные обозначения.
Образец: sample135.html
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html><html lang=»en»><body><script>
// Array() constructor.
var myArray1 = new Array(‘blue’, ‘green’, ‘orange’, ‘red’);
console.log(myArray1);
// Array literal notation.
var myArray2 = [‘blue’, ‘green’, ‘orange’, ‘red’];
console.log(myArray2);
</script></body></html>
|
Чаще всего видят массив, определенный с использованием буквального синтаксиса, но следует отметить, что этот ярлык просто скрывает использование конструктора Array() .
На практике литерал массива — это обычно все, что вам когда-либо понадобится.
Независимо от того, как определен массив, если вы не предоставите ему какие-либо предопределенные значения, он все равно будет создан, но просто не будет содержать значений.
Добавление и обновление значений в массивах
Значение может быть добавлено в массив по любому индексу в любое время. В следующем примере мы добавляем значение в числовой индекс 50 пустого массива. Как насчет всех индексов до 50? Ну, как я уже сказал, вы можете добавить значение в массив по любому индексу в любое время. Но если вы добавите значение к числовому индексу 50 пустого массива, JavaScript заполнит все необходимые индексы перед ним undefined значениями.
Образец: sample136.html
|
1
2
3
4
5
6
7
|
<!DOCTYPE html><html lang=»en»><body><script>
var myArray = [];
myArray[50] = ‘blue’;
console.log(myArray.length);
</script></body></html>
|
Кроме того, учитывая динамическую природу JavaScript и тот факт, что JavaScript не является строго типизированным, значение массива может быть обновлено в любое время, а значение, содержащееся в индексе, может быть любым допустимым значением. В следующем примере я изменяю значение с числовым индексом 50 на объект.
Образец: sample137.html
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!DOCTYPE html><html lang=»en»><body><script>
var myArray = [];
myArray[50] = ‘blue’;
myArray[50] = { ‘color’: ‘blue’ };
console.log(myArray[50]);
// Using brackets to access the index in the array, then the property blue.
console.log(myArray[50][‘color’]);
// Using dot notation.
console.log(myArray[50].color);
</script></body></html>
|
Длина против индекса
Массив начинает индексировать значения с нуля. Это означает, что первый числовой слот для хранения значения в массиве выглядит как myArray[0] . Это может немного сбить с толку, если я создаю массив с одним значением, индекс значения равен 0, а длина массива равна 1. Убедитесь, что вы понимаете, что длина массива представляет количество значений, содержащихся в массиве , а числовой индекс массива начинается с нуля.
В следующем примере строковое значение blue содержится в массиве myArray с числовым индексом 0, но, поскольку массив содержит одно значение, длина массива равна 1.
Образец: sample138.html
|
1
2
3
4
5
6
7
|
<!DOCTYPE html><html lang=»en»><body><script>
var myArray = [‘blue’] // The index 0 contains the string value ‘blue’.
console.log(myArray[0]);
console.log(myArray.length);
</script></body></html>
|
Определение массивов с предопределенной length
Как я упоминал ранее, передавая единственный целочисленный параметр в конструктор Array() , можно заранее определить длину массивов или количество значений, которые он будет содержать. В этом случае конструктор делает исключение и предполагает, что вы хотите установить длину массива, а не предварительно заполнять массив значениями.
В следующем примере мы устанавливаем массив myArray с предопределенной длиной 3. Опять же, мы настраиваем длину массива, не передавая ему значение, которое будет сохранено в индексе 0.
Образец: sample139.html
|
1
2
3
4
5
6
7
|
<!DOCTYPE html><html lang=»en»><body><script>
var myArray = new Array(3);
console.log(myArray.length);
console.log(myArray[0]);
</script></body></html>
|
Предоставление предопределенной length даст каждому числовому индексу, вплоть до указанной длины, связанное значение undefined .
Вам может быть интересно узнать, возможно ли создать предопределенный массив, содержащий только одно числовое значение. Да, это с помощью литеральной формы var myArray = [4] .
Установка длины массива может добавлять или удалять значения
Свойство length объекта массива можно использовать для получения или установки длины массива. Как показано ранее, установка длины, превышающей фактическое количество значений, содержащихся в массиве, добавит undefined значения в массив. Чего вы можете не ожидать, так это того, что вы действительно можете удалить значения из массива, установив значение длины на число, меньшее количества значений, содержащихся в массиве.
Образец: sample140.html
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<!DOCTYPE html><html lang=»en»><body><script>
var myArray = [‘blue’, ‘green’, ‘orange’, ‘red’];
console.log(myArray.length);
myArray.length = 99;
console.log(myArray.length);
myArray.length = 1;
console.log(myArray[1]);
console.log(myArray);
</script></body></html>
|
Массивы, содержащие другие массивы (или многомерные массивы)
Поскольку массив может содержать любое допустимое значение JavaScript, массив может содержать другие массивы. Когда это сделано, массив, содержащий инкапсулированные массивы, считается многомерным массивом. Доступ к инкапсулированным массивам осуществляется с помощью цепочки скобок. В следующем примере мы создаем литерал массива, который содержит массив, внутри которого мы создаем другой литерал массива, внутри которого мы создаем другой литерал массива, содержащий строковое значение с индексом 0.
Образец: sample141.html
|
1
2
3
4
5
6
|
<!DOCTYPE html><html lang=»en»><body><script>
var myArray = [[[[‘4th dimension’]]]];
console.log(myArray[0][0][0][0]);
</script></body></html>
|
Этот пример кода довольно глупый, но вы понимаете, что массивы могут содержать другие массивы, и вы можете получать доступ к инкапсулированным массивам неограниченно долго.
Цикл над массивом, вперед и назад
Самый простой и, пожалуй, самый быстрый способ перебрать массив — это использовать цикл while.
В следующем коде мы выполняем цикл от начала индекса до конца.
Образец: sample142.html
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html><html lang=»en»><body><script>
var myArray = [‘blue’, ‘green’, ‘orange’, ‘red’];
var myArrayLength = myArray.length;
var counter = 0;
while (counter < myArrayLength) { // Run if counter is less than array length.
console.log(myArray[counter]);
counter++;
}
</script></body></html>
|
А теперь мы переходим от конца индекса к началу.
Образец: sample143.html
|
01
02
03
04
05
06
07
08
09
10
|
<!DOCTYPE html><html lang=»en»><body><script>
var myArray = [‘blue’, ‘green’, ‘orange’, ‘red’];
var myArrayLength = myArray.length;
while (myArrayLength—) { // If length is not zero, loop and subtract 1.
console.log(myArray[myArrayLength]);
}
</script></body></html>
|
Вывод
Теперь, если вам интересно, почему я здесь не показываю циклы, это потому, что хотя циклы имеют меньше движущихся частей, и я считаю, что их легче читать.
И это завершает эту статью о массивах.