Структуры данных в JavaScript | Odessa Frontend Meetup #13

2
Временная сложность
алгоритма
O(n)

3
алгоритма
O(n)

4
алгоритма
O(n)
4 операции

5
O-нотация - обозначение, описывающее
зависимость количества операций от
входных данных

6
O-нотация - обозначение, описывающее
зависимость количества операций от
входных данных
O(n)

7
Big O
[4, 6, 6, 7, 4, 7, 8, 5]

8
Big O
O(n)
[4, 6, 6, 7, 4, 7, 8, 5]

9
Big O
O(n)
[4, 6, 6, 7, 4, 7, 8, 5]
8
O(n/2)

10
Big O
O(n)
[4, 6, 6, 7, 4, 7, 8, 5]
8
O(n/2) 4
O( 𝑛2
)

11
Big O
O(n)
[4, 6, 6, 7, 4, 7, 8, 5]
8
O(n/2) 4
O( 𝑛2
) 64
O(2 𝑛
)

12
Big O
O(n)
[4, 6, 6, 7, 4, 7, 8, 5]
8
O(n/2) 4
O( 𝑛2
) 64
O(2 𝑛
) 256

13
Основные обозначения Big O

14
Big-O Complexity Chart
bigocheatsheet.com

15
Алгоритмы VS Структуры данных
Имплементация

16

17
O(n)
O(n) O(n) O(n) O(n)

18
O(n)
O(n) O(n) O(n) O(n)
0 1 2 3 4
{} {} {} {} {}

19
Интерфейс
O(n)
O(n) O(n) O(n) O(n)
0 1 2 3 4
{} {} {} {} {}

20
Интерфейс
O(n)
O(1) O(n) O(n) O(1)
0 1 2 3 4
{} {} {} {} {}
push() shift() unshift() length()
14

21
Cтруктуры данных “из коробки”

22
1. Array

23
1. Array
2. Hash Table (Object, Set, Map)

24
1. Array
Индексация Поиск Вставка Удаление

25
1. Array
O(1) O(n) O(n) O(n)

26
1. Array
O(1) O(n) O(n) O(n)
(N/A) O(1) O(1) O(1) O(1)

27
Пересечение масивов

29
Пересечение масивов

30
Множественные проверки

31
Множественные проверки

Стэк
O(n) O(n) O(1) O(1)
33

Стэк
1
O(n) O(n) O(1) O(1)
34

Стэк
1
2
O(n) O(n) O(1) O(1)
35

Стэк
1
2
3
O(n) O(n) O(1) O(1)
36

Стэк
1
2
3
4
O(n) O(n) O(1) O(1)
37

Стэк
1
2
3
4
O(n) O(n) O(1) O(1)
38

Стэк
1
2
3
4
LIFO (англ. last in — first out, «последним пришёл — первым вышел»).
O(n) O(n) O(1) O(1)
39

Стэк
1
2
LIFO (англ. last in — first out, «последним пришёл — первым вышел»).
1. Парсеры (<div><p><a></a></p></div>)
2. Транспиляторы ({“(({}))”})
3. Стэк вызовов функций JavaScript
4. Истории изменений
O(n) O(n) O(1) O(1)
40

41
Стэк вызовов функций JavaScript

42
Базовая реализация

44
Очередь
O(n) O(n) O(1) O(1)

45
Очередь
1
O(n) O(n) O(1) O(1)

46
Очередь
2 1
O(n) O(n) O(1) O(1)

47
Очередь
3 2 1
O(n) O(n) O(1) O(1)

48
Очередь
4 3 2 1
O(n) O(n) O(1) O(1)

49
Очередь
FIFO (англ. first in — first out, «первым пришёл — первым вышел»).
4 3 2 1
firstlast
O(n) O(n) O(1) O(1)

50
Очередь
FIFO (англ. first in — first out, «первым пришёл — первым вышел»).
1. Очереди
2. Очередь событий JavaScript
4 3 2 1
firstlast
O(n) O(n) O(1) O(1)

51
Базовая реализация

52
Связанные списки

53
O(n) O(n) O(1) O(1)

54
O(n) O(n) O(1) O(1)
DATA

55
O(n) O(n) O(1) O(1)
DATA
DATA

56
O(n) O(n) O(1) O(1)
DATA
DATA
DATA

57
O(n) O(n) O(1) O(1)
DATA
DATA
DATA
DATA

58
1. Последовательности
O(n) O(n) O(1) O(1)
DATA
DATA
DATA

59
Бинарное дерево
52

