Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS Fest 2019/Autumn. Adam Leos. So why do you need to know Algorithms and Data Structures in Front-end, anyway

31 views

Published on

During the presentation, we will consider what advantages a front-end developer will get from knowledge of algorithms and data structures.
We will analyze real-world examples where this knowledge simplified logic and accelerated applications dramatically.
And finally we will understand the most necessary things that will allow us to determine the effectiveness of the code and easily improve it.

Published in: Education
  • Be the first to comment

  • Be the first to like this

JS Fest 2019/Autumn. Adam Leos. So why do you need to know Algorithms and Data Structures in Front-end, anyway

  1. 1. So why do you need to know Algorithms and Data Structures in Front-end, anyway
  2. 2. Adam Leos
  3. 3. Adam Leos ● Старший разработчик PlutoTV
  4. 4. Adam Leos ● Старший разработчик PlutoTV ● Автор веб-дополнения UnlimitedControl
  5. 5. https://adam4leos.github.io/
  6. 6. Статья на Хабре: ● Русский ● English
  7. 7. Adam Leos ● Старший разработчик PlutoTV ● Автор веб-дополнения UnlimitedControl ● Докладчик-идеолог
  8. 8. Что вы видите, это не то, что исполняется ©
  9. 9. Что вы видите, это не то, что исполняется © Нет плохого кода, а есть плохие компиляторы ©
  10. 10. Сложность алгоритма
  11. 11. Сложность алгоритма Big O notation, O
  12. 12. Сложность алгоритма Big O notation, O Omega notation, Ω
  13. 13. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ
  14. 14. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations
  15. 15. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity
  16. 16. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity O(n)
  17. 17. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity O(n) Ο(log n)
  18. 18. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity O(n) Ο(log n) O(n * logn)
  19. 19. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity O(n) Ο(log n) O(n * logn) logarithmic
  20. 20. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity O(n) Ο(log n) O(n * logn) logarithmic polynomial
  21. 21. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity O(n) Ο(log n) O(n * logn) logarithmic polynomial Ο(f(n)) = { g(n) : there exists c > 0 and n0 such that f(n) ≤ c.g(n) for all n > n0 . }
  22. 22. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity O(n) Ο(log n) O(n * logn) logarithmic polynomial Ο(f(n)) = { g(n) : there exists c > 0 and n0 such that f(n) ≤ c.g(n) for all n > n0 . } c and n0 are constants, f(n) and g(n) are functions over non-negative integers
  23. 23. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity O(n) Ο(log n) O(n * logn) logarithmic polynomial Ο(f(n)) = { g(n) : there exists c > 0 and n0 such that f(n) ≤ c.g(n) for all n > n0 . } c and n0 are constants, f(n) and g(n) are functions over non-negative integers
  24. 24. Сложность алгоритма Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity O(n) Ο(log n) O(n * logn) logarithmic polynomial Ο(f(n)) = { g(n) : there exists c > 0 and n0 such that f(n) ≤ c.g(n) for all n > n0 . } c and n0 are constants, f(n) and g(n) are functions over non-negative integers
  25. 25. Algorithm Complexity Big O notation, O Omega notation, Ω Theta Notation, θ asymptotic notations, asymptotic complexity O(n) Ο(log n) O(n * logn) logarithmic polynomial Ο(f(n)) = { g(n) : there exists c > 0 and n0 such that f(n) ≤ c.g(n) for all n > n0 . } c and n0 are constants, f(n) and g(n) are functions over non-negative integers
  26. 26. Сложность алгоритма
  27. 27. Сложность алгоритма Как будет расти расход ресурсов* с увеличением размера входных данных.
  28. 28. Сложность алгоритма Как будет расти расход ресурсов* с увеличением размера входных данных. * время и память
  29. 29. Сложность алгоритма function sumNumbersInArray(array) { let sum = 0; array.forEach(number => sum += number); return sum; }
  30. 30. Сложность алгоритма function sumNumbersInArray(array) { let sum = 0; array.forEach(number => sum += number); return sum; }
  31. 31. Сложность алгоритма function sumNumbersInArray(array) { let sum = 0; array.forEach(number => sum += number); return sum; }
  32. 32. Сложность алгоритма function sumNumbersInArray(array) { let sum = 0; array.forEach(number => sum += number); return sum; }
  33. 33. Сложность алгоритма function sumNumbersInArray(array) { let sum = 0; array.forEach(number => sum += number); return sum; }
  34. 34. Сложность алгоритма function sumNumbersInArray(array) { let sum = 0; array.forEach(number => sum += number); return sum; }
  35. 35. Сложность алгоритма function sumNumbersInArray(array) { let sum = 0; array.forEach(number => sum += number); return sum; } sumNumbersInArray([1, 2, 3, 4, 5]);
  36. 36. Сложность алгоритма function sumNumbersInArray(array) { let sum = 0; array.forEach(number => sum += number); return sum; } sumNumbersInArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
  37. 37. Сложность алгоритма Как будет расти расход ресурсов* с увеличением размера входных данных. * время и память
  38. 38. Big O notation, O
  39. 39. Big O notation, O
  40. 40. Big O notation, O Функция, которая описывает рост сложности алгоритма.
  41. 41. Big O notation, O function sumNumbersInArray(array) { let sum = 0; array.forEach(number => sum += number); return sum; }
  42. 42. Размер входных данных, ед.
  43. 43. Размер входных данных, ед. 1
  44. 44. Размер входных данных, ед. 1 100
  45. 45. Размер входных данных, ед. 1 100 1000
  46. 46. Размер входных данных, ед. 1 100 1000 10000
  47. 47. Размер входных данных, ед. 1 100 1000 10000
  48. 48. Размер входных данных, ед. 1 100 1000 10000 Количествоопераций
  49. 49. Размер входных данных, ед. 1 100 1000 10000 Количествоопераций 1 100 1000 10000
  50. 50. Размер входных данных, ед. 1 100 1000 10000 1 100 1000 10000 Количествоопераций
  51. 51. Размер входных данных, ед. 1 100 1000 10000 1 100 1000 10000 O(n) Количествоопераций
  52. 52. Размер входных данных, ед. 1 100 1000 10000 1 100 1000 10000 O(n) - линейная Количествоопераций
  53. 53. Big O function simpleCalculate() { const a = 1 + 2; const b = 3 + 4; console.log('calculating...'); return b - a; } simpleCalculate();
  54. 54. Big O function simpleCalculate() { const a = 1 + 2; const b = 3 + 4; console.log('calculating...'); return b - a; } simpleCalculate(); O(1)
  55. 55. Размер входных данных, ед. 1 100 1000 10000 1 100 1000 10000 O(1) Количествоопераций
  56. 56. Размер входных данных, ед. 1 100 1000 10000 1 100 1000 10000 O(1) - константная (постоянная) Количествоопераций
  57. 57. Big O function simpleCalculate(number) { const a = 1 + 2; const b = 3 + 4; console.log('calculating...'); return b - a + number; } simpleCalculate(8);
  58. 58. Big O function simpleCalculate(number) { const a = 1 + 2; const b = 3 + 4; console.log('calculating...'); return b - a + number; } simpleCalculate(8); O(1)
  59. 59. Big O function simpleCalculate(array) { const a = 1 + 2; const b = 3 + 4; let additionalNumber = 0; array.forEach(num => additionalNumber += num); return b - a + additionalNumber; } simpleCalculate([1, 2, 5, 10, 1223]);
  60. 60. Big O function simpleCalculate(array) { const a = 1 + 2; const b = 3 + 4; let additionalNumber = 0; array.forEach(num => additionalNumber += num); return b - a + additionalNumber; } simpleCalculate([1, 2, 5, 10, 1223]); O(n)
  61. 61. Big O function simpleCalculate(array) { const a = 1 + 2; const b = 3 + 4; const additionalNumber = array.length; return b - a + additionalNumber; } simpleCalculate([1, 2, 5, 10, 1223]);
  62. 62. Big O function simpleCalculate(array) { const a = 1 + 2; const b = 3 + 4; const additionalNumber = array.length; return b - a + additionalNumber; } simpleCalculate([1, 2, 5, 10, 1223]); O(1)
  63. 63. Big O function notSoSimpleCalculate(array) { for (let i = 0; i < array.length; i++) { for (let j = 0; j < array.length; j++) { array[i] = array[i] + array[j]; } } return array; } notSoSimpleCalculate([1, 2, 3]);
  64. 64. Big O function notSoSimpleCalculate(array) { for (let i = 0; i < array.length; i++) { for (let j = 0; j < array.length; j++) { array[i] = array[i] + array[j]; } } return array; } notSoSimpleCalculate([1, 2, 3]); O(n^2)
  65. 65. Размер входных данных, ед. 1 100 1000 10000 1 100 1000 10000 O(n^2) - квадратичная Количествоопераций
  66. 66. Big O function notSoSimpleCalculate(array) { array.forEach(num => console.log(num)); for (let i = 0; i < array.length; i++) { for (let j = 0; j < array.length; j++) { array[i] = array[i] + array[j]; } } return array; }
  67. 67. Big O function notSoSimpleCalculate(array) { array.forEach(num => console.log(num)); for (let i = 0; i < array.length; i++) { for (let j = 0; j < array.length; j++) { array[i] = array[i] + array[j]; } } return array; } O(n^2)
  68. 68. Big O function mightBeSimpleCalculate(array) { let total = 0; array.forEach(num => { const additional = array.indexOf(num) > 5 ? 5 : 1; total = total + num + additional; }); return array; }
  69. 69. Big O function mightBeSimpleCalculate(array) { let total = 0; array.forEach(num => { const additional = array.indexOf(num) > 5 ? 5 : 1; total = total + num + additional; }); return array; } O(n^2)
  70. 70. Big O function mightBeSimpleCalculate(array) { let total = 0; array.forEach(num => { const additional = array.indexOf(num) > 5 ? 5 : 1; total = total + num + additional; }); return array; } O(n^2)
  71. 71. Big O function mightBeSimpleCalculate(array) { let total = 0; array.forEach((num, index) => { const additional = index > 5 ? 5 : 1; total = total + num + additional; }); return array; } O(n)
  72. 72. Пример роста в цифрах
  73. 73. Пример роста в цифрах Входные данные - 10000 элементов
  74. 74. Пример роста в цифрах O(1) - 1 Входные данные - 10000 элементов
  75. 75. Пример роста в цифрах O(1) - 1 O(n) - 10000 Входные данные - 10000 элементов
  76. 76. Пример роста в цифрах O(1) - 1 O(n) - 10000 O(n^2) - 100000000 (сто миллионов) Входные данные - 10000 элементов
  77. 77. Пример роста в цифрах O(1) - 1 O(n) - 10000 O(n^2) - 100000000 (сто миллионов) O(n^3) - 1000000000000 (один триллион) Входные данные - 10000 элементов
  78. 78. Пример роста в цифрах O(1) - 1 O(n) - 10000 O(n^2) - 100000000 (сто миллионов) O(n^3) - 1000000000000 (один триллион) O(n!) очень много 100000000000000000000000000000000000000000000000000000000 000000000000000000000000000000000000000000000000000000000 000000000000000000000000000000000000000000000000000000…… Входные данные - 10000 элементов
  79. 79. Структуры данных
  80. 80. Структуры данных Определенный способ организации данных для максимально эффективного использования
  81. 81. Структуры данных ● Доступ (получить данные) ● Поиск (найти данные) ● Вставка (добавить данные) ● Удаление (удалить данные)
  82. 82. Структуры данных 1. Массивы
  83. 83. Массивы const arr = [1, 2, 3];
  84. 84. Массивы const arr = [1, 2, 3]; arr[1]; // 2
  85. 85. Массивы const arr = [1, 2, 3]; arr[1]; // 2 O(1)
  86. 86. Массивы const arr = [1, 2, 3]; arr[1]; // 2 arr[2]; // 3 O(1) O(1)
  87. 87. Массивы const arr = [1, 2, 3]; arr[1]; // 2 arr[2]; // 3 arr[9]; // undefined O(1) O(1) O(1)
  88. 88. Массивы const arr = [1, 2, 3]; arr[1]; // 2 arr[2]; // 3 arr[9]; // undefined arr[0] = 4; // [4, 2, 3] O(1) O(1) O(1) O(1)
  89. 89. Массивы const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4]
  90. 90. Массивы const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] O(1)*
  91. 91. Массивы const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] arr.pop(); // [1, 2, 3] O(1)*
  92. 92. Массивы const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] arr.pop(); // [1, 2, 3] O(1) O(1)*
  93. 93. Массивы const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] arr.pop(); // [1, 2, 3] arr.shift(); // [2, 3] O(1) O(1)*
  94. 94. Массивы const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] arr.pop(); // [1, 2, 3] arr.shift(); // [2, 3] O(1) O(n) O(1)*
  95. 95. Массивы const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] arr.pop(); // [1, 2, 3] arr.shift(); // [2, 3] arr.unshift(4); // [4, 2, 3] O(1) O(n) O(1)*
  96. 96. Массивы const arr = [1, 2, 3]; arr.push(4); // [1, 2, 3, 4] arr.pop(); // [1, 2, 3] arr.shift(); // [2, 3] arr.unshift(4); // [4, 2, 3] O(1) O(n) O(n) O(1)*
  97. 97. Массивы O(n)
  98. 98. Массивы .map() .slice() .every() .filter() .indexOf() .reduce() .reverse() .find() .includes() .toString() O(n)
  99. 99. Структуры данных 1. Массивы 2. Объекты
  100. 100. Объекты const obj = { id: 1, name: 'Adam', };
  101. 101. Объекты const obj = { id: 1, name: 'Adam', }; obj.id // 1
  102. 102. Объекты const obj = { id: 1, name: 'Adam', }; obj.id // 1 O(1)
  103. 103. Объекты const obj = { id: 1, name: 'Adam', }; obj.id // 1 obj['name'] // 1 O(1) O(1)
  104. 104. Объекты const obj = { id: 1, name: 'Adam', }; obj.surname = 'Leos'; obj['name'] = []; O(1) O(1)
  105. 105. Объекты const obj = { id: 1, name: 'Adam', }; Object.keys(obj) // ['id', 'name'] Object.values(obj) // [1, 'Adam']
  106. 106. Объекты const obj = { id: 1, name: 'Adam', }; Object.keys(obj) // ['id', 'name'] Object.values(obj) // [1, 'Adam'] O(n) O(n)
  107. 107. Объекты Посчитать символы в строке
  108. 108. Объекты function countSymbols(string) { const dict = {}; for (let i = 0; i < string.length; i++) { const iterableSymbol = string[i]; if (dict[iterableSymbol] === undefined) dict[iterableSymbol] = 0; dict[iterableSymbol]++; } return dict; } Посчитать символы в строке
  109. 109. Объекты function countSymbols(string) { const dict = {}; for (let i = 0; i < string.length; i++) { const iterableSymbol = string[i]; if (dict[iterableSymbol] === undefined) dict[iterableSymbol] = 0; dict[iterableSymbol]++; } return dict; } Посчитать символы в строке
  110. 110. Объекты function countSymbols(string) { const dict = {}; for (let i = 0; i < string.length; i++) { const iterableSymbol = string[i]; if (dict[iterableSymbol] === undefined) dict[iterableSymbol] = 0; dict[iterableSymbol]++; } return dict; } Посчитать символы в строке
  111. 111. Объекты function countSymbols(string) { const dict = {}; for (let i = 0; i < string.length; i++) { const iterableSymbol = string[i]; if (dict[iterableSymbol] === undefined) dict[iterableSymbol] = 0; dict[iterableSymbol]++; } return dict; } Посчитать символы в строке
  112. 112. Объекты function countSymbols(string) { const dict = {}; for (let i = 0; i < string.length; i++) { const iterableSymbol = string[i]; if (dict[iterableSymbol] === undefined) dict[iterableSymbol] = 0; dict[iterableSymbol]++; } return dict; } Посчитать символы в строке
  113. 113. Объекты function countSymbols(string) { const dict = {}; for (let i = 0; i < string.length; i++) { const iterableSymbol = string[i]; if (dict[iterableSymbol] === undefined) dict[iterableSymbol] = 0; dict[iterableSymbol]++; } return dict; } Посчитать символы в строке
  114. 114. Объекты function countSymbols(string) { const dict = {}; for (let i = 0; i < string.length; i++) { const iterableSymbol = string[i]; if (dict[iterableSymbol] === undefined) dict[iterableSymbol] = 0; dict[iterableSymbol]++; } return dict; } Посчитать символы в строке
  115. 115. Объекты function countSymbols(string) { const dict = {}; for (let i = 0; i < string.length; i++) { const iterableSymbol = string[i]; if (dict[iterableSymbol] === undefined) dict[iterableSymbol] = 0; dict[iterableSymbol]++; } return dict; } Посчитать символы в строке
  116. 116. Объекты countSymbols('adam') // Object { a: 2, d: 1, m: 1 } countSymbols('mississippi') // Object { m: 1, i: 4, s: 4, p: 2 } Посчитать символы в строке
  117. 117. Полезный мапинг в реальном мире
  118. 118. const shows = [ { id: 1, name: 'Rick and Morty', categories: [ 'Comedy', 'Animated', 'Science', ], data: 1001010101001011, }, {/.../}, {/.../}, {/.../}, {/.../}, ];
  119. 119. const shows = [ { id: 1, name: 'Rick and Morty', categories: [ 'Comedy', 'Animated', 'Science', ], data: 1001010101001011, }, {/.../}, {/.../}, {/.../}, {/.../}, ]; const bannedShows = [ { id: 1, name: 'Rick and Morty', categories: [ 'Comedy', 'Animated', 'Science', ], }, {/.../}, ];
  120. 120. function ineffectiveBanning(shows) { shows.forEach(show => { const { id: showID } = show; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; if (showID === bannedShowID) { show.isBanned = true; }; }); }); };
  121. 121. function ineffectiveBanning(shows) { shows.forEach(show => { const { id: showID } = show; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; if (showID === bannedShowID) { show.isBanned = true; }; }); }); };
  122. 122. function ineffectiveBanning(shows) { shows.forEach(show => { const { id: showID } = show; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; if (showID === bannedShowID) { show.isBanned = true; }; }); }); };
  123. 123. function ineffectiveBanning(shows) { shows.forEach(show => { const { id: showID } = show; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; if (showID === bannedShowID) { show.isBanned = true; }; }); }); };
  124. 124. function ineffectiveBanning(shows) { shows.forEach(show => { const { id: showID } = show; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; if (showID === bannedShowID) { show.isBanned = true; }; }); }); };
  125. 125. function ineffectiveBanning(shows) { shows.forEach(show => { const { id: showID } = show; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; if (showID === bannedShowID) { show.isBanned = true; }; }); }); };
  126. 126. function ineffectiveBanning(shows) { shows.forEach(show => { const { id: showID } = show; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; if (showID === bannedShowID) { show.isBanned = true; }; }); }); };
  127. 127. function effectiveBanning(shows) { const bannedShowsIDMap = {}; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; bannedShowsIDMap[bannedShowID] = true; }; shows.forEach(show => { const { id: showID } = show; if (bannedShowsIDMap[showID]) show.isBanned = true; }); };
  128. 128. function effectiveBanning(shows) { const bannedShowsIDMap = {}; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; bannedShowsIDMap[bannedShowID] = true; }; shows.forEach(show => { const { id: showID } = show; if (bannedShowsIDMap[showID]) show.isBanned = true; }); };
  129. 129. function effectiveBanning(shows) { const bannedShowsIDMap = {}; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; bannedShowsIDMap[bannedShowID] = true; }; shows.forEach(show => { const { id: showID } = show; if (bannedShowsIDMap[showID]) show.isBanned = true; }); };
  130. 130. function effectiveBanning(shows) { const bannedShowsIDMap = {}; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; bannedShowsIDMap[bannedShowID] = true; }; shows.forEach(show => { const { id: showID } = show; if (bannedShowsIDMap[showID]) show.isBanned = true; }); };
  131. 131. function effectiveBanning(shows) { const bannedShowsIDMap = {}; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; bannedShowsIDMap[bannedShowID] = true; }; shows.forEach(show => { const { id: showID } = show; if (bannedShowsIDMap[showID]) show.isBanned = true; }); };
  132. 132. function effectiveBanning(shows) { const bannedShowsIDMap = {}; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; bannedShowsIDMap[bannedShowID] = true; }; shows.forEach(show => { const { id: showID } = show; if (bannedShowsIDMap[showID]) show.isBanned = true; }); };
  133. 133. function effectiveBanning(shows) { const bannedShowsIDMap = {}; bannedShows.forEach(bannedShow => { const { id: bannedShowID } = bannedShow; bannedShowsIDMap[bannedShowID] = true; }; shows.forEach(show => { const { id: showID } = show; if (bannedShowsIDMap[showID]) show.isBanned = true; }); }; x100
  134. 134. Память в реальном мире
  135. 135. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels .filter(filterEmptyTimelines) .map(addIdentificator) .map(modifyImages) .map(removeParams) .map(setSession) // more code }
  136. 136. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels .filter(filterEmptyTimelines) .map(addIdentificator) .map(modifyImages) .map(removeParams) .map(setSession) // more code }
  137. 137. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels .filter(filterEmptyTimelines) .map(addIdentificator) .map(modifyImages) .map(removeParams) .map(setSession) // more code }
  138. 138. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels .filter(filterEmptyTimelines) .map(addIdentificator) .map(modifyImages) .map(removeParams) .map(setSession) // more code }
  139. 139. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels .filter(filterEmptyTimelines) .map(addIdentificator) .map(modifyImages) .map(removeParams) .map(setSession) // more code }
  140. 140. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels .filter(filterEmptyTimelines) .map(addIdentificator) .map(modifyImages) .map(removeParams) .map(setSession) // more code }
  141. 141. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels .filter(filterEmptyTimelines) .map(addIdentificator) .map(modifyImages) .map(removeParams) .map(setSession) // more code }
  142. 142. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels .filter(filterEmptyTimelines) .map(addIdentificator) .map(modifyImages) .map(removeParams) .map(setSession) // more code }
  143. 143. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels.reduce((acc, channel) => { if (hasEmptyTimelines(channel.timelines)) { return acc; } const enchancedChannel = setChannelURL(reduceImagesObject(addIDToChannel(channel))); acc.push(enchancedChannel); return acc; }, []); // more code }
  144. 144. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels.reduce((acc, channel) => { if (hasEmptyTimelines(channel.timelines)) { return acc; } const enchancedChannel = setChannelURL(reduceImagesObject(addIDToChannel(channel))); acc.push(enchancedChannel); return acc; }, []); // more code }
  145. 145. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels.reduce((acc, channel) => { if (hasEmptyTimelines(channel.timelines)) { return acc; } const enchancedChannel = setChannelURL(reduceImagesObject(addIDToChannel(channel))); acc.push(enchancedChannel); return acc; }, []); // more code }
  146. 146. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels.reduce((acc, channel) => { if (hasEmptyTimelines(channel.timelines)) { return acc; } const enchancedChannel = setChannelURL(reduceImagesObject(addIDToChannel(channel))); acc.push(enchancedChannel); return acc; }, []); // more code }
  147. 147. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels.reduce((acc, channel) => { if (hasEmptyTimelines(channel.timelines)) { return acc; } const enchancedChannel = setChannelURL(reduceImagesObject(addIDToChannel(channel))); acc.push(enchancedChannel); return acc; }, []); // more code }
  148. 148. function enchanceApiResponse(apiResponse) { const channels = apiResponse.channels.reduce((acc, channel) => { if (hasEmptyTimelines(channel.timelines)) { return acc; } const enchancedChannel = setChannelURL(reduceImagesObject(addIDToChannel(channel))); acc.push(enchancedChannel); return acc; }, []); // more code } 10-30%
  149. 149. Структуры данных 1. Массивы 2. Объекты 3. Графы
  150. 150. Граф
  151. 151. Граф Вершина (узел)
  152. 152. Граф Вершина (узел) Ребро
  153. 153. Граф Вершина (узел) Ребро 1 13 9 54 11 6 70
  154. 154. Граф 1 13 9 54 11 6 70
  155. 155. Граф 1 13 9 54 11 6 70 Value (data) = 6
  156. 156. Граф 1 13 9 54 11 6 70 Value (data) = 6 Connections = [13, 70]
  157. 157. node = { value: 6, connections: [13, 70], }
  158. 158. node = { value: 6, connections: [13, 70], } class Node { }
  159. 159. node = { value: 6, connections: [13, 70], } class Node { constructor(value) { this.value = value; this.connections = []; } }
  160. 160. class Node { constructor(value) { this.value = value; this.connections = []; } addConnection(node) { this.connections.push(node); } } node = { value: 6, connections: [13, 70], }
  161. 161. class Node { constructor(value) { this.value = value; this.connections = []; } addConnection(node) { this.connections.push(node); } } node = { value: 6, connections: [13, 70], } const six = new Node(6);
  162. 162. class Node { constructor(value) { this.value = value; this.connections = []; } addConnection(node) { this.connections.push(node); } } node = { value: 6, connections: [13, 70], } const six = new Node(6); six.value; // 6
  163. 163. class Node { constructor(value) { this.value = value; this.connections = []; } addConnection(node) { this.connections.push(node); } } node = { value: 6, connections: [13, 70], } const six = new Node(6); six.value; // 6 const thirteen = new Node(13); const seventy = new Node(70);
  164. 164. class Node { constructor(value) { this.value = value; this.connections = []; } addConnection(node) { this.connections.push(node); } } node = { value: 6, connections: [13, 70], } const six = new Node(6); six.value; // 6 const thirteen = new Node(13); const seventy = new Node(70); six.addConnection(thirteen); six.addConnection(seventy);
  165. 165. class Node { constructor(value) { this.value = value; this.connections = []; } addConnection(node) { this.connections.push(node); } } node = { value: 6, connections: [13, 70], } const six = new Node(6); six.value; // 6 const thirteen = new Node(13); const seventy = new Node(70); six.addConnection(thirteen); six.addConnection(seventy); six.connections; // [{ value: 13, connections: [] }, { value: 70, connections: [] }];
  166. 166. class Graph { }
  167. 167. class Graph { constructor() { this.nodes = []; } }
  168. 168. class Graph { constructor() { this.nodes = []; } addNode(node) { this.nodes.push(node); } }
  169. 169. class Graph { constructor() { this.nodes = []; } addNode(node) { this.nodes.push(node); } addEdge(node1, node2) { node1.addConnection(node2); node2.addConnection(node1); }; }
  170. 170. Граф 1 13 9 54 11 6 70
  171. 171. class Graph { constructor() { this.nodes = {}; } addNode(node) { this.nodes.push(node); } addEdge(node1, node2) { node1.addConnection(node2); node2.addConnection(node1); }; } const ourGraph = new Graph(); const one = new Node(1); const six = new Node(6); const nine = new Node(9); const eleven = new Node(11); const thirteen = new Node(13); const fiftyFour = new Node(54); const seventy = new Node(70);
  172. 172. class Graph { constructor() { this.nodes = {}; } addNode(node) { this.nodes.push(node); } addEdge(node1, node2) { node1.addConnection(node2); node2.addConnection(node1); }; } ourGraph.addNode(one); ourGraph.addNode(six); ourGraph.addNode(nine); ourGraph.addNode(eleven); ourGraph.addNode(thirteen); ourGraph.addNode(fiftyFour); ourGraph.addNode(seventy); ourGraph.addEdge(one, thirteen); ourGraph.addEdge(nine, thirteen); ourGraph.addEdge(nine, fiftyFour); ourGraph.addEdge(thirteen, eleven); ourGraph.addEdge(thirteen, six); ourGraph.addEdge(six, seventy);
  173. 173. Граф Гугл-карт Kharkiv - [Lviv]; Lviv - [Kharkiv, Odessa]; Odessa - [Lviv];
  174. 174. Граф Гугл-карт Kharkiv - [Lviv]; Lviv - [Kharkiv, Odessa]; Odessa - [Lviv]; Seattle San Francisco Las Vegas Salt Lake City San Francisco
  175. 175. Граф Гугл-карт Kharkiv - [Lviv]; Lviv - [Kharkiv, Odessa]; Odessa - [Lviv];
  176. 176. const googleRoute = new Graph();
  177. 177. const googleRoute = new Graph(); const seattle = new Node('Seattle'); const sanFrancisco = new Node('San Francisco'); const lasVegas = new Node('Las Vegas'); const saltLakeCity = new Node('Salt Lake City');
  178. 178. const googleRoute = new Graph(); const seattle = new Node('Seattle'); const sanFrancisco = new Node('San Francisco'); const lasVegas = new Node('Las Vegas'); const saltLakeCity = new Node('Salt Lake City'); const seattleData = { name: 'Seattle', coordinates: [ 47.7471188, -125.6412592, ], state: 'WA', country: 'USA', weather: 'Sunny', /.../ };
  179. 179. const googleRoute = new Graph(); const seattle = new Node('Seattle'); const sanFrancisco = new Node('San Francisco'); const lasVegas = new Node('Las Vegas'); const saltLakeCity = new Node('Salt Lake City'); googleRoute.addNode(seattle); googleRoute.addNode(sanFrancisco); googleRoute.addNode(lasVegas); googleRoute.addNode(saltLakeCity);
  180. 180. const googleRoute = new Graph(); const seattle = new Node('Seattle'); const sanFrancisco = new Node('San Francisco'); const lasVegas = new Node('Las Vegas'); const saltLakeCity = new Node('Salt Lake City'); googleRoute.addNode(seattle); googleRoute.addNode(sanFrancisco); googleRoute.addNode(lasVegas); googleRoute.addNode(saltLakeCity); googleRoute.addEdge(seattle, sanFrancisco); googleRoute.addEdge(sanFrancisco, lasVegas); googleRoute.addEdge(lasVegas, saltLakeCity); googleRoute.addEdge(saltLakeCity, sanFrancisco);
  181. 181. const googleRoute = new Graph(); const seattle = new Node('Seattle'); const sanFrancisco = new Node('San Francisco'); const lasVegas = new Node('Las Vegas'); const saltLakeCity = new Node('Salt Lake City'); googleRoute.addNode(seattle); googleRoute.addNode(sanFrancisco); googleRoute.addNode(lasVegas); googleRoute.addNode(saltLakeCity); googleRoute.addEdge(seattle, sanFrancisco); googleRoute.addEdge(sanFrancisco, lasVegas); googleRoute.addEdge(lasVegas, saltLakeCity); googleRoute.addEdge(saltLakeCity, sanFrancisco); sanFrancisco.connections = [ seattle, lasVegas, saltLakeCity, ];
  182. 182. const googleRoute = new Graph(); const seattle = new Node('Seattle'); const sanFrancisco = new Node('San Francisco'); const lasVegas = new Node('Las Vegas'); const saltLakeCity = new Node('Salt Lake City'); googleRoute.addNode(seattle); googleRoute.addNode(sanFrancisco); googleRoute.addNode(lasVegas); googleRoute.addNode(saltLakeCity); googleRoute.addEdge(seattle, sanFrancisco); googleRoute.addEdge(sanFrancisco, lasVegas); googleRoute.addEdge(lasVegas, saltLakeCity); googleRoute.addEdge(saltLakeCity, sanFrancisco); sanFrancisco.connections = [ seattle, lasVegas, saltLakeCity, ]; seattle.connections = [ sanFrancisco ];
  183. 183. Логистика
  184. 184. 1 13 9 54 11 6 70 Граф
  185. 185. Граф - ориентированный 1 13 9 54 11 6 70
  186. 186. 1 13 9 54 11 6 70 4 2 7 20 8 1 Граф - взешенный
  187. 187. Где еще используются графы 1. Сеть (маршрутизация данных). 2. Логистика (маршруты, направления). 3. Телекоммуникации (планирование частот вышек). 4. Социальные сети (возможные знакомые). 5. Рекомендации. 6. Схемы. 7. И еще очень много где.
  188. 188. Структуры данных 1. Массивы 2. Объекты 3. Графы 4. Деревья
  189. 189. 1 13 9 54 11 6 70 Деревья
  190. 190. 1 13 9 54 11 6 70 Деревья = Связный ацикличный граф
  191. 191. 1 13 9 54 11 6 70 Деревья = Связный ацикличный граф
  192. 192. 1 13 9 54 11 6 70 Деревья = Связный ацикличный граф
  193. 193. DOM дерево
  194. 194. const settings = { };
  195. 195. const settings = { options: [ ], };
  196. 196. const settings = { options: [ { }, { }, { }, // ... ], };
  197. 197. const settings = { options: [ { name: 'video', options: [...], }, { name: 'sound', options: [...], }, { name: 'security', options: [...], }, // ... ], };
  198. 198. const settings = { options: [ { name: 'video', options: [...], }, { name: 'sound', options: [...], }, { name: 'security', options: [...], }, // ... ], }; [ { name: 'subtitles', options: [...], }, { name: 'brightness', options: [...], }, // ... ];
  199. 199. Алгоритмы
  200. 200. Алгоритмы 1. Поиск
  201. 201. function find(number, array) { array.forEach((iterableNumber, index) => { if (iterableNumber === number) { console.log(`Found at index ${index}`); } }); }
  202. 202. function find(number, array) { array.forEach((iterableNumber, index) => { if (iterableNumber === number) { console.log(`Found at index ${index}`); } }); } O(n)
  203. 203. Поиск. Бинарный vs Последовательный
  204. 204. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  205. 205. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  206. 206. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  207. 207. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  208. 208. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  209. 209. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  210. 210. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  211. 211. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  212. 212. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  213. 213. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  214. 214. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } }
  215. 215. function binarySearch(number, array) { let startIndex = 0; let endIndex = array.length - 1; while (startIndex <= endIndex) { const middleIndex = Math.floor((startIndex + endIndex) / 2); const middleValue = array[middleIndex]; if (middleValue === number) { console.log(`Found at index ${middleIndex}`); } else if (middleValue < number) { startIndex = middleIndex + 1; } else { endIndex = middleIndex - 1; } } } O(logn)
  216. 216. Размер входных данных, ед. 1 100 1000 10000 1 100 1000 10000 O(logn) - логарифмическая Количествоопераций
  217. 217. Размер входных данных, ед. 1 100 1000 10000 1 100 1000 10000 O(logn) - логарифмическая 2el => 1 4el => 2 8el => 3 1000el => ~10 10000el => ~13 100000el => ~16 Количествоопераций
  218. 218. Бинарное Дерево 1 13 9 54 11 6 70
  219. 219. Бинарное Дерево 1 3 9 54 11 6 70
  220. 220. Бинарное Дерево 1 3 5 54 11 6 70
  221. 221. Бинарное Дерево 1 3 5 54 71 6 70
  222. 222. Поиск. Бинарное дерево
  223. 223. class Node { constructor(value) { this.value = value; this.connections = []; } addConnection(node) { this.connections.push(node); } }
  224. 224. class Node { constructor(value) { this.value = value; this.left = null; this.right = null; } }
  225. 225. class Tree { constructor() { this.root = null; } }
  226. 226. class Tree { constructor() { this.root = null } insert(data) { const newNode = new Node(data); if (this.root === null) { this.root = newNode; } else { this.insertNode(this.root, newNode); } } }
  227. 227. Бинарное дерево
  228. 228. insertNode(parentNode = this.head, newNode) { if (newNode.data < parentNode.data) { if (parentNode.left === null) parentNode.left = newNode; else { this.insertNode(parentNode.left, newNode); } } else { if (parentNode.right === null) parentNode.right = newNode; else { this.insertNode(parentNode.right, newNode); } } }
  229. 229. insertNode(parentNode = this.head, newNode) { if (newNode.data < parentNode.data) { if (parentNode.left === null) parentNode.left = newNode; else { this.insertNode(parentNode.left, newNode); } } else { if (parentNode.right === null) parentNode.right = newNode; else { this.insertNode(parentNode.right, newNode); } } }
  230. 230. insertNode(parentNode = this.head, newNode) { if (newNode.data < parentNode.data) { if (parentNode.left === null) parentNode.left = newNode; else { this.insertNode(parentNode.left, newNode); } } else { if (parentNode.right === null) parentNode.right = newNode; else { this.insertNode(parentNode.right, newNode); } } }
  231. 231. insertNode(parentNode = this.head, newNode) { if (newNode.data < parentNode.data) { if (parentNode.left === null) parentNode.left = newNode; else { this.insertNode(parentNode.left, newNode); } } else { if (parentNode.right === null) parentNode.right = newNode; else { this.insertNode(parentNode.right, newNode); } } }
  232. 232. insertNode(parentNode = this.head, newNode) { if (newNode.data < parentNode.data) { if (parentNode.left === null) parentNode.left = newNode; else { this.insertNode(parentNode.left, newNode); } } else { if (parentNode.right === null) parentNode.right = newNode; else { this.insertNode(parentNode.right, newNode); } } }
  233. 233. insertNode(parentNode = this.head, newNode) { if (newNode.data < parentNode.data) { if (parentNode.left === null) parentNode.left = newNode; else { this.insertNode(parentNode.left, newNode); } } else { if (parentNode.right === null) parentNode.right = newNode; else { this.insertNode(parentNode.right, newNode); } } }
  234. 234. insertNode(parentNode = this.head, newNode) { if (newNode.data < parentNode.data) { if (parentNode.left === null) parentNode.left = newNode; else { this.insertNode(parentNode.left, newNode); } } else { if (parentNode.right === null) parentNode.right = newNode; else { this.insertNode(parentNode.right, newNode); } } }
  235. 235. insertNode(parentNode = this.head, newNode) { if (newNode.data < parentNode.data) { if (parentNode.left === null) parentNode.left = newNode; else { this.insertNode(parentNode.left, newNode); } } else { if (parentNode.right === null) parentNode.right = newNode; else { this.insertNode(parentNode.right, newNode); } } }
  236. 236. insertNode(parentNode = this.head, newNode) { if (newNode.data < parentNode.data) { if (parentNode.left === null) parentNode.left = newNode; else { this.insertNode(parentNode.left, newNode); } } else { if (parentNode.right === null) parentNode.right = newNode; else { this.insertNode(parentNode.right, newNode); } } }
  237. 237. Алгоритмы 1. Поиск 2. Сортировки
  238. 238. Сортировка Пузырьком (bubble sort)
  239. 239. O(n^2) Сортировка Пузырьком (bubble sort)
  240. 240. function bubble(arr) { const length = arr.length; for (let i = 0; i < length; i++) { for (let j = 0; j < length - i - 1; j++) { const current = arr[j]; const next = arr[j + 1]; if (current > next) { arr[j] = next; arr[j + 1] = current; } } } return arr; }
  241. 241. function bubble(arr) { const length = arr.length; for (let i = 0; i < length; i++) { for (let j = 0; j < length - i - 1; j++) { const current = arr[j]; const next = arr[j + 1]; if (current > next) { arr[j] = next; arr[j + 1] = current; } } } return arr; }
  242. 242. function bubble(arr) { const length = arr.length; for (let i = 0; i < length; i++) { for (let j = 0; j < length - i - 1; j++) { const current = arr[j]; const next = arr[j + 1]; if (current > next) { arr[j] = next; arr[j + 1] = current; } } } return arr; }
  243. 243. function bubble(arr) { const length = arr.length; for (let i = 0; i < length; i++) { for (let j = 0; j < length - i - 1; j++) { const current = arr[j]; const next = arr[j + 1]; if (current > next) { arr[j] = next; arr[j + 1] = current; } } } return arr; }
  244. 244. function bubble(arr) { const length = arr.length; for (let i = 0; i < length; i++) { for (let j = 0; j < length - i - 1; j++) { const current = arr[j]; const next = arr[j + 1]; if (current > next) { arr[j] = next; arr[j + 1] = current; } } } return arr; }
  245. 245. function bubble(arr) { const length = arr.length; for (let i = 0; i < length; i++) { for (let j = 0; j < length - i - 1; j++) { const current = arr[j]; const next = arr[j + 1]; if (current > next) { arr[j] = next; arr[j + 1] = current; } } } return arr; }
  246. 246. function bubble(arr) { const length = arr.length; for (let i = 0; i < length; i++) { for (let j = 0; j < length - i - 1; j++) { const current = arr[j]; const next = arr[j + 1]; if (current > next) { arr[j] = next; arr[j + 1] = current; } } } return arr; }
  247. 247. function bubble(arr) { const length = arr.length; for (let i = 0; i < length; i++) { for (let j = 0; j < length - i - 1; j++) { const current = arr[j]; const next = arr[j + 1]; if (current > next) { arr[j] = next; arr[j + 1] = current; } } } return arr; }
  248. 248. Сортировка слиянием (Merge sort)
  249. 249. O(n * logn) Сортировка слиянием (Merge sort)
  250. 250. function mergeSort(unsortedArray) { if (unsortedArray.length <= 1) { return unsortedArray; } const middle = Math.floor(unsortedArray.length / 2); const left = unsortedArray.slice(0, middle); const right = unsortedArray.slice(middle); return merge( mergeSort(left), mergeSort(right) ); }
  251. 251. function mergeSort(unsortedArray) { if (unsortedArray.length <= 1) { return unsortedArray; } const middle = Math.floor(unsortedArray.length / 2); const left = unsortedArray.slice(0, middle); const right = unsortedArray.slice(middle); return merge( mergeSort(left), mergeSort(right) ); }
  252. 252. function mergeSort(unsortedArray) { if (unsortedArray.length <= 1) { return unsortedArray; } const middle = Math.floor(unsortedArray.length / 2); const left = unsortedArray.slice(0, middle); const right = unsortedArray.slice(middle); return merge( mergeSort(left), mergeSort(right) ); }
  253. 253. function mergeSort(unsortedArray) { if (unsortedArray.length <= 1) { return unsortedArray; } const middle = Math.floor(unsortedArray.length / 2); const left = unsortedArray.slice(0, middle); const right = unsortedArray.slice(middle); return merge( mergeSort(left), mergeSort(right) ); }
  254. 254. function mergeSort(unsortedArray) { if (unsortedArray.length <= 1) { return unsortedArray; } const middle = Math.floor(unsortedArray.length / 2); const left = unsortedArray.slice(0, middle); const right = unsortedArray.slice(middle); return merge( mergeSort(left), mergeSort(right) ); }
  255. 255. function mergeSort(unsortedArray) { if (unsortedArray.length <= 1) { return unsortedArray; } const middle = Math.floor(unsortedArray.length / 2); const left = unsortedArray.slice(0, middle); const right = unsortedArray.slice(middle); return merge( mergeSort(left), mergeSort(right) ); }
  256. 256. function mergeSort(unsortedArray) { if (unsortedArray.length <= 1) { return unsortedArray; } const middle = Math.floor(unsortedArray.length / 2); const left = unsortedArray.slice(0, middle); const right = unsortedArray.slice(middle); return merge( mergeSort(left), mergeSort(right) ); }
  257. 257. function mergeSort(unsortedArray) { if (unsortedArray.length <= 1) { return unsortedArray; } const middle = Math.floor(unsortedArray.length / 2); const left = unsortedArray.slice(0, middle); const right = unsortedArray.slice(middle); return merge( mergeSort(left), mergeSort(right) ); }
  258. 258. function merge(left, right) { const resultArray = []; let leftIndex = 0; let rightIndex = 0; while (leftIndex < left.length && rightIndex < right.length) { if (left[leftIndex] < right[rightIndex]) { resultArray.push(left[leftIndex]); leftIndex++; } else { resultArray.push(right[rightIndex]); rightIndex++; } } return resultArray .concat(left.slice(leftIndex)) .concat(right.slice(rightIndex)); }
  259. 259. function merge(left, right) { const resultArray = []; let leftIndex = 0; let rightIndex = 0; while (leftIndex < left.length && rightIndex < right.length) { if (left[leftIndex] < right[rightIndex]) { resultArray.push(left[leftIndex]); leftIndex++; } else { resultArray.push(right[rightIndex]); rightIndex++; } } return resultArray .concat(left.slice(leftIndex)) .concat(right.slice(rightIndex)); }
  260. 260. function merge(left, right) { const resultArray = []; let leftIndex = 0; let rightIndex = 0; while (leftIndex < left.length && rightIndex < right.length) { if (left[leftIndex] < right[rightIndex]) { resultArray.push(left[leftIndex]); leftIndex++; } else { resultArray.push(right[rightIndex]); rightIndex++; } } return resultArray .concat(left.slice(leftIndex)) .concat(right.slice(rightIndex)); }
  261. 261. function merge(left, right) { const resultArray = []; let leftIndex = 0; let rightIndex = 0; while (leftIndex < left.length && rightIndex < right.length) { if (left[leftIndex] < right[rightIndex]) { resultArray.push(left[leftIndex]); leftIndex++; } else { resultArray.push(right[rightIndex]); rightIndex++; } } return resultArray .concat(left.slice(leftIndex)) .concat(right.slice(rightIndex)); }
  262. 262. function merge(left, right) { const resultArray = []; let leftIndex = 0; let rightIndex = 0; while (leftIndex < left.length && rightIndex < right.length) { if (left[leftIndex] < right[rightIndex]) { resultArray.push(left[leftIndex]); leftIndex++; } else { resultArray.push(right[rightIndex]); rightIndex++; } } return resultArray .concat(left.slice(leftIndex)) .concat(right.slice(rightIndex)); }
  263. 263. function merge(left, right) { const resultArray = []; let leftIndex = 0; let rightIndex = 0; while (leftIndex < left.length && rightIndex < right.length) { if (left[leftIndex] < right[rightIndex]) { resultArray.push(left[leftIndex]); leftIndex++; } else { resultArray.push(right[rightIndex]); rightIndex++; } } return resultArray .concat(left.slice(leftIndex)) .concat(right.slice(rightIndex)); }
  264. 264. function merge(left, right) { const resultArray = []; let leftIndex = 0; let rightIndex = 0; while (leftIndex < left.length && rightIndex < right.length) { if (left[leftIndex] < right[rightIndex]) { resultArray.push(left[leftIndex]); leftIndex++; } else { resultArray.push(right[rightIndex]); rightIndex++; } } return resultArray .concat(left.slice(leftIndex)) .concat(right.slice(rightIndex)); }
  265. 265. function merge(left, right) { const resultArray = []; let leftIndex = 0; let rightIndex = 0; while (leftIndex < left.length && rightIndex < right.length) { if (left[leftIndex] < right[rightIndex]) { resultArray.push(left[leftIndex]); leftIndex++; } else { resultArray.push(right[rightIndex]); rightIndex++; } } return resultArray .concat(left.slice(leftIndex)) .concat(right.slice(rightIndex)); }
  266. 266. Память vs. Время
  267. 267. Bogosort (самая неэффективная сортировка)
  268. 268. O(n * n!)Bogosort (самая неэффективная сортировка)
  269. 269. Уже хорошо работает Array.sort()
  270. 270. Уже хорошо работает Array.sort() Разные имплементации в разных браузерах. (и в разных версиях).
  271. 271. Уже хорошо работает Array.sort() Разные имплементации в разных браузерах. (и в разных версиях). В целом, базируется на сортировках слиянием и быстрой сортировке (в зависимости от типа данных в массиве).
  272. 272. Уже хорошо работает Array.sort() Разные имплементации в разных браузерах. (и в разных версиях). В целом, базируется на сортировках слиянием и быстрой сортировке (в зависимости от типа данных в массиве). + на небольших массивах (до 10 элементов) используется сортировка вставками.
  273. 273. Заключение
  274. 274. Заключение ● Вам не нужно знать все алгоритмы и структуры данных. Самые необходимые знания, дающие больше всего пользы, в то же время являются и самыми простыми в освоении.
  275. 275. Заключение ● Вам не нужно знать все алгоритмы и структуры данных. Самые необходимые знания, дающие больше всего пользы, в то же время являются и самыми простыми в освоении. ● Нет необходимости помнить все реализации, вы даже можете забыть какие-то самые важные. Достаточно один раз разобраться в них, чтобы иметь представление о возможностях.
  276. 276. Заключение ● Вам не нужно знать все алгоритмы и структуры данных. Самые необходимые знания, дающие больше всего пользы, в то же время являются и самыми простыми в освоении. ● Нет необходимости помнить все реализации, вы даже можете забыть какие-то самые важные. Достаточно один раз разобраться в них, чтобы иметь представление о возможностях. ● Анализируйте ваши алгоритмы. Задумывайтесь над их эффективностью. Чем эффективнее код вы создаете, тем производительнее и надежнее будет ваш продукт (и тем круче вы станете как разработчик)
  277. 277. Материалы Теория ● Оценка Сложности алгоритма ● Асимптотический анализ алгоритмов ● Структуры данных для самых маленьких ● The complexity of simple algorithms and data structures in JS ● Introduction to Data Structures and Algorithms Практика ● Data Structures ● Fundamentals of Algorithms ● HackerRank
  278. 278. Q&A Слайды Telegram - @adam4leos LinkedIn - Adam Leos adam.leos@pm.me Контакты

×