M3 | WebDev
103 subscribers
105 photos
4 videos
14 links
Your guide to the world of programming 🌐🚀
Download Telegram
Стек и Очередь в JavaScript 🚀

Стек (Stack) и очередь (Queue) - это основные структуры данных, которые помогают организовывать и управлять данными в программировании. Они широко используются в алгоритмах, реализации обратного пути, обработки задач, маршрутизации и многом другом. Давайте разберемся с каждой из них.


🔄 Стек (Stack)

Стек - это структура данных, работающая по принципу LIFO (Last In, First Out), что означает: последний добавленный элемент будет первым удалён.

Операции со стеком:

1. Push (добавление элемента)
2. Pop (удаление элемента)
3. Peek (просмотр верхнего элемента)
4. Проверка, пуст ли стек

Пример использования:- Реализация undo в текстовом редакторе.
- Обратный обход деревьев или графов.
Пример кода:

class Stack {   
constructor() {
this.items = [];
}

push(element) {
this.items.push(element);
}

pop() {
if (this.isEmpty()) return "Стек пуст";
return this.items.pop();
}

peek() {
return this.items[this.items.length - 1];
}

isEmpty() {
return this.items.length === 0;
}
}


🚦 Очередь (Queue)

Очередь - структура данных, работающая по принципу FIFO (First In, First Out), что означает: первый добавленный элемент будет первым удалён.

Операции с очередью:
1. Enqueue (добавление в конец)
2. Dequeue (удаление из начала)
3. Peek (просмотр первого элемента)
4. Проверка, пуста ли очередь

Пример использования:
- Обработка задач в очереди (например, очереди печати).
- Реализация кэширования с ограничением по размеру.


Пример кода:

class Queue{
constructor() {
this.items = [];
}

enqueue(element) {
this.items.push(element);
}

dequeue() {
if (this.isEmpty()) return "Очередь пуста";
return this.items.shift();
}

peek() {
return this.items[0];
}

isEmpty() {
return this.items.length === 0;
}
}


Где используются? 🤔
- Стек: используется в рекурсивных функциях, обратных обходах, реализации стековых машин, парсерах и компиляторах.
- Очередь: применяется в обработке задач в многозадачности, моделировании систем с очередями, BFS (поиск в ширину) в графах и сетях.



Выводы 📊

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


Эти структуры данных являются фундаментальными для разработки и помогают эффективно управлять данными и задачами.
Какая временная сложность операции вставки элемента в начало очереди реализованой на массиве?
Anonymous Quiz
10%
O(1)
60%
O(n)
10%
O(log n)
20%
O(n^2)
Пост про Spread и Rest операторы в JavaScript 🌟

JavaScript предоставляет два мощных оператора для работы с массивами, объектами и параметрами функций — Spread (...) и Rest (...). Несмотря на одинаковый синтаксис, они используются для разных целей.

🟢 Spread оператор (...)

Spread оператор расширяет (разворачивает) элементы массива или свойства объекта:

1. Массивы:

    const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]


2. Объекты:
    const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }


3. Функции:
    const numbers = [1, 2, 3];
Math.max(...numbers); // 3

🔴 Rest оператор (...)

Rest оператор собирает оставшиеся аргументы в массив. Используется в функциях и деструктуризации:

1. Параметры функций:

    function sum(...args) {
return args.reduce((acc, val) => acc + val, 0);
}
sum(1, 2, 3); // 6


2. Деструктуризация:
    const [first, ...rest] = [1, 2, 3, 4]; // first = 1, rest = [2, 3, 4]
const { a, ...otherProps } = { a: 1, b: 2, c: 3 }; // a = 1, otherProps = { b: 2, c: 3 }


📝 Когда использовать?

- Spread: когда нужно разворачивать массивы или объекты.
- Rest: когда нужно собрать неограниченное количество аргументов или оставшиеся элементы.

Использование этих операторов помогает сделать код более гибким и удобным в работе с данными! 🎉

Тэги: #javascript
Что будет выведено в консоль? 🤔
Anonymous Quiz
13%
3 2 true
38%
3 3 false
0%
3 2 false
50%
undefined 2 true
Please open Telegram to view this post
VIEW IN TELEGRAM
Big O Notation: Основы и Основные Временные Сложности

Big O Notation
используется для оценки эффективности алгоритмов. Это способ описания, как время выполнения или использование памяти алгоритма масштабируется с увеличением объема входных данных. 🚀

Что такое Big O Notation? 🤔

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

Основные Временные Сложности:

1. O(1) — Константное время ⚡️

Алгоритм всегда выполняется за одно и то же время, независимо от размера данных.
Пример: Доступ к элементу массива по индексу.
Используется в: Хэш-таблицы, кеширование, массивы.

2. O(log n) — Логарифмическое время 🔍

Время выполнения увеличивается пропорционально логарифму от объема данных.
Пример: Бинарный поиск.
Используется в: Поиск в отсортированных структурах данных, бинарные деревья поиска.

3. O(n) — Линейное время 📊

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

4. O(n log n) — Линейно-логарифмическое время 🌀

Алгоритмы, которые сортируют данные, часто имеют такую сложность.
Пример: Быстрая сортировка (Quick Sort), пирамидальная сортировка (Heap Sort).
Используется в: Сортировка массивов и списков.

5. O(n^2) — Квадратичное время 🏋️‍♂️

