Массивы
1. Массивы
Массив — структура данных для хранения и манипулирования коллекцией индексированных значений. Используются для хранения упорядоченных коллекций данных, например списка курортов, товаров, клиентов в отеле и т. п.
2. Создание
Синтаксис для создания нового массива — квадратные скобки [] со списком элементов разделенных запятыми. В массиве может храниться любое число элементов любого типа.
// Пустой массив
const arr = [];
// Массив clients с тремя элементами
const clients = ['Mango', 'Poly', 'Ajax'];
console.log(clients); // ["Mango", "Poly", "Ajax"]
Copy3. Доступ к элементам
В качестве ключей-индексов используются цифры, индексация начинается с нуля.
Чтобы получить нужный элемент из массива, после имени переменной которая содержит массив, указывается индекс элемента в квадратных скобках. На место такого выражения будет подставлено значение хранящееся в элементе массива.
const clients = ['Mango', 'Poly', 'Ajax'];
// Указывая в скобках индекс элемента мы получаем его значение
console.log(clients[0]); // Mango
console.log(clients[1]); // Poly
console.log(clients[2]); // Ajax
Copy4. Переопределение
Элементы массива можно заменять и добавлять, обращаясь к элементу массива по индексу.
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"]
Copy5. Длина массива
Длина массива - динамическая величина и изменяется автоматически при добавлении или удалении элементов. Текущее число элементов массива содержится в его свойстве 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"]
Copy6. Итерация по массиву
Для итерации по массиву или перебора массива, используются циклы, в частности цикл 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']
Copy6.1. Цикл for...of
Инструкия for...of создает цикл, перебирающий итерируемые объекты, такие как массивы и строки. Тело цикла будет выполняться для значения каждого отдельного элемента. Это хорошая замена циклу for если не нужен доступ к счетчику итерации.
for (const variable of iterable) {
// statement
}
Copyvariable— для каждой итерации значение свойства присваивается переменной.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);
}
Copy6.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
}
Copy7. Многомерные массивы
Массивы могут содержать другие массивы как элементы. Это можно использовать для создания матриц.
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); // 45Last updated