Среди многих страшных операций в программировании оператор Spread может быть труден для понимания новичком, пытающимся оседлать глубокие воды разработки программного обеспечения. Особенно, если у вас нет знаний в области компьютерных наук.
В этом посте вы узнаете, что такое оператор Spread и как его использовать в JavaScript и ReactJS. Таким образом, вы можете начать получать удовольствие от обучения в качестве разработчика программного обеспечения.
Давайте погрузимся.
Оператор Spread — это оператор Javascript, который можно использовать, когда все элементы объекта или массива необходимо включить в какой-либо список. Он предлагает вам доступ к внутренностям итерируемого объекта.
Слово "итерируемый" относится к группе типов данных в информатике. Если быть точным, массивы, литералы объектов и строки.
Проще говоря, оператор Spread позволяет нам быстро скопировать весь или часть существующего массива или объекта в другой массив или объект. Это синтаксис ES6, представленный тремя точками (…).
Оператор Rest, как и оператор Spread, использует синтаксис с тремя точками. В отличие от оператора Spread оператор Rest работает в другом направлении. т. е. в то время как оператор Spread расширяет итерируемый объект на его элементы, оператор Rest сводит набор элементов к одному массиву.
Пять (5) способов использования оператора спреда (…)
Ниже приведены различные способы применения оператора JavaScript Spread.
- Объединение итерируемых объектов и массивов. Существуют различные способы объединения или объединения объектов в 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.