60
O(log(n)) O((log(n)) O((log(n)) O((log(n))
53

61
[5, 8, 13, 6, 4, 23, 9]
54

62
[5, 8, 13, 6, 4, 23, 9]
indexOf()/includes() - O(n)
55

[5, 8, 13, 6, 4, 23, 9]
Hash table conversation - O(n + 1) => O(n) // O(1)
63

64
[5, 8, 13, 6, 4, 23, 9]
Binary search O(n log(n) + log(n)) => O(n log(n))
Hash table convertation - O(n + 1) => O(n) // O(1)

65
Бинарный поиск
[6, 5, 8, 13, 7, 4, 23, 9]

66
[4, 5, 6, 7, 8, 9, 13, 23]
O(n log(n))
[6, 5, 8, 13, 7, 4, 23, 9]

67
23
[4, 5, 6, 7, 8, 9, 13, 23]

68
23
[4, 5, 6, 7, 8, 9, 13, 23]
[4, 5, 6, 7, 8, 9, 13, 23]

69
23
[4, 5, 6, 7, 8, 9, 13, 23]
[4, 5, 6, 7, 8, 9, 13, 23]
[4, 5, 6, 7, 8, 9, 13, 23]

70
23
[4, 5, 6, 7, 8, 9, 13, 23]
[4, 5, 6, 7, 8, 9, 13, 23]
[4, 5, 6, 7, 8, 9, 13, 23]
[4, 5, 6, 7, 8, 9, 13, 23]

71
23
[4, 5, 6, 7, 8, 9, 13, 23]
[4, 5, 6, 7, 8, 9, 13, 23]
[4, 5, 6, 7, 8, 9, 13, 23]
[4, 5, 6, 7, 8, 9, 13, 23]
O(log(n))

72

73
Binary search O(n log(n) + log(n)) => O(n log(n))
Hash table conversation - O(n + 1) => O(n) // O(1)
Binary search tree - O(log(n))
[6, 5, 8, 13, 7, 4, 23, 9]

74
6
[6, 5, 8, 13, 7, 4, 23, 9]

75
5
6
[6, 5, 8, 13, 7, 4, 23, 9]

76
5 8
6
[6, 5, 8, 13, 7, 4, 23, 9]

77
13
5 8
6
[6, 5, 8, 13, 7, 4, 23, 9]

78
13
5 8
6
7
[6, 5, 8, 13, 7, 4, 23, 9]

79
13
5 8
6
4 7
[6, 5, 8, 13, 7, 4, 23, 9]

80
23
13
5 8
6
4 7
[6, 5, 8, 13, 7, 4, 23, 9]

81
[6, 5, 8, 13, 7, 4, 23, 9]
9 23
13
5 8
6
4 7

82
[6, 5, 8, 13, 7, 4, 23, 9]
9 23
13
5 8
6
4 7

83
[6, 5, 8, 13, 7, 4, 23, 9]
9 23
13
5 8
6
4 7

84
[6, 5, 8, 13, 7, 4, 23, 9]
9 23
13
5 8
6
4 7

85
[6, 5, 8, 13, 7, 4, 23, 9]
9 23
13
5 8
6
4 7

86
[6, 5, 8, 13, 7, 4, 23, 9]
9 23
13
5 8
6
4 7

87
1. Использование структур данных шире хранения большого объёма
данных.
2. Исполнительные конструкции кода могут быть упрощены.
3. Правильный выбор СД структурирует приложение и делает код
понятнее.
4. Повторяющиеся вычисления не должны существовать.
5. Правильно подобранная СД для задачи ускоряет приложение.

88
1. https://habr.com/ru/post/359192/ - Классические алгоритмы и
структуры данных на JavaScript
2. https://github.com/trekhleb/javascript-algorithms - Репозиторий
реализаций
3. http://bigocheatsheet.com - Таблицы и графики Big O
4. https://habr.com/ru/post/339656/ - О выборе структур данных для
начинающих
5. https://habr.com/ru/post/422259/ - Основные структуры данных.
Матчасть. Азы
Материалы

89
“Умные структуры данных
и тупой код работают куда
лучше, чем наоборот.”
ESR

Any
questions?
Nick.Gromov.92 nick-gromov-1614b7125
+38 066 083 07 06

Структуры данных в JavaScript | Odessa Frontend Meetup #13

More Related Content

What's hot

Similar to Структуры данных в JavaScript | Odessa Frontend Meetup #13

More from OdessaFrontend

Структуры данных в JavaScript | Odessa Frontend Meetup #13