Обновления JavaScript, такие как es6 и выше, направлены на изменение кода от императивного к более декларативному.
Чтобы узнать, в чем разница между императивом и декларативом, я настаиваю на прочтении этой замечательной статьи.
Итак, JavaScript ES6 познакомил нас с операторами Spread и Rest. Они оба начинаются с «…» (Нет!! это не «S» в азбуке Морзе 😉). Единственная разница между ними заключается в том, где мы используем это в коде, т. е. в контексте.
Формат
В этой статье я расскажу об операторе Spread в следующем формате:
- Что с аналогией 😃
- Когда его использовать
- Примеры (самое интересное 😍) с важными примечаниями!!
- Вывод
Что
Прежде чем понять оператор распространения, нам нужно знать, что такое iterable:
Итерируемый: это структура данных, которую мы можем перебирать в цикле. Например, массивы, строки, наборы, карты, объекты (они становятся итерируемыми при использовании в массиве) и т. д.
Оператор спреда
Оператор Spread распределяет элементы итерируемого объекта на отдельные элементы.
Аналогия
Представьте, что у вас есть упаковка Skittles, и вы хотите посчитать конфеты каждого цвета. Что бы вы сделали?
Вы обязательно распакуете его и разложите каждую конфету, чтобы сосчитать.
Пример:
Когда использовать оператор спреда
Прежде чем понять, когда использовать оператор распространения, нам нужно знать разницу между аргументом и параметром.
Аргумент. Аргумент — это значение, используемое при вызове функции.
Параметр. Параметры – это имена переменных, определенных в функции.
И теперь, когда использовать оператор распространения
Примеры
В вызовах функций
Функция для суммирования значений:
С оператором спреда
Перед оператором распространения:
Использование оператора распространения больше похоже на написание кода декларативным способом.
Примечание.
Мы можем использовать несколько итераций в качестве операторов распространения в вызове функции в качестве аргументов. (Заказ имеет значение)
Что, если у нас будет больше параметров и меньше аргументов?
Попробуйте сами, что произойдет, если у нас будет больше аргументов и меньше параметров 😃
С массивами
- Объединение массивов
- Копирование массивов
Объединение массивов
- С оператором спреда
- Перед оператором спреда
- Чтобы добавить элементы в существующий массив
Копирование массивов
- С оператором спреда
- До оператора Spread:до оператора Spread мы использовали циклы для копирования массивов.
Примечание
Оператор распространения выполняет поверхностное копирование, т. е. копирует массив только на один уровень вглубь. Вложенные данные по-прежнему связаны с исходным массивом.
со строками
С объектами
- Клонирование объекта
- Объединение объектов
Есть и другие способы клонирования объектов.
Здесь — отличная статья Саманты о клонировании объектов.
Примечание 1:
Если у нас есть одинаковые имена свойств для двух объектов, свойство, которое было размещено последним, выигрывает.
Будьте осторожны при работе со значениями по умолчанию.
Заметка 2:
Оператор распространения также выполняет поверхностную копию с объектами.
Вывод
- ES6 предоставляет нам отличные инструменты для того, чтобы сделать код более декларативным.
- Оператор Spread распределяет элементы итерируемого объекта на отдельные элементы.
- Это отличный инструмент для слияния, клонирования, копирования массивов и объектов.
Ресурсы
- Статья Тайлера МакГинниса об императивном и декларативном программировании
- Статья Саманты о 3 способах клонирования объектов в javascript
- MDN Синтаксис распространения
Спасибо за прочтение 😃