feat: добавить разделы плюсы и минусы для всех структур

RuSaG0 · RuSaG0 · commit 655cf865e9ed · 2025-07-27T21:33:54.000+03:00
diff --git a/docs/assets/index-Bjz4-Jxp.js b/docs/assets/index-Bjz4-Jxp.js
diff --git a/docs/assets/index-DpAEkq_y.css b/docs/assets/index-DpAEkq_y.css
diff --git a/docs/assets/index-QG8nhOAk.js b/docs/assets/index-QG8nhOAk.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" href="/js-data-structures/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Структуры данных для frontend-разработчика</title>
-    <script type="module" crossorigin src="/js-data-structures/assets/index-Bjz4-Jxp.js"></script>
-    <link rel="stylesheet" crossorigin href="/js-data-structures/assets/index-waQYeh51.css">
+    <script type="module" crossorigin src="/js-data-structures/assets/index-QG8nhOAk.js"></script>
+    <link rel="stylesheet" crossorigin href="/js-data-structures/assets/index-DpAEkq_y.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/structures/array/view-array.vue b/src/structures/array/view-array.vue
@@ -19,6 +19,18 @@ import FilmsList from '@/structures/array/examples/films-list.vue'
       используются для хранения коллекции элементов.
     </template>
 
+    <template #pros>
+      Когда вам нужно хранить список элементов, где важен порядок. <br />
+      Когда требуется частое выполнение операций, связанных с индексами. <br />
+      Когда вы работаете с коллекциями данных, которые требуют частых итераций или применения функций к каждому элементу.
+    </template>
+
+
+    <template #cons>
+      Производительность при вставке/удалении: вставка или удаление элементов в начале или середине массива может быть медленным, так как требует перемещения всех последующих элементов. <br />
+      Ограниченные ключи: в качестве ключей могут использоваться только числовые индексы, что ограничивает их использование для неиндексированных данных.
+    </template>
+
     <template #example1>
       <films-list />
     </template>
diff --git a/src/structures/graph/examples/friend-graph-d3.vue b/src/structures/graph/examples/friend-graph-d3.vue
@@ -41,16 +41,14 @@ function initGraph() {
     { source: 'Дарья', target: 'Фёдор' },
   ]
 
-  // Создаем SVG
   svg = d3
     .select(graph.value)
     .append('svg')
-    .attr('width', '100%') // SVG занимает 100% ширины родителя
-    .attr('height', height) // Высота задается динамически
-    .attr('viewBox', `0 0 ${width} ${height}`) // viewBox для масштабирования
-    .attr('preserveAspectRatio', 'xMidYMid meet') // Сохранение пропорций
+    .attr('width', '100%')
+    .attr('height', height)
+    .attr('viewBox', `0 0 ${width} ${height}`)
+    .attr('preserveAspectRatio', 'xMidYMid meet')
 
-  // Создаем симуляцию
   simulation = d3
     .forceSimulation(nodes)
     .force(
@@ -63,7 +61,6 @@ function initGraph() {
     .force('charge', d3.forceManyBody().strength(-300))
     .force('center', d3.forceCenter(width / 2, height / 2))
 
-  // Добавляем линии
   const link = svg
     .append('g')
     .attr('stroke', '#aaa')
@@ -72,7 +69,6 @@ function initGraph() {
     .join('line')
     .attr('stroke-width', 2)
 
-  // Добавляем узлы
   const node = svg
     .append('g')
     .attr('stroke', '#fff')
@@ -84,7 +80,6 @@ function initGraph() {
     .attr('fill', '#69b3a2')
     .call(drag(simulation))
 
-  // Добавляем метки
   const label = svg
     .append('g')
     .selectAll('text')
@@ -95,7 +90,6 @@ function initGraph() {
     .attr('dx', 18)
     .attr('dy', 4)
 
-  // Обновляем позиции при каждом тике
   simulation.on('tick', () => {
     link
       .attr('x1', (d) => d.source.x)
@@ -109,19 +103,16 @@ function initGraph() {
 }
 
 function handleResize() {
-  // Получаем новые размеры контейнера
   const containerWidth = graph.value?.clientWidth ?? width
   const containerHeight = height
 
-  // Обновляем размеры SVG
   svg
     ?.attr('width', containerWidth)
     .attr('height', containerHeight)
     .attr('viewBox', `0 0 ${containerWidth} ${containerHeight}`)
 
-  // Обновляем центр силы для симуляции
   simulation?.force('center', d3.forceCenter(containerWidth / 2, containerHeight / 2))
-  simulation?.alpha(1).restart() // Перезапускаем симуляцию для применения изменений
+  simulation?.alpha(1).restart()
 }
 
 function drag(_simulation: d3.Simulation<d3.SimulationNodeDatum, undefined> | null) {
diff --git a/src/structures/graph/view-graph.vue b/src/structures/graph/view-graph.vue
@@ -20,7 +20,7 @@ import FriendGraphD3 from './examples/friend-graph-d3.vue'
       представления социальных сетей, где узлы — это люди, а рёбра — их дружеские связи.
     </template>
 
-    <template #pros> Когда нужна визуализация данных </template>
+    <template #pros> Когда нужна связь между элементами. В рамках Frontend чаще всего применяется, когда нужна визуализация данных. </template>
 
     <template #cons>
       Одной из основных проблем графов является сложность алгоритмов обхода и поиска, особенно в
diff --git a/src/structures/map/view-map.vue b/src/structures/map/view-map.vue
@@ -18,8 +18,19 @@ import FilmMap from '@/structures/map/examples/film-map.vue'
       Карта (как и объект или хэш-таблица) — коллекция пар ключ/значение.
     </template>
 
+    <template #pros>
+      Когда вам нужно хранить данные, где каждый элемент имеет уникальный ключ. <br />
+      Когда данные имеют сложную структуру с различными свойствами. <br />
+      Когда требуется быстрый доступ к данным по ключу, а не по индексу.
+    </template>
+
+
+    <template #cons>
+      Методы итерации:  менее удобные методы для итерации по сравнению с другими структурами данных.
+    </template>
+
     <template #example1>
-      <p>Фильм со своими свойствами: название, жанр, изображение</p>
+      <p>Фильм со своими свойствами: название, жанр, изображение.</p>
       <film-map />
     </template>
   </app-section>
diff --git a/src/structures/queue/view-queue.vue b/src/structures/queue/view-queue.vue
@@ -23,13 +23,17 @@ import ToastWrapper from '@/structures/queue/examples/notifications/toast-wrappe
       Очередь — это структура данных, работающая по принципу FIFO (First In, First Out), что
       означает, что первый добавленный элемент будет первым извлечён.
     </template>
+
+    <template #pros>
+      Когда нужно следовать принципу "первый пришёл — первый вышел" (FIFO, First In First Out).
+    </template>
+
     <template #cons>
-      <p>
-        Очереди могут стать узким местом в производительности, если элементы добавляются быстрее,
-        чем обрабатываются. Это может привести к переполнению памяти, если не управлять размером
-        очереди должным образом.
-      </p>
+      Очереди могут стать узким местом в производительности, если элементы добавляются быстрее,
+      чем обрабатываются. Это может привести к переполнению памяти, если не управлять размером
+      очереди должным образом.
     </template>
+
     <template #example1>
       <p>
         Очередь может быть использована для управления порядком загрузки файлов, обеспечивая их
diff --git a/src/structures/set/view-set.vue b/src/structures/set/view-set.vue
@@ -20,7 +20,9 @@ import TagsExample from '@/structures/set/examples/tags-example.vue'
       категорий.
     </template>
 
-    <template #pros> Когда нужно часто проверять на наличие элемента в структуре (has) </template>
+    <template #pros> Когда нужно хранить уникальные элементы без повторений и быстро проверять их наличие (has). </template>
+
+    <template #cons> Не подойдет, когда нужен доступ к элементу по индексу или когда допустимы повторы. </template>
 
     <template #example1>
       <a href="https://premier.one/series/dramy/RU" target="_blank">Онлайн-кинотеатр</a>, где фильмы
diff --git a/src/structures/stack/view-stack.vue b/src/structures/stack/view-stack.vue
@@ -19,6 +19,15 @@ import ModalFlowCase from '@/structures/stack/examples/modal-flow-case.vue'
       что последний добавленный элемент будет первым извлечён. В frontend-разработке стек полезен
       для управления историей навигации или для валидации данных.
     </template>
+
+    <template #pros>
+      Когда требуется управление состоянием или выполнение операций по принципу "последний пришёл — первый вышел" (LIFO).
+    </template>
+
+    <template #cons>
+      Ограниченный доступ (доступен только последний элемент), ограниченная функциональность (не подойдет, когда нужен доступ до определенного элемента), использование памяти (если используется для большого количества данных).
+    </template>
+
     <template #example1>
       <p>Реализация потока модальных окон</p>
       <p>Представим ситуацию, когда у нас есть два модальных окна:</p>
diff --git a/src/structures/tree/view-tree.vue b/src/structures/tree/view-tree.vue
@@ -61,11 +61,11 @@ const comments = ref<Comment[]>([
     </template>
 
     <template #pros>
-      Когда иерархическая структура дерево и нужны связи потомок/родитель.
+      Когда между элементами нужна связь потомок-родитель.
     </template>
 
     <template #cons>
-      Одной из основных проблем деревьев является их балансировка. Несбалансированные деревья могут
+      Производительность: одной из основных проблем деревьев является их балансировка. Несбалансированные деревья могут
       привести к значительному снижению производительности при выполнении операций поиска, вставки и
       удаления.
       <br />
