Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 В этом уроке мы рассмотрим другую сторону операции rest - операцию spread. Мы узнаем, как выглядит базовое использование этой операции, как она позволяет работать в неизменяемом виде с формированием новых структур данных и как ее можно использовать в функциях высшего порядка.

2 <h2>Базовое использование spread</h2>

3 spread переводится как растягивание. Она берет коллекцию и растягивает ее на отдельные элементы. Посмотрим ее базовое использование.

4 Мы можем задать список таким образом:

5 Здесь мы перечисляем все аргументы через запятую и на выходе получаем некоторую коллекцию. А можем сделать и по-другому:

6 Здесь мы передаем массив, но слева поставили три точки. Вызов будет преобразован в l( , 10, 23, 234).

7 В этом случае мы видим похожий подход, но это не rest, а именно spread. Используются так же три точки, но в зависимости от места применения это либо rest, либо spread. В данном случае операция применяется к коллекциям, поэтому это spread.

8 Общая форма выглядит так:

9 Здесь мы вызываем функцию и передаем туда некий iterable object, например, массив.

10 В итоге ставим три точки в начале, и это означает, что это spread, который будет растягивать коллекцию на элементы и вызывать функцию соответствующим количеством аргументов.

11 При этом spread в отличие от rest используется шире и не только в вызове функций.

12 <h2>Аргументы</h2>

13 Рассмотрим, как spread может использоваться в вызове функций в более расширенном примере.

14 Поскольку rest используется только в конце, с ним всё гораздо проще. А spread может использоваться в любом месте. Рассмотрим на примере.

15 Допустим, у нас есть функция, которая ожидает на вход пять параметров:

16 Мы передаем ей первый параметр, потом args - этот массив растягивается. Причем args состоит из двух элементов.

17 Далее мы передаем еще один параметр и массив, который состоит из одного параметра и тоже растягивается. В итоге у нас получается, что функция вызывается с пятью параметрами.

18 Неважно, подставляем мы идентификатор или напрямую массив. Принцип одинаковый.

19 Теперь рассмотрим пример с массивами:

20 push принимает любое количество аргументов. Это хороший способ расширить один массив другим. Для этого мы делаем push и растягиваем второй массив внутри метода. Если мы распечатаем первый массив, то получим один плоский массив:

21 Здесь происходит не присоединение последним элементом массива arr2, а каждый элемент из arr2 записывается как отдельный параметр через запятую:

22 <h2>Immutable way</h2>

23 Также spread позволяет работать в неизменяемом виде с формированием новых структур данных. То есть вместо того, чтобы использовать push и изменять объект, мы можем расширить массив - фактически создать новый без изменения старого:

24 Здесь мы создаем массив и внутри него используем тот же spread. В итоге iterableObj будет преобразован в элементы этого массива.

25 spread можно поставить в любом месте. И полученное выражение вернет нам новую структуру данных - новый массив без изменения старого.

26 То же работает и со строчками:

27 <h2>Immutable Reduce</h2>

28 Теперь рассмотрим, как это можно использовать в функциях высшего порядка.

29 Например, мы можем написать функцию reverse таким образом:

30 Здесь мы используем reduce, внутри которого разворачиваем аккумулятор. И мы формируем каждый раз новый массив - добавляем новое значение слева от значений в acc. В итоге мы получаем массив, в котором все элементы в обратном порядке.

31 При таком подходе каждый раз происходит копирование. В определенных языках это хорошо оптимизировано. Но в JavaScript этот процесс занимает время. Если замерить производительность этого кода с копированием, а не с использованием push, он будет достаточно медленным. Поэтому на больших объемах стоит использовать более оптимизированные варианты.

32 Если выводить на страницу до ста элементов, это не повлияет на производительность. При этом можно использовать уже готовые функции. Например, фреймворк React или Redux, которые предлагают управлять стейтом в неизменяемом виде.

33 Рассмотрим еще один пример с дублированием:

34 Здесь фактически происходит то же самое. При этом задача в том, чтобы продублировать каждый элемент. В итоге мы формируем новый массив, делаем spread и в конце записываем value, value. И на выходе получается массив, в котором каждый элемент продублирован два раза.

35 <h2>Объекты</h2>

36 Spread операцию можно применять не только к массивам, но и к объектам:

37 Такой способ позволяет работать с объектами в неизменяемом стиле, что часто используется в коде, например, во фронтенде:<a>https://redux.js.org/recipes/using-object-spread-operator</a>

38 Если во время применения растягивания повторяются ключи, то в результирующий объект записывается правое значение:

39 Эту операцию можно использовать много раз подряд. Например, так можно сливать два объекта в один:

40 <h2>Выводы</h2>

41 В этом уроке мы рассмотрели другую сторону операции rest - операцию spread. Мы узнали, как выглядит базовое использование этой операции, как она позволяет работать в неизменяемом виде с формированием новых структур данных и как ее можно использовать в функциях высшего порядка.