5 практических способов использовать структуры данных JavaScript в реальной жизни

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

Здравствуйте, разработчики 👋,
JavaScript – это универсальный язык программирования, предлагающий широкий спектр структур данных для эффективного решения различных задач.

От сортировки и поиска до создания динамических пользовательских интерфейсов структуры данных JavaScript играют решающую роль в реальных приложениях.

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

1️⃣ Эффективная сортировка и поиск:

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

Например.
Рассмотрите сценарий, в котором у вас есть большой набор данных о продуктах и ​​вам нужно отсортировать их по цене.

Структура данных массива JavaScript может использоваться для хранения продуктов, а метод sort() может сортировать массив в порядке возрастания или убывания.

Вот пример фрагмента кода:

const products = [
  { name: 'Product A', price: 29.99 },
  { name: 'Product B', price: 19.99 },
  { name: 'Product C', price: 39.99 },
];

products.sort((a, b) => a.price - b.price);
console.log(products);

В этом примере массив товаров сортируется по их ценам, в результате чего получается следующий результат:

[
  { name: 'Product B', price: 19.99 },
  { name: 'Product A', price: 29.99 },
  { name: 'Product C', price: 39.99 }
]

Это демонстрирует, как массивы JavaScript могут эффективно обрабатывать операции сортировки.

2️⃣ Оптимизация хранения и извлечения данных:

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

Например:
Предположим, вы создаете веб-приложение, которое требует кэширования часто используемых данных. Структуру данных Map в JavaScript можно использовать для реализации простой системы кэширования.

const cache = new Map();

function fetchData(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }

  // Fetch data from the server
  const data = fetchFromServer(key);

  // Store data in cache
  cache.set(key, data);

  return data;
}

В этом примере структура данных карты действует как кеш, в котором хранятся ранее извлеченные данные.

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

3️⃣ Создание динамических пользовательских интерфейсов:

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

Например:
рассмотрите сценарий, в котором вы создаете приложение для рисования, которое позволяет пользователям отменять и повторять свои действия. Структура данных стека может использоваться для реализации функции отмены-повтора.

const undoStack = [];
const redoStack = [];

function performAction(action) {
  undoStack.push(action);
  // Perform the action here

  // Clear the redo stack
  redoStack.length = 0;
}

function undo() {
  const action = undoStack.pop();
  if (action) {
    redoStack.push(action);
    // Undo the action here
  }
}

function redo() {
  const action = redoStack.pop();
  if (action) {
    undoStack.push(action);
    // Redo the action here
  }
}

В этом примере массивы undoStack и redoStack действуют как стеки, в которых хранятся действия, выполненные пользователем.

Функция performAction() добавляет новые действия в стек отмены, а функции undo() и redo() соответствующим образом управляют стеками.

4️⃣ Реализация графических алгоритмов:

Структуры данных JavaScript полезны для решения проблем, связанных с графами, таких как анализ социальных сетей, планирование маршрута или системы рекомендаций.

Графические представления, такие как списки смежности или матрицы, наряду с алгоритмами, такими как DFS и BFS, могут использоваться эффективно.

Например:
Предположим, вы разрабатываете приложение для социальной сети и вам нужно найти кратчайший путь между двумя пользователями. Графическое представление JavaScript и алгоритм поиска в ширину (BFS) могут помочь в этом.

class Graph {
  constructor() {
    this.vertices = new Map();
  }

  addVertex(vertex) {
    this.vertices.set(vertex, []);
  }

  addEdge(from, to) {
    this.vertices.get(from).push(to);
    this.vertices.get(to).push(from);
  }

  bfs(start, target) {
    const queue = [start];
    const visited = new Set();
    const previous = new Map();

    while (queue.length > 0) {
      const current = queue.shift();

      if (current === target) {
        // Path found, reconstruct it
        const path = [target];
        let node = target;
        while (previous.has(node)) {
          node = previous.get(node);
          path.unshift(node);
        }
        return path;
      }

      for (const neighbor of this.vertices.get(current)) {
        if (!visited.has(neighbor)) {
          visited.add(neighbor);
          previous.set(neighbor, current);
          queue.push(neighbor);
        }
      }
    }

    // Path not found
    return null;
  }
}

// Example usage
const graph = new Graph();
graph.addVertex('Alice');
graph.addVertex('Bob');
graph.addVertex('Charlie');
graph.addVertex('Dave');
graph.addEdge('Alice', 'Bob');
graph.addEdge('Bob', 'Charlie');
graph.addEdge('Charlie', 'Dave');

const shortestPath = graph.bfs('Alice', 'Dave');
console.log(shortestPath);

В этом примере класс Graph представляет граф социальной сети. Метод bfs() выполняет поиск в ширину, чтобы найти кратчайший путь между двумя пользователями. Результирующий кратчайший путь возвращается в виде массива.

5️⃣ Управление сложными структурами данных:

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

Например:
Предположим, вы работаете с файлом конфигурации JSON, который содержит вложенные данные. Структуры данных JavaScript могут упростить манипулирование такими данными.

const config = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Exampleville',
    country: 'USA'
  },
  hobbies: ['reading', 'coding', 'music']
};

// Accessing nested values
console.log(config.address.city); // Output: Exampleville

// Modifying nested values
config.address.city = 'New City';
console.log(config.address.city); // Output: New City

// Adding new values
config.occupation = 'Developer';
console.log(config.occupation); // Output: Developer

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

Заключение

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

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

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

Спасибо за прочтение 🙏😇

Свяжись со мной 👇

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .