Глава 6: Структуры Данных: Как Организовать Информацию.

В предыдущих главах мы научились работать с отдельными значениями (числа, строки, булевы) и выполнять код последовательно, принимать решения и повторять действия. Но большинство реальных задач требуют работы с коллекциями данных – списками, наборами, парами “ключ-значение”. Для этого в JavaScript существуют мощные структуры данных.

Термин: Структура данных (Data Structure) – это способ организации, управления и хранения данных, который позволяет эффективно выполнять операции над ними.

Наиболее фундаментальными структурами данных в JavaScript являются массивы (Arrays) и объекты (Objects).

6.1. Массивы (Arrays): Работа с коллекциями

Термин: Массив (Array) – это упорядоченная коллекция элементов. Каждый элемент в массиве имеет свой индекс – числовое значение, определяющее его позицию в массиве. Индексация в JavaScript, как и во многих других языках программирования, начинается с нуля (0).

Создание массива:

Массивы создаются с помощью квадратных скобок []. Элементы внутри скобок разделяются запятыми.

javascript

// Пустой массив

let emptyArray = [];

// Массив строк

let fruits = ["яблоко", "банан", "апельсин"];

// Массив чисел

let numbers = [1, 2, 3, 4, 5];

// Массив смешанных типов (хотя обычно стараются делать массивы однотипными для читаемости)

let mixedArray = ["текст", 10, true, null];

Доступ к элементам массива:

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

javascript

let fruits = ["яблоко", "банан", "апельсин"];

console.log(fruits[0]); // Выведет: яблоко (первый элемент)

console.log(fruits[1]); // Выведет: банан (второй элемент)

console.log(fruits[2]); // Выведет: апельсин (третий элемент)

// Можно получить длину массива

console.log(fruits.length); // Выведет: 3

// Доступ к последнему элементу:

console.log(fruits[fruits.length – 1]); // Выведет: апельсин

Изменение элементов массива:

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

javascript

let colors = ["красный", "зеленый", "синий"];

colors[1] = "желтый"; // Заменяем "зеленый" на "желтый"

console.log(colors); // Выведет: ["красный", "желтый", "синий"]

Добавление и удаление элементов (основные методы):

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

push(element): Добавляет один или несколько элементов в конец массива. Возвращает новую длину массива.javascriptlet numbers = [1, 2];

numbers.push(3); // numbers теперь: [1, 2, 3]

numbers.push(4, 5); // numbers теперь: [1, 2, 3, 4, 5]

let newLength = numbers.push(6);

console.log(numbers); // [1, 2, 3, 4, 5, 6]

console.log(newLength); // 6

pop(): Удаляет последний элемент из массива и возвращает его.javascriptlet fruits = ["яблоко", "банан", "апельсин"];

let lastFruit = fruits.pop();

console.log(fruits); // ["яблоко", "банан"]

console.log(lastFruit); // "апельсин"

unshift(element): Добавляет один или несколько элементов в начало массива. Возвращает новую длину массива.javascriptlet numbers = [2, 3];

numbers.unshift(1); // numbers теперь: [1, 2, 3]

numbers.unshift(0, -1); // numbers теперь: [-1, 0, 1, 2, 3]

let newLength = numbers.unshift(-2);

console.log(numbers); // [-2, -1, 0, 1, 2, 3]

console.log(newLength); // 6

shift(): Удаляет первый элемент из массива и возвращает его.javascriptlet fruits = ["яблоко", "банан", "апельсин"];

let firstFruit = fruits.shift();

console.log(fruits); // ["банан", "апельсин"]

console.log(firstFruit); // "яблоко"

Методы для работы с частью массива:

splice(startIndex, deleteCount, item1, item2, …): Очень мощный метод, который может удалять, добавлять или заменять элементы в массиве.startIndex: Индекс, с которого начинать изменения.

deleteCount: Количество элементов для удаления (0 – если нужно только добавить).

item1, item2, …: Элементы для добавления (если они есть).

Возвращает массив удаленных элементов (если они были).

javascriptlet numbers = [1, 2, 3, 4, 5];

// Удалить 2 элемента, начиная с индекса 2

let removed = numbers.splice(2, 2);

console.log(numbers); // [1, 2, 5] (удалены 3 и 4)

console.log(removed); // [3, 4]

// Вставить элементы, не удаляя ничего, начиная с индекса 1

numbers.splice(1, 0, "a", "b");

console.log(numbers); // [1, "a", "b", 2, 5]

// Заменить 1 элемент, начиная с индекса 3, на новый элемент

numbers.splice(3, 1, "X");

console.log(numbers); // [1, "a", "b", "X", 5]

slice(startIndex, endIndex): Создает новый массив, содержащий копию части исходного массива. Не изменяет исходный массив.startIndex: Индекс, с которого начинать копирование.

endIndex (необязательный): Индекс, ДО которого включать элементы. Если не указан, копирует до конца массива.

javascriptlet letters = ["a", "b", "c", "d", "e"];

// Скопировать элементы с индекса 1 до индекса 4 (не включая 4)

let subset1 = letters.slice(1, 4);

console.log(subset1); // ["b", "c", "d"]

console.log(letters); // ["a", "b", "c", "d", "e"] (исходный массив не изменился)

