Массивы

1. Массивы

Массив — структура данных для хранения и манипулирования коллекцией индексированных значений. Используются для хранения упорядоченных коллекций данных, например списка курортов, товаров, клиентов в отеле и т. п.

2. Создание

Синтаксис для создания нового массива — квадратные скобки [] со списком элементов разделенных запятыми. В массиве может храниться любое число элементов любого типа.

// Пустой массив
const arr = [];

// Массив clients с тремя элементами
const clients = ['Mango', 'Poly', 'Ajax'];

console.log(clients); // ["Mango", "Poly", "Ajax"]
Copy

3. Доступ к элементам

В качестве ключей-индексов используются цифры, индексация начинается с нуля.

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

const clients = ['Mango', 'Poly', 'Ajax'];

// Указывая в скобках индекс элемента мы получаем его значение
console.log(clients[0]); // Mango
console.log(clients[1]); // Poly
console.log(clients[2]); // Ajax
Copy

4. Переопределение

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

const clients = ['Mango', 'Poly', 'Ajax'];

// Значение элемента можно заменить
clients[0] = 'Kiwi';
console.log(clients[0]); // Kiwi

// Или добавить
clients[3] = 'Alex';
console.log(clients[3]); // Alex

console.log(clients); // ["Kiwi", "Poly", "Ajax", "Alex"]
Copy

5. Длина массива

Длина массива - динамическая величина и изменяется автоматически при добавлении или удалении элементов. Текущее число элементов массива содержится в его свойстве length.

Свойство length можно изменять напрямую.

• Если установить для свойства length значение, превышающее количество элементов в массиве, новые элементы будут добавлены с начальными значениями undefined.

• Если задать длину массива меньше чем текущее кол-во элементов в массиве то все "не влезшие" элементы в новую длину просто удаляются.

const clients = ['Mango', 'Poly', 'Ajax'];

// length вернет текущую длину массива
console.log(clients.length); // 3

clients.length = 5;
console.log(clients.length); // 5
console.log(clients); // ["Mango", "Poly", "Ajax", empty × 2]
console.log(clients[4]); // undefined

clients.length = 2;
console.log(clients); // ["Mango", "Poly"]
Copy

6. Итерация по массиву

Для итерации по массиву или перебора массива, используются циклы, в частности цикл for. Переберем массив клиентов и выведем их имена.

const clients = ['Mango', 'Ajax', 'Poly'];

for (let i = 0; i < clients.length; i += 1) {
  console.log('Logging clients: ', clients[i]);
}
Copy

С помощью цикла массив можно заполнить данными.

const numbers = [];

for (let i = 0; i < 3; i += 1) {
  numbers.push(`label-${i}`);
}

console.log('numbers: ', numbers); // ['label-0', 'label-1', 'label-2']
Copy

6.1. Цикл for...of

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

for (const variable of iterable) {
  // statement
}
Copy

• variable — для каждой итерации значение свойства присваивается переменной.

• iterable — коллекция, которая имеет перечислимые свойства.

// Итерация по массиву
const clients = ['Mango', 'Ajax', 'Poly'];

for (const client of clients) {
  console.log(client);
}

// Итерация по строке
const string = 'javascript';

for (const character of string) {
  console.log(character);
}
Copy

6.2. Инструкции break и continue

Будем искать имя клиента в массиве имен, если нашли - прервем цикл, так как нет смысла искать дальше, имена у нас уникальные.

const clients = ['Mango', 'Poly', 'Ajax'];
const clientNameToFind = 'Poly';
let message;

for (const client of clients) {
  /*
   * На каждой итерации мы будем проверять совпадает ли элемент массива с
   * именем клиента. Если совпадает то мы записываем в message сообщение
   * об успехе и делаем break чтобы не искать дальше
   */

  if (client === clientNameToFind) {
    message = 'Клиент с таким именем есть в базе данных!';
    break;
  }

  // Если они не совпадают то запишем в resultMsg сообщение об отсутствии имени
  message = 'Клиента с таким именем нету в базе данных!';
}

console.log(message); // Клиент с таким именем есть в базе данных!
Copy

Можно изначально задать message значение неудачи поиска, а в цикле перезаписать его на успех, если нашли имя. Но break все равно пригодится, так как если у нас массив из 10000 клиентов, а нужный нам стоит на позиции 2, то нет абсолютно никакого смысла перебирать оставшиеся 9998 элементов.

const clients = ['Mango', 'Poly', 'Ajax'];
const clientNameToFind = 'Poly';
let message = 'Клиента с таким именем нету в базе данных!';

for (const client of clients) {
  if (client === clientNameToFind) {
    message = 'Клиент с таким именем есть в базе данных!';
    break;
  }

  // Если не совпадает, то на этой итерации ничего не делаем
}

console.log(message); // Клиент с таким именем есть в базе данных!
Copy

Используем цикл для вывода только чисел больше определенного значения.

/*
 * Для чисел меньше чем порог срабатывает continue, выполнение тела прекращается
 * и управление передаётся на следующую итерацию.
 */
const numbers = [1, 3, 14, 18, 4, 7, 29, 6, 34];
const threshold = 15;

for (let i = 0; i < numbers.length; i += 1) {
  if (numbers[i] < threshold) {
    continue;
  }

  console.log(`Число больше чем ${threshold}: ${numbers[i]}`); // 18, 29, 34
}
Copy

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

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

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6
console.log(matrix[2][2]); // 9
Copy

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

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
let total = 0;

for (let i = 0; i < matrix.length; i += 1) {
  console.log('Подмассив матрицы matrix[i]: ', matrix[i]);

  for (let j = 0; j < matrix[i].length; j += 1) {
    console.log('Элемент подмассива матрицы matrix[i][j]: ', matrix[i][j]);
    total += matrix[i][j];
  }
}

console.log(total); // 45