Среди многих страшных операций в программировании оператор Spread может быть труден для понимания новичком, пытающимся оседлать глубокие воды разработки программного обеспечения. Особенно, если у вас нет знаний в области компьютерных наук.

В этом посте вы узнаете, что такое оператор Spread и как его использовать в JavaScript и ReactJS. Таким образом, вы можете начать получать удовольствие от обучения в качестве разработчика программного обеспечения.

Давайте погрузимся.

Оператор Spread — это оператор Javascript, который можно использовать, когда все элементы объекта или массива необходимо включить в какой-либо список. Он предлагает вам доступ к внутренностям итерируемого объекта.

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

Проще говоря, оператор Spread позволяет нам быстро скопировать весь или часть существующего массива или объекта в другой массив или объект. Это синтаксис ES6, представленный тремя точками (…).

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

Пять (5) способов использования оператора спреда (…)

Ниже приведены различные способы применения оператора JavaScript Spread.

  1. Объединение итерируемых объектов и массивов. Существуют различные способы объединения или объединения объектов в javaScript. Однако оператор Spread — это самый простой способ объединить два или более объектов в новый, содержащий свойства объединенных объектов.
const bucketList = {
       car: 'bentley',
       holiday: 'paris',
       jewelry: 'diamond',
}
const wishList = {
       house: 'duplex',
       location: 'dubai',
       designer: 'gucci',
}
const myDreams = { ...bucketList, ...wishList }
console.log(myDreams);
//{ car: 'bentley', holiday: 'paris', jewelry: 'diamond', house: 'duplex', location: 'duabi', designer: 'gucci'}

В приведенном выше примере существующие объекты в bucketList и wishList были объединены в новый объект в myDreamsс оператором Spread.

2. Дублирование массива:

const items = [
  'phone',
  'book',
  'cup'
];
const tools = [...items]; // the three dots "..." are the spread operator syntax!
console.log(tools);
// ['phone', 'book', 'cup'];

В приведенном выше примере мы видим, что оператор распространения распаковывает элементы массива items.

3. Создание литералов массива. Когда вам нужно добавить новый элемент в локальное хранилище данных или отобразить все ранее сохраненные элементы вместе с новым добавлением, вам пригодится оператор спреда.

const numbers = [50, 60];
const totalNumbers = [...numbers, 70, 80, 90];
console.log(totalNumbers); // [50, 60, 70, 80, 90]

4. В строках: оператор Spread при использовании в строках разделяет каждый символ строки на отдельные символы.

const vocab = ["Adequate"];
const letters = [...vocab];
console.log(letters);
// ["A", "d", "e", "q", "u", "a", "t", "e"]

5. Передача реквизитов в React:Передача реквизитов дочернему компоненту — это, пожалуй, наиболее распространенное использование оператора распространения в приложении React. Если распространяемый вами объект содержит все свойства, которые требуются дочернему компоненту, дочерний компонент будет использовать их и игнорировать остальные.

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

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

В приведенном выше примере оба компонента эквивалентны.

В заключение, оператор JavaScript Spread — это очень простой и мощный инструмент, который сэкономит вам несколько строк кода и повысит удобство сопровождения в приложении React.