// Скопировать элементы с индекса 2 до конца

let subset2 = letters.slice(2);

console.log(subset2); // ["c", "d", "e"]

// Использование отрицательных индексов (отсчет с конца)

let lastTwo = letters.slice(-2); // Два последних элемента

console.log(lastTwo); // ["d", "e"]

Другие полезные методы массивов:

concat(array1, array2, …): Объединяет два или более массивов в новый массив.javascriptlet arr1 = [1, 2];

let arr2 = [3, 4];

let combined = arr1.concat(arr2, [5, 6]);

console.log(combined); // [1, 2, 3, 4, 5, 6]

console.log(arr1); // [1, 2] (исходный массив не изменился)

Синтаксис с spread-оператором (…) (let combined = […arr1, …arr2];) часто предпочтительнее для объединения массивов, так как он более современный и гибкий.

join(separator): Объединяет все элементы массива в одну строку, используя указанный separator. Если separator не указан, используется запятая.javascriptlet words = ["Hello", "world", "!"];

let sentence = words.join(" "); // Объединяем через пробел

console.log(sentence); // "Hello world !"

let numbersString = [1, 2, 3].join("-");

console.log(numbersString); // "1-2-3"

includes(element): Проверяет, есть ли элемент в массиве. Возвращает true или false.javascriptlet numbers = [1, 2, 3, 4];

console.log(numbers.includes(3)); // true

console.log(numbers.includes(5)); // false

indexOf(element): Возвращает индекс первого вхождения элемента в массив. Если элемент не найден, возвращает -1.javascriptlet fruits = ["apple", "banana", "apple", "orange"];

console.log(fruits.indexOf("banana")); // 1

console.log(fruits.indexOf("apple")); // 0 (индекс первого вхождения)

console.log(fruits.indexOf("grape")); // -1

reverse(): Инвертирует порядок элементов в массиве на месте (изменяет исходный массив) и возвращает ссылку на измененный массив.javascriptlet letters = ["a", "b", "c"];

letters.reverse();

console.log(letters); // ["c", "b", "a"]

Итерация по массивам (уже видели for…of, но есть и другие способы):

С помощью for цикла:javascriptlet animals = ["cat", "dog", "elephant"];

for (let i = 0; i < animals.length; i++) {

console.log(`Animal at index ${i}: ${animals[i]}`);

}

forEach(callbackFunction): Выполняет функцию callbackFunction один раз для каждого элемента массива. callbackFunction получает три аргумента: element, index, array.javascriptlet fruits = ["apple", "banana", "cherry"];

fruits.forEach(function(fruit, index, arr) {

console.log(`Fruit at index ${index}: ${fruit}`);

// console.log(arr); // Можно получить доступ к самому массиву

});

// С использованием стрелочной функции:

fruits.forEach((fruit, index) => {

console.log(`Fruit #${index + 1}: ${fruit}`);

});

6.2. Объекты (Objects): Хранение данных в формате “ключ-значение”

Термин: Объект (Object) – это неупорядоченная коллекция свойств. Каждое свойство состоит из ключа (key) и значения (value), которые связаны парой двоеточия :. Ключи обычно являются строками (или символами), а значения могут быть любого типа данных (включая другие объекты или массивы).

Объекты используются для моделирования сущностей реального мира (например, человек, автомобиль, книга) или для группировки связанных данных.

Создание объекта:

Объекты создаются с помощью фигурных скобок {}.

javascript

// Пустой объект

let emptyObject = {};

// Объект "человек"

let person = {

name: "Алиса", // Свойство: ключ "name", значение "Алиса"

age: 30, // Свойство: ключ "age", значение 30

isStudent: false, // Свойство: ключ "isStudent", значение false

city: "Москва", // Свойство: ключ "city", значение "Москва"

hobbies: ["чтение", "путешествия"] // Свойство: значение – массив

};

// Объект "автомобиль"

let car = {

brand: "Toyota",

model: "Camry",

year: 2022,

// Свойство, значение которого – другой объект

engine: {

type: "Petrol",

volume: 2.5

// Свойство, значение которого – функция (метод объекта)

start: function() {

console.log("Двигатель запущен!");

}

};

Доступ к свойствам объекта:

Есть два основных способа:

Точечная нотация (Dot Notation): объект.ключ (наиболее распространенный и предпочтительный способ).javascriptconsole.log(person.name); // Выведет: Алиса

console.log(person.age); // Выведет: 30

console.log(car.brand); // Выведет: Toyota

console.log(car.engine.type); // Доступ к свойству вложенного объекта. Выведет: Petrol

Скобочная нотация (Bracket Notation): объект[ключ] (обязательна, если ключ – переменная или содержит специальные символы/пробелы).javascriptconsole.log(person["name"]); // Выведет: Алиса

console.log(person["city"]); // Выведет: Москва

// Пример, когда скобочная нотация обязательна:

let propertyName = "age";

console.log(person[propertyName]); // Работает! Получим 30.

// person.propertyName выдало бы ошибку или undefined,

// так как искалось бы свойство с ключом "propertyName".

// Если ключ содержит пробелы или спецсимволы, скобочная нотация необходима:

let anotherPerson = {

"first name": "Иван",

"last-name": "Петров"

};

console.log(anotherPerson["first name"]); // "Иван"