Время выполнения растет пропорционально квадрату размера данных.
Пример: Пузырьковая сортировка (Bubble Sort).
Используется в: Алгоритмы, которые требуют вложенных циклов для сравнения каждого элемента.

6. O(2^n) — Экспоненциальное время 🌌

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

7. O(n!) — Факториальное время 🚨

Время выполнения растет факториально.
Пример: Генерация всех возможных перестановок.
Используется в: Очень редких случаях; задачи оптимизации и комбинаторики.

Как использовать Big O Notation?

Big O Notation помогает выбрать оптимальный алгоритм для задачи, понимая, как он масштабируется с ростом объема данных. Используйте алгоритмы с меньшей сложностью, чтобы улучшить производительность и сократить время выполнения. 💡
Какова временная сложность следующего алгоритма?
Anonymous Quiz
20%
A) O(1)
60%
B) O(n)
10%
C) O(log n)
10%
D) O(n^2)
Что такое React и его базовые концепции ⚛️

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

🔍 Компоненты

Компоненты
— это независимые, переиспользуемые части интерфейса. Они могут быть функциональными или классовыми (но предпочтение отдается функциональным). Каждый компонент возвращает фрагмент JSX-разметки, которая затем рендерится на странице.

const Welcome = ({ name }) => <h1>Привет, {name}!</h1>;

📦 Props

Props
(сокр. от "properties") — это данные, которые передаются от родительского компонента к дочернему. Они позволяют компонентам взаимодействовать друг с другом и настраивать поведение.

const UserCard = ({ name, age }) => (
<div>
<h2>{name}</h2>
<p>Возраст: {age}</p>
</div>
);

🧠 State

State
— это данные, которые управляются внутри компонента и могут изменяться с течением времени. Состояние позволяет компоненту реагировать на действия пользователя, обновляя интерфейс.

const Counter = () => {
const [count, setCount] = React.useState(0);

return (
<div>
<p>Счет: {count}</p>
<button onClick={() => setCount(count + 1)}>Увеличить</button>
</div>
);
};

📝 JSX

JSX
— это синтаксическое расширение JavaScript, похожее на HTML. Оно используется для описания структуры пользовательского интерфейса и является ключевой частью React.

const Element = <h1>Привет, мир!</h1>;

🔄 Виртуальный DOM

Виртуальный DOM в React
— это способ ускорить обновление веб-страницы.
Вместо того чтобы сразу менять реальную страницу, React сначала делает изменения в своей "копии" страницы (виртуальном DOM).
Потом он быстро сравнивает эту копию с предыдущей и изменяет только те части реальной страницы, которые действительно изменились.

Тэги : #react #javascript
🕵️‍♂️ Какой фреймворк предпочитаете вы?
Anonymous Poll
75%
React
8%
Angular
17%
Vue
0%
Svelte
🌟 Основы React: Ключи, Рендеринг, События и Хуки 🌟

Сегодня мы рассмотрим четыре важных концепции: ключи, рендеринг, события и хуки. 🚀


🔑 Ключи (Keys)

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

Пример:

const items = ['Яблоко', 'Банан', 'Апельсин'];

function FruitList() {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}

🔍 Обратите внимание: Не используйте индексы массива как ключи в случаях, когда порядок элементов может измениться. Это может привести к неожиданным ошибкам и проблемам с производительностью.



🔄 Рендеринг (Rendering)

Рендеринг в React состоит из трех основных этапов:

1. Триггеринг рендеринга (Triggering a Render): Рендеринг компонента начинается, когда изменяется состояние (с помощью useState) или свойства компонента. Это может быть вызвано пользовательским действием, изменением данных или любым другим событием.

2. Рендеринг компонента (Rendering the Component): React создает виртуальное представление компонента и сравнивает его с предыдущим виртуальным DOM, чтобы определить, какие изменения необходимо внести. Этот процесс называется "реконсиляцией".

3. Коммитинг в DOM (Committing to the DOM): После того как React вычисляет необходимые изменения, он обновляет реальный DOM, применяя только те изменения, которые необходимы. Это позволяет минимизировать количество операций с реальным DOM, что повышает производительность.

💡 Советы: Для оптимизации рендеринга используйте React.memo и useCallback, чтобы предотвратить ненужные повторные рендеры.



🎉 События (Events)

Обработка событий в React похожа на обычный JavaScript, но с некоторыми особенностями. События обрабатываются с использованием обработчиков, переданных в компоненты.

Пример:

function Button() {
const handleClick = () => {
alert('Кнопка нажата! 🎉');
};

return <button onClick={handleClick}>Нажми меня!</button>;
}

⚙️ Замечание: В React вы используете camelCase для именования обработчиков событий (например, onClick вместо onclick).


🪝 Хуки (Hooks)

Хуки — это функции, которые позволяют вам использовать состояние и другие возможности React без написания классов. Вот два самых основных хука: useState и useEffect. 🔧

1. `useState`: Позволяет добавлять состояние в функциональные компоненты. 💬

Пример:


   import { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Счетчик: {count} 📈</p>
<button onClick={() => setCount(count + 1)}>Увеличить </button>
</div>
);
}


2. `useEffect`: Позволяет выполнять побочные эффекты в функциональных компонентах, такие как запросы к серверу и подписки. 🌐

Пример:


   import { useEffect, useState } from 'react';

function FetchDataComponent() {
const [data, setData] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []); // Пустой массив означает, что эффект выполнится только один раз после первого рендера

return <div>{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Загрузка... '}</div>;
}


🚀 Заключение :

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

Тэги : #javascript #react