Мастерство в работе с массивами и объектами JavaScript

Введение

В этом Лаборатории мы продолжаем следовать за Алексом по их пути веб-разработчика в технологической стартап. Сцена развивается в рабочем пространстве разработочной команды, где Алекс должен улучшить трекер личных финансов, добавив возможность обрабатывать несколько финансовых записей. Эта важная функция требует от Алексе углубиться в массивы и объекты JavaScript, сохраняя каждую финансовую запись в виде объекта внутри массива. Цель состоит в создании динамичного и интерактивного приложения, которое не только отслеживает, но и эффективно организует финансовые данные пользователей. С помощью этого занятия Алекс стремится дать пользователям четкое представление о своих финансовых операциях, тем самым сделав приложение более полезным и привлекательным.

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

Точки знания:

Обработка массивов (создание, обход, добавление элементов)
Объекты (создание объектов, доступ и установка свойств)

Функции

В этой лаборатории будут представлены некоторые базовые фрагменты кода на JavaScript, которые помогут вам понять концепции. Вы можете запускать эти фрагменты кода в консоли браузера или в среде Node.js.

Откройте консоль браузера, щелкнув правой кнопкой мыши по веб-странице и выбрав пункт "Просмотреть код" или нажав клавишу F12.
Откройте среду Node.js, выполнив команду node в терминале.

Функция

Функция в JavaScript - это блок кода, предназначенный для выполнения определенной задачи или вычисления значений. Функции определяются с использованием ключевого слова function:

function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("Alice")); // вывод: "Hello, Alice!"

В этом примере функция greet принимает параметр name и возвращает приветствие.

Стрелочная функция

Стрелочные функции, появившиеся в ES6, предоставляют более краткий способ записи функций. Они особенно полезны для анонимных функций-выражений:

const greet = (name) => "Hello, " + name + "!";
console.log(greet("Bob")); // вывод: "Hello, Bob!"

Стрелочные функции автоматически связывают значение this текущего контекста, что полезно для функций обратного вызова и цепочки вызовов методов.

Операции с массивами

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

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

let fruits = ["Apple", "Orange", "Cherry"];

Массивы JavaScript индексируются с нуля: первый элемент массива имеет индекс 0, второй - индекс 1 и так далее, а последний элемент имеет значение свойства length массива минус 1.

Каждый индекс соответствует уникальному элементу массива.

Связь индекса и элемента массива

Итак, как мы читаем элементы массива?

Обход массива

Используйте метод forEach для обхода массива.

Метод forEach принимает функцию обратного вызова, которая принимает два параметра: value и index.

Например, чтобы вывести в консоль каждый элемент массива fruits:

fruits.forEach(function (value, index) {
  console.log(index, value);
});

Обход массива с использованием forEach

Добавление элементов

Используйте метод push для добавления элемента в конец массива.

Например, добавим виноград в массив fruits.

fruits.push("Grape");
console.log(fruits);

Добавление элемента в массив

Объекты

Объекты являются фундаментальными строительными блоками в JavaScript и используются для хранения пар ключ-значение.

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

let person = {
  name: "Alice",
  age: 30
};

Доступ к свойствам и их установка

Вы можете получить доступ к свойствам объекта с использованием точки (.) или квадратных скобок ([]):

console.log(person.name); // Использование точки

person["age"] = 31; // Использование квадратных скобок для установки свойства
console.log(person.age);

Пример свойств объекта JavaScript

После того, как мы освоили базовое использование массивов и объектов, давайте приступим к усовершенствованию кода проекта.

Создание и хранение финансовых записей

В этом шаге вы будете работать вместе с Алексом, чтобы создать структуру для хранения финансовых записей в виде объектов в массиве. Эта структура станет основой системы управления данными трекера финансов, позволяя динамически обновлять и манипулировать финансовыми записями.

Сначала определим, как выглядит финансовая запись. Каждая запись будет иметь описание, сумму и тип (доход или расход). Откройте script.js и создайте массив для хранения этих записей:

let records = [];

Далее создайте функцию для добавления новых записей в этот массив. Каждая запись будет объектом:

const addRecord = (description, amount, type) => {
  records.push({ description, amount, type });
};

На странице еще ничего не видно, потому что мы не закончили функцию, которая слушает событие отправки формы.

Определите form.addEventListener("submit", (e) => {}) в ~/project/script.js, чтобы слушать взаимодействия при нажатии кнопки "Добавить".

// Слушатель события отправки формы для добавления новой записи
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const description = document.getElementById("description").value;
  const amount = document.getElementById("amount").value;
  const type = document.getElementById("type").value;
  addRecord(description, amount, type);
});

Метод preventDefault() интерфейса Event сообщает агенту пользователя, что если событие не обрабатывается явно, его стандартное действие не должно выполняться, как обычно.
Свойство value интерфейса HTMLDataElement возвращает строку, отражающую значение атрибута HTML.

На этом этапе, если добавить функцию addRecord и в нее добавить console.log(records);, можно увидеть, что данные, добавленные в запись, будут записаны в records.

Если мы хотим отобразить записи, добавленные в бухгалтерскую книгу, нам нужно создать функцию renderRecords, но перед этим мы должны познакомиться с шаблонными строками.

Шаблонная строка

Шаблонные строки определяются с использованием обратных апострофов () и могут содержать占位符 в виде${expression}, гдеexpression` может быть любым допустимым выражением на JavaScript.

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // Вывод: Hello, Alice!

Пример кода с шаблонной строкой

Интерполяция переменных

Шаблонные строки удобно встраивают значения переменных в строку, упрощая конструирование динамической строковой информации.

let age = 25;
let message = `She is ${age} years old.`;
console.log(message); // Вывод: She is 25 years old.

Пример интерполяции переменных

Обработка многострочных строк

В традиционном JavaScript обработка многострочных строк часто требует использования обратных слэшей или конкатенации строк. Шаблонные строки предлагают более краткий способ обработки многострочного текста.

let poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
console.log(poem);

Пример многострочной строки

Отображение финансовых записей

Теперь, когда Алекс настроил способ хранения финансовых записей, следующим шагом является динамическое отображение этих записей на веб-странице. Вы узнаете, как перебирать массив финансовых записей и отображать каждую из них как часть интерфейса пользователя трекера финансов.

Затем в script.js создайте функцию для отображения этих записей:

const renderRecords = () => {
  recordsList.innerHTML = "";
  records.forEach((record, index) => {
    const recordElement = document.createElement("div");
    recordElement.classList.add("record-item");
    recordElement.innerHTML = `
                ${record.description} - ${record.amount} (${record.type}) <button onclick="deleteRecord(${index})">Delete</button>
            `;
    recordsList.appendChild(recordElement);
  });
};

После добавления тестовых записей вызовите renderRecords, чтобы увидеть их отображение на странице:

renderRecords();

Эта функция перебирает массив financialRecords, создает новый абзац для каждой записи и добавляет его в указанный контейнер на веб-странице.

Резюме

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

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

Массивы и объекты