Заявление об ограничении ответственности: этот материал был изучен Кольтом Стилом и Стивеном Грайдером в Курсе учебного курса современного Javascript, который я настоятельно рекомендую.
В этой статье мы рассмотрим оператор распространения… поскольку он относится к JavaScript в вызовах функций, массивах [] и литералах объектов {}.
Вот официальное определение оператора спреда с сайта MDN:
Следуя этому определению, есть 3 места, где мы можем использовать оператор распространения: 1) распространение в вызове функции, 2) распространение в литералах массива, 3) распространение в литералах объекта.
Во всех случаях распространение связано с расширением некоторого итеративного объекта в другое место.
Синтаксически оператор распространения всегда ...
Эти три точки ведут себя по-разному в зависимости от того, где вы их используете.
1) Распространение в вызове функции:
Мы можем использовать распространение в массиве, чтобы разбить элементы массива на разные аргументы для вызова функции:
Использование оператора распространения превратило Math.min ([1, 5, 99, 48, 90]), который возвращает Not A Number (NaN) в Math.min (1, 5, 99, 48, 90), который возвращает минимум значение 1. Используя разброс переменной, числа (… числа), превратил весь массив в 5 аргументов, удалив фигурные скобки массива из вызова функции.
Вы также можете использовать оператор распространения в строке в вызове функции:
Использование расширения строки в вызове функции превращает каждый символ строки в отдельные аргументы. В этом случае каждая буква «HELLO» обрабатывалась как отдельный аргумент: «H» буква 1, «E» буква 2, «L» буква 3, «L» буква 4, «O» буква 5.
В целом, будь то массив или строка, если вы используете оператор распространения для чего-то итерируемого в вызове функции, он будет повторяться с каждым элементом, переданным как отдельный отдельный аргумент.
2) Разложите литерал массива:
Использование оператора распространения перемещает элементы из его массива в новый массив. Другими словами, мы можем использовать оператор распространения, чтобы сделать копию массива:
Хотя у них одинаковые значения, состояния и StatesCopy указывают на разные ссылки на память, поэтому состояния и StatesCopy не равны.
Мы также можем использовать оператор распространения для объединения двух массивов:
Используя распространение на nums1 и nums2, был создан новый массив со всеми элементами из обоих массивов. Обратите внимание, что порядок имеет значение, так как элементы nums1 будут добавлены в массив перед элементами nums2. Мы также можем добавить другие элементы («a», «b») в массив nums2 или nums1. Обратите внимание, что порядок всегда имеет значение.
Мы можем использовать оператор распространения, чтобы разделить строку. В частности, размещение строки в массиве и ее распространение будет делать то же самое, что и ее разбиение:
В этом случае использование оператора распространения в строке в массиве аналогично его использованию в вызове функции. Мы говорим JavaScript выполнить итерацию по этой итерации и добавить ее как элемент в наш новый целевой массив.
3) Распространение в объектных литералах:
Использование разворота в литерале объекта копирует свойства одного объекта в литерал другого объекта. Как и в случае с массивом, мы можем использовать оператор распространения для копирования объекта - или для копирования объекта и добавления других свойств к новому объекту:
Обратите внимание, что, как и в случае с копиями массива, professionalAthlete и athleteClone указывают на разные ссылки в памяти, что делает их не равными друг другу. Обратите внимание, что если вы используете распространение для создания нового объекта, но затем даете ключу другое значение, он перезапишет предыдущую пару ключ / значение:
Мы использовали оператор распространения, чтобы создать копию файла professionalAthlete. Затем мы перезаписываем пару ключ / значение height: ‘tall’ на height: ‘short’.
Можно ли использовать оператор распространения для строки внутри литерала объекта? Да:
Использование оператора распространения в строке в литерале объекта создаст пары ключ / значение, в которых индексы будут ключами, а элемент - в данном случае каждый отдельный символ - будет значением. Такое же создание ключа / значения произойдет, если вы разместите массив внутри литерала объекта:
