Массивы.Способы создания массива. Управление массивами. Методы.

16.11.2022 10:09

Массивы

    Объекты позволяют хранить данные со строковыми ключами. Но довольно часто мы понимаем, что нам необходима упорядоченная коллекция данных, в которой присутствуют 1-й, 2-й, 3-й элементы и т.д. Например, она понадобится нам для хранения списка чего-либо: пользователей, товаров, элементов HTML и т.д.

    В этом случае использовать объект неудобно, так как он не предоставляет методов управления порядком элементов. Мы не можем вставить новое свойство «между» уже существующими. Объекты просто не предназначены для этих целей.

    Массив представляет собой набор элементов, доступ к которым осуществляется по индексу. Создается массив с помощью оператора new и конструктора массива - функции Array.

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

 

var users = new Array("Artem", "Irina", "Sergey", "Boris");

 

    Это выражение создает массив из 4 элементов (пользователей). Все элементы массива, пронумерованы, начиная с нуля. Для получения значения элемента массива необходимо задать имя массива и в квадратных скобках порядковый номер элемента (его индекс). Так, для получения доступа к первому элементу нашего массива, можно написать так:

 
users[0]
 
    Значения массива не обязательно задавать сразу. Можно, например, воспользоваться такой конструкцией:
 
var users = new Array(4);
 
    Это выражение так же создает массив из 4 элементов, но значения элементов можно указать позже с помощью оператора присваивания:
 
users[0] = "Artem";
users[1] = "Irina";
users[2] = "Sergey";
users[3] = "Boris";
 
    И, наконец, можно использовать конструктор без параметра:
 
var users = new Array();
 

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

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

 
users[users.length-1];
 

    Т.е. сначала определяется длина массива (users.length), затем, помня о том, что нумерация элементов начинается с нуля, из длины вычитается 1 и полученное значение используется в качестве индекса массива.

 

Многомерные массивы

    Массивы могут содержать элементы, которые тоже являются массивами. Это можно использовать для создания многомерных массивов, например, для хранения матриц:

 
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
 
alert( matrix[1][1] ); // 5, центральный элемент
 

toString

    Массивы по-своему реализуют метод toString, который возвращает список элементов, разделённых запятыми.

 
Например:
 
let arr = [1, 2, 3];
 
alert( arr ); // 1,2,3
alert( String(arr) === '1,2,3' ); // true
 
Давайте теперь попробуем следующее:
 
alert( [] + 1 ); // "1"
alert( [1] + 1 ); // "11"
alert( [1,2] + 1 ); // "1,21"
 
Массивы не имеют ни Symbol.toPrimitive, ни функционирующего valueOf, они реализуют только преобразование toString, таким образом, здесь [] становится пустой строкой, [1] становится "1", а [1,2] становится "1,2".
 
Когда бинарный оператор плюс "+" добавляет что-либо к строке, он тоже преобразует это в строку, таким образом:
 
alert( "" + 1 ); // "1"
alert( "1" + 1 ); // "11"
alert( "1,2" + 1 ); // "1,21"
 

    Не сравнивайте массивы при помощи ==. В JavaScript, в отличие от некоторых других языков программирования, массивы не следует сравнивать при помощи оператора ==.

    У этого оператора нет специального подхода к массивам, он работает с ними, как и с любыми другими объектами.

    Давайте ещё раз напомним правила:

  • Два объекта равны друг другу == только в том случае, если они ссылаются на один и тот же объект.
  • Если один из аргументов == является объектом, а другой – примитивом, то объект преобразуется в примитив, как описано в главе Преобразование объектов в примитивы.
  • …За исключением null и undefined, которые равны == друг другу и ничему больше.

    Оператор строгого равенства === ещё проще, так как он не преобразует типы.

    Итак, если мы всё же сравниваем массивы с помощью ==, то они никогда не будут одинаковыми, если только мы не сравним две переменные, которые ссылаются на один и тот же массив

Например:

 
alert( [] == [] ); // false
alert( [0] == [0] ); // false
 
    Технически эти массивы являются разными объектами. Так что они не равны. Оператор == не выполняет поэлементное сравнение.
 
    Сравнение с примитивами также может дать, казалось бы, странные результаты:
 
alert( 0 == [] ); // true
 
