Обновления JavaScript, такие как es6 и выше, направлены на изменение кода от императивного к более декларативному.

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

Итак, JavaScript ES6 познакомил нас с операторами Spread и Rest. Они оба начинаются с «…» (Нет!! это не «S» в азбуке Морзе 😉). Единственная разница между ними заключается в том, где мы используем это в коде, т. е. в контексте.

Формат

В этой статье я расскажу об операторе Spread в следующем формате:

  • Что с аналогией 😃
  • Когда его использовать
  • Примеры (самое интересное 😍) с важными примечаниями!!
  • Вывод

Что

Прежде чем понять оператор распространения, нам нужно знать, что такое iterable:

Итерируемый: это структура данных, которую мы можем перебирать в цикле. Например, массивы, строки, наборы, карты, объекты (они становятся итерируемыми при использовании в массиве) и т. д.

Оператор спреда

Оператор Spread распределяет элементы итерируемого объекта на отдельные элементы.

Аналогия

Представьте, что у вас есть упаковка Skittles, и вы хотите посчитать конфеты каждого цвета. Что бы вы сделали?

Вы обязательно распакуете его и разложите каждую конфету, чтобы сосчитать.

Пример:

Когда использовать оператор спреда

Прежде чем понять, когда использовать оператор распространения, нам нужно знать разницу между аргументом и параметром.

Аргумент. Аргумент — это значение, используемое при вызове функции.

Параметр. Параметры – это имена переменных, определенных в функции.

И теперь, когда использовать оператор распространения

Примеры

В вызовах функций

Функция для суммирования значений:

С оператором спреда

Перед оператором распространения:

Использование оператора распространения больше похоже на написание кода декларативным способом.

Примечание.

Мы можем использовать несколько итераций в качестве операторов распространения в вызове функции в качестве аргументов. (Заказ имеет значение)

Что, если у нас будет больше параметров и меньше аргументов?

Попробуйте сами, что произойдет, если у нас будет больше аргументов и меньше параметров 😃

С массивами

  • Объединение массивов
  • Копирование массивов

Объединение массивов

  • С оператором спреда
  • Перед оператором спреда
  • Чтобы добавить элементы в существующий массив

Копирование массивов

  • С оператором спреда
  • До оператора Spread:до оператора Spread мы использовали циклы для копирования массивов.

Примечание

Оператор распространения выполняет поверхностное копирование, т. е. копирует массив только на один уровень вглубь. Вложенные данные по-прежнему связаны с исходным массивом.

со строками

С объектами

  • Клонирование объекта
  • Объединение объектов

Есть и другие способы клонирования объектов.

Здесь — отличная статья Саманты о клонировании объектов.

Примечание 1:

Если у нас есть одинаковые имена свойств для двух объектов, свойство, которое было размещено последним, выигрывает.

Будьте осторожны при работе со значениями по умолчанию.

Заметка 2:

Оператор распространения также выполняет поверхностную копию с объектами.

Вывод

  • ES6 предоставляет нам отличные инструменты для того, чтобы сделать код более декларативным.
  • Оператор Spread распределяет элементы итерируемого объекта на отдельные элементы.
  • Это отличный инструмент для слияния, клонирования, копирования массивов и объектов.

Ресурсы

Спасибо за прочтение 😃