You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/02-rest-parameters-spread/article.md
+24-24Lines changed: 24 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,9 +8,9 @@
8
8
-`Object.assign(dest, src1, ..., srcN)` -- копіює властивості з `src1..N` до `dest`.
9
9
- ...і багато інших.
10
10
11
-
У цьому розділі ми дізнаємось, як зробити те саме в власній функції. А також, як передати таким функціям в якості параметрів масиви.
11
+
У цьому розділі ми дізнаємось, як зробити те саме у власній функції. А також, як передавати таким функціям масиви як параметри.
12
12
13
-
## Залишкові параметри `...` (з англ. rest parameters)
13
+
## Залишкові параметри `...` (з англ. "Rest Parameters")
14
14
15
15
Функцію можна викликати з будь-якою кількістю аргументів, незалежно від того, як вона оголошена.
16
16
@@ -25,7 +25,7 @@ alert(sum(1, 2, 3, 4, 5));
25
25
26
26
Помилки із-за "надмірних" аргументів у цьому випадку не буде. Але, звісно ж, враховані будуть лише перші два, тому результатом у коді вище є `3`.
27
27
28
-
Решту параметрів можна включити до визначення функції за допомогою трьох крапок `...` і після них ім'я масив, в який вони передадуться. Точки буквально означають "зібрати решту параметрів у масив".
28
+
Решту переданих параметрів можна можна зібрати разом за допомогою трьох крапок `...` і після них ім'я змінної з масивом, в який вони передадуться. Ці три крапки буквально означають "зібрати решту параметрів у масив".
29
29
30
30
Наприклад, щоб зібрати всі аргументи в масив `args`:
31
31
@@ -43,7 +43,7 @@ alert( sumAll(1, 2) ); // 3
43
43
alert( sumAll(1, 2, 3) ); // 6
44
44
```
45
45
46
-
Ми можемо вказати щоб перші параметри отримувались як аргументи, а в масив пішли всі інші.
46
+
Ми можемо задати щоб перші два аргументи мали свої персональні змінні, а в масив пішли всі решта.
47
47
48
48
У цьому прикладі перші два аргументи переходять у змінні, а решта -- в масив `titles`:
В стародавні часи такої можливості як залишкові параметри в JavaScript не існувало. Тому єдиним способом отримати всі аргументи функції було за допомогою `arguments`. І він все ще працює, ми можемо знайти його в старому коді.
100
100
101
-
Але недоліком є те, що хоч `arguments` є одночасно і псевдомасивом, і ітеровуваним (перебираваним) об'єктом, та все ж це об'єкт, а не масив. Він не підтримує методи масиву, тому ми не можемо наприклад викликати `arguments.map(...)`.
101
+
Але недоліком є те, що хоч `arguments` є одночасно і псевдомасивом, і ітерованим об'єктом, та все ж це об'єкт, а не масив. Він не підтримує методи масиву, тому ми не можемо наприклад викликати `arguments.map(...)`.
102
102
103
103
Крім того, він завжди містить усі аргументи. Ми не можемо отримати лише частину з них, як це можна робити з допомогою залишкових параметрів.
104
104
105
105
Тому, коли нам потрібні вбудовані методи масивів, тоді краще використати залишкові параметри.
106
106
107
-
````smart header="Стрíлкові функції не мають `\"arguments\"`"
108
-
Якщо ми викличемо `arguments`об'єкта всередині стрíлкової функції, він візьме їх із зовнішньої "звичайної" функції.
107
+
````smart header="Стрілкові функції не мають `\"arguments\"`"
108
+
Якщо ми спробуємо звернутись до об'єкта `arguments`всередині стрілкової функції, то отримаємо його з зовнішньої "звичайної" функції.
109
109
110
110
Ось приклад:
111
111
@@ -118,11 +118,11 @@ function f() {
118
118
f(1); // 1
119
119
```
120
120
121
-
Як ми пам’ятаємо, стрíлкові функції не мають власних `this`. Тепер ми знаємо, що у них також немає особливого об'єкту `arguments`.
121
+
Як ми пам’ятаємо, стрілкові функції не мають власних `this`. Тепер ми знаємо, що в них також немає особливого об'єкту `arguments`.
122
122
````
123
123
124
124
125
-
## Синтаксис розширення [#spread-syntax] (з англ. spread syntax)
125
+
## Синтаксис розширення [#spread-syntax] (з англ. "Spread Syntax")
126
126
127
127
Ми щойно побачили, як отримати масив зі списку параметрів.
128
128
@@ -146,11 +146,11 @@ alert( Math.max(arr) ); // NaN
146
146
*/!*
147
147
```
148
148
149
-
І, звісно ж, ми не можемо вручну перераховувати елементи в коді `Math.max(arr[0], arr[1], arr[2])`, тому що ми можемо й не знати, скільки їх існує. Під час виконання нашого сценарію їх може бути багато, а може і не бути. Та й взагалі робити це вручну було б жахливо.
149
+
І, звісно ж, ми не можемо вручну перераховувати елементи в коді `Math.max(arr[0], arr[1], arr[2])`, тому що ми можемо й не знати, скільки їх існує. Під час виконання нашого сценарію їх може бути багато, а може і не бути. Та й взагалі робити це вручну було б дивно і неефективно.
150
150
151
151
Нам допоможе *синтаксис розширення*! Він схожий на параметри залишку, також використовуються `...`, але працює все навпаки.
152
152
153
-
Коли `...arr` використовується в дужках при виклику функції, він "розширює" ітеровуваний об'єкт `arr` до списку аргументів.
153
+
Коли `...arr` використовується в дужках підчас виклику функції, він "розширює" ітеровуваний об'єкт `arr` до списку аргументів.
alert(merged); // 0,3,5,1,2,8,9,15 (0, тоді arr, тоді 2, тоді arr2)
193
193
```
194
194
195
-
У наведених вище прикладах для демонстрації синтаксису розширення ми використовували масив, але підходить будь-який ітеровуваний (перебираваний) об'єкт.
195
+
У наведених вище прикладах для демонстрації синтаксису розширення ми використовували масив, але підходить будь-який ітерований об'єкт.
196
196
197
197
Наприклад, тут ми використовуємо синтаксис розширення, щоб перетворити рядок у масив символів:
198
198
@@ -202,25 +202,25 @@ let str = "Hello";
202
202
alert( [...str] ); // H,e,l,l,o
203
203
```
204
204
205
-
Синтаксис розширення під капотом працює з перебираваними об'єктами так само, як це робить `for..of`.
205
+
Синтаксис розширення під капотом працює з ітерованими об'єктами так само, як це робить `for..of`.
206
206
207
-
Отже, для рядка, `for..of` повертає символи й `...str`перетворюється в `"H","e","l","l","o"`. Список символів передається в ініціалізатор масиву `[...str]`.
207
+
Отже, для рядка, `for..of` повертає символи так само як і `...str`, врешті-решт рядок перетворюється на `"H","e","l","l","o"`. Список символів передається в ініціалізатор масиву `[...str]`.
208
208
209
-
Для цього конкретного завдання ми також могли б використовувати `Array.from`, бо він перетворює перебираваний об'єкт (то й же рядок, або щось інше) на масив:
209
+
Для цього конкретного завдання ми також могли б використовувати `Array.from`, бо він перетворює ітерований об'єкт (то й же рядок, або щось інше) на масив:
210
210
211
211
```js run
212
212
let str = "Hello";
213
213
214
-
// Array.from перетворює перебираваний об'єкт в масив
214
+
// Array.from перетворює ітерований об'єкт на масив
215
215
alert( Array.from(str) ); // H,e,l,l,o
216
216
```
217
217
218
218
Результат такий самий як при `[...str]`.
219
219
220
220
Але між `Array.from(obj)` та `[...obj]` є тонка різниця:
221
221
222
-
- `Array.from` працює як з псевдомасивами, так і з перебираваними об'єктами.
223
-
- Синтаксис розширення працює тільки з перебираваними об'єктами.
222
+
- `Array.from` працює як з псевдомасивами, так і з ітерованими об'єктами.
223
+
- Синтаксис розширення працює тільки з ітерованими об'єктами.
224
224
225
225
Отже, якщо треба перетворити щось на масив, то `Array.from` буде більш універсальним.
0 commit comments