alert('0' == [] ); // false
 

    Здесь, в обоих случаях, мы сравниваем примитив с объектом массива. Таким образом, массив [] преобразуется в примитив с целью сравнения и становится пустой строкой ''.

    Затем продолжается процесс сравнения с примитивами:

 
// после того, как [] был преобразован в ''
alert( 0 == '' ); // true, так как '' преобразуется в число 0
 
alert('0' == '' ); // false, нет преобразования типов, разные строки
 
concat()
 
    Два массива можно объединить в один с помощью метода concat(). Пусть у нас имеются два массива a и b и мы хотим их объединить в один - c:
    
    var a=new Array(1, 2, 3);
    var b=new Array(4, 5, 6);
    var c=a.concat(b);   
 
    На выходе получим массив c из шести элементов: 1, 2, 3, 4, 5, 6.
 
sort()
 
    Массивы можно сортировать с помощью метода sort(), правда только в лексикографическом порядке (т.е. как строки). Например, если применить метод sort() к массиву с именами:
 
var users = new Array("Artem", "Irina", "Sergey", "Boris");
var c=users.sort();
 
то на выходе получим массив c: Artem, Boris, Irina, Sergey.
 
    А если применить метод sort() к массиву с числами:
 
var n = new Array(11, 12, 10, 107, 3, 20, 25, 101, 14, 34, 44, 5, 4);
var c=n.sort();
 
то на выходе получим следующий массив: 10, 101, 107, 11, 12, 14, 20, 25, 3, 34, 4, 44, 5. Т.е. элементы сравниваются как строки, а не как числа. Так что применять метод sort() надо осторожно.
 
 

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

    Код html-страницы будет следующим:

 
<html>
  <head>
    <title>javascript массивы</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body onload="showDay();">
  </body>
</html>
 
    В данном случае мы будем использовать событие Load (документ загружается в браузер) и его обработчик - onload. Иными словами, наша функция showDay() должна сработать при загрузке документа.
 
    Теперь напишем саму функцию showDay():
 
function showDay() {
    var nDays=new Array("воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница",
                                                                                     "суббота");
    var now=new Date();
    var day=now.getDay();
    var iDay=nDays[day];
    var str="Сегодня - " + iDay;
    document.write(str);
}
 
    Рассмотрим подробнее. Сначала, мы создаем массив nDays из семи элементов (в предыдущем уроке, мы говорили о том, что нулю соответствует воскресенье):
 
var nDays=new Array("воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница",
                                                                                     "суббота");
 
 
    Затем, из текущей даты получаем текущий день недели (его числовой эквивалент):
 
var now=new Date();
var day=now.getDay();
 
и используем его в качестве индекса для обращения к элементу массива:
 
var iDay=nDays[day];
 
    Последние две строки формируют и отображают результат:
 
    var str="Сегодня - " + iDay;
    document.write(str);
 
    Попробуйте работу сценария в действии и убедитесь, что при загрузке страницы, появляется фраза типа "Сегодня - пятница".

    

 

Итого

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

    Объявление:

 

// квадратные скобки (обычно)

let arr = [item1, item2...];

 

// new Array (очень редко)

let arr = new Array(item1, item2...);

 

    Вызов new Array(number) создаёт массив с заданной длиной, но без элементов.

    Свойство length отражает длину массива или, если точнее, его последний цифровой индекс плюс один. Длина корректируется автоматически методами массива.

    Если мы уменьшаем length вручную, массив укорачивается.

    Получение элементов:

    Мы можем получить элемент по его индексу, например arr[0].

    Также мы можем использовать метод at(i) для получения элементов с отрицательным индексом, для отрицательных значений i, он отступает от конца массива. В остальном он работает так же, как arr[i], если i >= 0.

    Мы можем использовать массив как двустороннюю очередь, используя следующие операции:

push(...items)добавляет items в конец массива.

pop() удаляет элемент в конце массива и возвращает его.

shift() удаляет элемент в начале массива и возвращает его.

unshift(...items) добавляет items в начало массива.

    Чтобы пройтись по элементам массива:

for (let i=0; i<arr.length; i++) – работает быстрее всего, совместим со старыми браузерами.

for (let item of arr) – современный синтаксис только для значений элементов (к индексам нет доступа).

for (let i in arr) – никогда не используйте для массивов!

Назад