Skip to content

Commit c6472c0

Browse files
vvscodevvscode
authored
Merge pull request #3 from JavaScript-Basic-OTUS/lesson-07
feat: add lesson 07
2 parents b4dbaf9 + 8b0ffb7 commit c6472c0

File tree

7 files changed

+802
-193
lines changed

7 files changed

+802
-193
lines changed

‎lessons/lesson04/lesson.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -657,4 +657,4 @@ describe('createCalculatorUI', () => {
657657

658658
<!-- s -->
659659

660-
Опрос о занятии
660+
Опрос о занятии

‎lessons/lesson06/code/smart-getter/index.html‎

Lines changed: 190 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,91 @@
11
<!DOCTYPE html>
22
<html>
3-
4-
<head>
5-
<title>Safe Getter</title>
6-
<meta charset="UTF-8" />
7-
</head>
8-
9-
<body>
10-
<div id="app"></div>
11-
12-
<script src="src/index.js"></script>
13-
14-
<section>
15-
<h2>Задача: Реализация аналога функции <code>_.get</code> из lodash</h2>
16-
17-
<h3>Минимальный набор знаний</h3>
18-
<ul>
19-
<li>
20-
<strong>Доступ к свойствам объекта (через точку и скобки):</strong> - <code>obj.property</code> или <code>obj["property"]</code>.<br>
21-
Квадратные скобки позволяют использовать переменную с именем свойства. <small>Подробнее: <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Working_with_objects" target="_blank">MDN: Работа с объектами</a></small>
22-
</li>
23-
<li>
24-
<strong>Работа с вложенными объектами:</strong> -
25-
Для доступа к свойствам внутри других объектов используйте последовательный доступ: <code>obj.user.profile.name</code> или <code>obj['user']['profile'].name</code> -
26-
<small>Подробнее: <a href="https://learn.javascript.ru/object" target="_blank">learn.javascript.ru: Объекты</a></small>
27-
</li>
28-
<li>
29-
<strong>Работа со строками и массивами:</strong> -
30-
Используйте <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/split" target="_blank"><code>split()</code></a> для разбивки строки пути на части: <code>'user.profile.name'.split('.')</code>.
31-
</li>
32-
<li>
33-
<strong>Проверка существования свойства:</strong>-
34-
Если обратиться к несуществующему свойству, вернётся <code>undefined</code>. Можно проверить через сравнение с <code>undefined</code> или оператор <code>in</code>: <code>'key' in obj</code>.
35-
<small>Подробнее: <a href="https://learn.javascript.ru/object" target="_blank">learn.javascript.ru: Объекты</a></small>
36-
</li>
37-
<li>
38-
<strong>Условные конструкции:</strong>-
39-
Используйте <code>if</code> для проверки условий, например: если свойство не найдено, вернуть значение по умолчанию.
40-
</li>
41-
<li>
42-
<strong>Объявление функций с несколькими аргументами</strong>
43-
</li>
44-
<li>
45-
<strong>Обработка пустого пути</strong> - как проверить что строка или другое значение "пустое"
46-
</li>
47-
</ul>
48-
49-
50-
51-
<h3>Что нужно сделать</h3>
52-
<p>
53-
Реализуйте функцию <code>get</code>, которая позволяет безопасно получать значения из вложенных объектов по
54-
строковому пути. Эта функция должна работать аналогично методу <a href="https://webdevkin.ru/posts/frontend/lodash-get" target="_blank"><code>_.get</code> из библиотеки lodash</a>.
55-
</p>
56-
<pre><code>
3+
<head>
4+
<title>Safe Getter</title>
5+
<meta charset="UTF-8" />
6+
</head>
7+
8+
<body>
9+
<div id="app"></div>
10+
11+
<script src="src/index.js"></script>
12+
13+
<section>
14+
<h2>Задача: Реализация аналога функции <code>_.get</code> из lodash</h2>
15+
16+
<h3>Минимальный набор знаний</h3>
17+
<ul>
18+
<li>
19+
<strong>Доступ к свойствам объекта (через точку и скобки):</strong> -
20+
<code>obj.property</code> или <code>obj["property"]</code>.<br />
21+
Квадратные скобки позволяют использовать переменную с именем свойства.
22+
<small
23+
>Подробнее:
24+
<a
25+
href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Working_with_objects"
26+
target="_blank"
27+
>MDN: Работа с объектами</a
28+
></small
29+
>
30+
</li>
31+
<li>
32+
<strong>Работа с вложенными объектами:</strong> - Для доступа к
33+
свойствам внутри других объектов используйте последовательный доступ:
34+
<code>obj.user.profile.name</code> или
35+
<code>obj['user']['profile'].name</code> -
36+
<small
37+
>Подробнее:
38+
<a href="https://learn.javascript.ru/object" target="_blank"
39+
>learn.javascript.ru: Объекты</a
40+
></small
41+
>
42+
</li>
43+
<li>
44+
<strong>Работа со строками и массивами:</strong> - Используйте
45+
<a
46+
href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/split"
47+
target="_blank"
48+
><code>split()</code></a
49+
>
50+
для разбивки строки пути на части:
51+
<code>'user.profile.name'.split('.')</code>.
52+
</li>
53+
<li>
54+
<strong>Проверка существования свойства:</strong>- Если обратиться к
55+
несуществующему свойству, вернётся <code>undefined</code>. Можно
56+
проверить через сравнение с <code>undefined</code> или оператор
57+
<code>in</code>: <code>'key' in obj</code>.
58+
<small
59+
>Подробнее:
60+
<a href="https://learn.javascript.ru/object" target="_blank"
61+
>learn.javascript.ru: Объекты</a
62+
></small
63+
>
64+
</li>
65+
<li>
66+
<strong>Условные конструкции:</strong>- Используйте
67+
<code>if</code> для проверки условий, например: если свойство не
68+
найдено, вернуть значение по умолчанию.
69+
</li>
70+
<li>
71+
<strong>Объявление функций с несколькими аргументами</strong>
72+
</li>
73+
<li>
74+
<strong>Обработка пустого пути</strong> - как проверить что строка или
75+
другое значение "пустое"
76+
</li>
77+
</ul>
78+
79+
<h3>Что нужно сделать</h3>
80+
<p>
81+
Реализуйте функцию <code>get</code>, которая позволяет безопасно
82+
получать значения из вложенных объектов по строковому пути. Эта функция
83+
должна работать аналогично методу
84+
<a href="https://webdevkin.ru/posts/frontend/lodash-get" target="_blank"
85+
><code>_.get</code> из библиотеки lodash</a
86+
>.
87+
</p>
88+
<pre><code>
5789
/**
5890
* get: Smart getter for object props
5991
*
@@ -64,65 +96,101 @@ <h3>Что нужно сделать</h3>
6496
* @param {any} fallbackValue
6597
*/
6698
</code></pre>
67-
<table>
68-
<thead>
69-
<tr>
70-
<th>Описание в JSDoc</th>
71-
<th>Пояснение простыми словами</th>
72-
</tr>
73-
</thead>
74-
<tbody>
75-
<tr>
76-
<td><code>get: Smart getter for object props</code></td>
77-
<td>Это функция, которая "умно" достает значения свойств из объекта.</td>
78-
</tr>
79-
<tr>
80-
<td><code>Check tests for usage examples</code></td>
81-
<td>Посмотри тесты, чтобы увидеть примеры использования этой функции.</td>
82-
</tr>
83-
<tr>
84-
<td><code>@param {any} obj</code></td>
85-
<td>Первый аргумент — объект, из которого нужно получить значение.</td>
86-
</tr>
87-
<tr>
88-
<td><code>@param {string} property</code></td>
89-
<td>Второй аргумент — строка с путем к нужному свойству, например: <code>'user.profile.name'</code>.</td>
90-
</tr>
91-
<tr>
92-
<td><code>@param {any} fallbackValue</code></td>
93-
<td>Третий аргумент — значение по умолчанию, которое возвращается, если свойство не найдено.</td>
94-
</tr>
95-
</tbody>
96-
</table>
97-
98-
99-
<h3>Описание задачи</h3>
100-
<ul>
101-
<li>Функция принимает объект, строку с путем до свойства (через точку или скобки, например,
102-
<code>'user.profile.name'</code> или <code>'user["profile"].name'</code>) и значение по умолчанию.</li>
103-
<li>Возвращает значение, найденное по этому пути, либо значение по умолчанию, если путь не существует или где-то
104-
на пути встречается <code>undefined</code> или <code>null</code>.</li>
105-
<li>Если путь пустой, функция должна вернуть сам объект.</li>
106-
</ul>
107-
108-
<h3>Когда <a href="https://medium.com/nuances-of-programming/%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-lodash-%D0%BF%D0%BE-%D0%BF%D1%80%D0%B5%D0%B6%D0%BD%D0%B5%D0%BC%D1%83-%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%B5%D0%BD-5c6906df9617">бывает полезна</a></h3>
109-
<ul>
110-
<li>Когда структура объекта заранее неизвестна или может быть глубоко вложенной.</li>
111-
<li>Когда нужно избежать ошибок при попытке доступа к несуществующим свойствам (например,
112-
<code>Cannot read property 'x' of undefined'</code>).</li>
113-
<li>Для обработки данных из API, где некоторые поля могут отсутствовать.</li>
114-
</ul>
115-
116-
<h3>Где такая функция уже используется</h3>
117-
<ul>
118-
<li>В библиотеке lodash функция называется <code>_.get</code> и широко применяется для безопасного доступа к
119-
вложенным данным.</li>
120-
<li>Аналогичные функции есть в других библиотеках, например, в Ramda (<code>R.path</code>), а также в различных
121-
утилитах для JavaScript/TypeScript.</li>
122-
</ul>
123-
124-
<h3>Пример использования</h3>
125-
<pre><code class="language-js">
99+
<table>
100+
<thead>
101+
<tr>
102+
<th>Описание в JSDoc</th>
103+
<th>Пояснение простыми словами</th>
104+
</tr>
105+
</thead>
106+
<tbody>
107+
<tr>
108+
<td><code>get: Smart getter for object props</code></td>
109+
<td>
110+
Это функция, которая "умно" достает значения свойств из объекта.
111+
</td>
112+
</tr>
113+
<tr>
114+
<td><code>Check tests for usage examples</code></td>
115+
<td>
116+
Посмотри тесты, чтобы увидеть примеры использования этой функции.
117+
</td>
118+
</tr>
119+
<tr>
120+
<td><code>@param {any} obj</code></td>
121+
<td>
122+
Первый аргумент — объект, из которого нужно получить значение.
123+
</td>
124+
</tr>
125+
<tr>
126+
<td><code>@param {string} property</code></td>
127+
<td>
128+
Второй аргумент — строка с путем к нужному свойству, например:
129+
<code>'user.profile.name'</code>.
130+
</td>
131+
</tr>
132+
<tr>
133+
<td><code>@param {any} fallbackValue</code></td>
134+
<td>
135+
Третий аргумент — значение по умолчанию, которое возвращается,
136+
если свойство не найдено.
137+
</td>
138+
</tr>
139+
</tbody>
140+
</table>
141+
142+
<h3>Описание задачи</h3>
143+
<ul>
144+
<li>
145+
Функция принимает объект, строку с путем до свойства (через точку или
146+
скобки, например, <code>'user.profile.name'</code> или
147+
<code>'user["profile"].name'</code>) и значение по умолчанию.
148+
</li>
149+
<li>
150+
Возвращает значение, найденное по этому пути, либо значение по
151+
умолчанию, если путь не существует или где-то на пути встречается
152+
<code>undefined</code> или <code>null</code>.
153+
</li>
154+
<li>Если путь пустой, функция должна вернуть сам объект.</li>
155+
</ul>
156+
157+
<h3>
158+
Когда
159+
<a
160+
href="https://medium.com/nuances-of-programming/%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-lodash-%D0%BF%D0%BE-%D0%BF%D1%80%D0%B5%D0%B6%D0%BD%D0%B5%D0%BC%D1%83-%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%B5%D0%BD-5c6906df9617"
161+
>бывает полезна</a
162+
>
163+
</h3>
164+
<ul>
165+
<li>
166+
Когда структура объекта заранее неизвестна или может быть глубоко
167+
вложенной.
168+
</li>
169+
<li>
170+
Когда нужно избежать ошибок при попытке доступа к несуществующим
171+
свойствам (например,
172+
<code>Cannot read property 'x' of undefined'</code>).
173+
</li>
174+
<li>
175+
Для обработки данных из API, где некоторые поля могут отсутствовать.
176+
</li>
177+
</ul>
178+
179+
<h3>Где такая функция уже используется</h3>
180+
<ul>
181+
<li>
182+
В библиотеке lodash функция называется <code>_.get</code> и широко
183+
применяется для безопасного доступа к вложенным данным.
184+
</li>
185+
<li>
186+
Аналогичные функции есть в других библиотеках, например, в Ramda
187+
(<code>R.path</code>), а также в различных утилитах для
188+
JavaScript/TypeScript.
189+
</li>
190+
</ul>
191+
192+
<h3>Пример использования</h3>
193+
<pre><code class="language-js">
126194
const obj = { user: { profile: { name: 'Ivan' } } };
127195

128196
get(obj, 'user.profile.name', 'No name'); // вернет 'Ivan'
@@ -131,10 +199,12 @@ <h3>Пример использования</h3>
131199
get(obj, '', 'default'); // вернет весь объект obj
132200
</code></pre>
133201

134-
<p><strong>Ваша задача — реализовать эту функцию самостоятельно, не используя lodash или другие сторонние
135-
библиотеки.</strong></p>
136-
</section>
137-
138-
</body>
139-
140-
</html>
202+
<p>
203+
<strong
204+
>Ваша задача — реализовать эту функцию самостоятельно, не используя
205+
lodash или другие сторонние библиотеки.</strong
206+
>
207+
</p>
208+
</section>
209+
</body>
210+
</html>

‎lessons/lesson07/images/git_show.png‎

74.9 KB
Loading

0 commit comments

Comments
 (0)