Що роблять ці три крапки в React?

Що ...робити в цьому коді React (за допомогою JSX) і як він називається?

<Modal {...this.props} title='Modal heading' animation={false}>

Це позначення поширення власності . Він був доданий в ES2018 (спред для масивів / ітерабелів був раніше, ES2015), але він підтримувався в проектах React протягом тривалого часу за допомогою транспіляції (як " атрибути поширення JSX ", хоча ви можете це зробити і в іншому місці, а не лише в атрибутах) ).

{...this.props} розповсюджує "власні" перелічені властивості у propsвигляді дискретних властивостей Modalелемента, який ви створюєте. Наприклад, якщо вони this.propsмістяться a: 1і b: 2, то

<Modal {...this.props} title='Modal heading' animation={false}>

було б те саме, що

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Але це динамічно, тому які б там не були "власні" властивості props.

Оскільки childrenце "власна" властивість у props, спред буде включати його. Отже, якщо компонент, де це відображається, мав дочірні елементи, вони будуть передані на Modal. Розміщення дочірніх елементів між тегом, що відкривається, і тегами, що закриваються, є лише синтаксичним цукром - хорошим видом - для введення childrenвластивості в тег відкриття. Приклад:

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);

.first {
  color: green;
}
.second {
  color: blue;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Позначення розповсюдження зручно не тільки для цього випадку використання, але і для створення нового об'єкта з більшістю (або всіма) властивостями існуючого об'єкта - який з’являється багато під час оновлення стану, оскільки ви не можете змінити стан безпосередньо:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

Це замінює this.state.fooновий об'єкт з усіма тими ж властивостями, як fooінакше aвластивість, яка стає "updated":

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);

.as-console-wrapper {
  max-height: 100% !important;
}

Як ви знаєте ..., називаються атрибути розповсюдження, ім'я яких представляє, дозволяє розширити вираз.

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

І в цьому випадку (я його спрощу).

//just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

Це:

<Modal {...person} title='Modal heading' animation={false} />

дорівнює

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

Отже, коротше, ми можемо сказати , що це акуратне скорочення .

Три точки представляють оператор розповсюдження в ES6. Це дозволяє нам робити дуже багато речей у Javascript:

1. Об'єднайте масиви

   var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
   var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
   var games = [...shooterGames, ...racingGames];
   
   console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']

2. Знищення масиву

     var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
     var [first, ...remaining] = shooterGames;
     console.log(first); //Call of Duty
     console.log(remaining); //['Far Cry', 'Resident Evil']

3. Поєднання двох об'єктів

   var myCrush = {
     firstname: 'Selena',
     middlename: 'Marie'
   };
   
   var lastname = 'my last name';
   
   var myWife = {
     ...myCrush,
     lastname
   }
   
   console.log(myWife); // {firstname: 'Selena',
                        //   middlename: 'Marie',
                        //   lastname: 'my last name'}

Існує ще одне використання для трьох точок, яке відоме як « Параметри відпочинку», і це дозволяє приймати всі аргументи до функції в один масив.

4. Аргументи функції як масив

    function fun1(...params) { 
   
    }  

Три точки в JavaScript розповсюджуються / відпочивають оператором .

Оператор розповсюдження

Синтаксис поширення дозволяє вираз розкладається в тих місцях , де , як очікується , декілька аргументів.

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

Параметри відпочинку

Синтаксис параметра « решта» використовується для функцій із змінною кількістю аргументів.

function(a, b, ...theArgs) {
  // ...
}

Оператор розповсюдження / спокою для масивів був представлений в ES6. Є пропозиція Держави 2 властивостей розповсюдження / відпочинку об'єктів.

TypeScript також підтримує синтаксис розповсюдження і може транспілювати його в старіші версії ECMAScript з незначними проблемами .

Це особливість ES6, яка використовується і в React. Подивіться на приклад нижче:

function Sum(x,y,z) {
   return x + y + z;
}
console.log(Sum(1,2,3)); //6

Цей спосіб чудово, якщо у нас максимум 3 параметри. Але що робити, якщо нам потрібно додати, наприклад, 110 параметрів. Чи слід їх визначити і додавати по черзі?

Звичайно, є простіший спосіб зробити це, який називається SPREAD . Замість передачі всіх цих параметрів ви пишете:

function (...numbers){} 

Ми не маємо уявлення, скільки у нас параметрів, але ми знаємо, що існує маса цих параметрів. На основі ES6, ми можемо переписати вищевказану функцію, як показано нижче, і використовувати спред і відображення між ними, щоб зробити це так само просто, як шматок пирога:

let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45

Це просто визначення реквізиту по-іншому в JSX для вас!

Це використовується ... ES6 оператор масиву та об’єктів (об'єкт ще не повністю підтримується), тому в основному, якщо ви вже визначите реквізит, ви можете передати його своєму елементу таким чином.

Тож у вашому випадку код повинен бути приблизно таким:

function yourA() {
  const props = {name='Alireza', age='35'};
  <Modal {...props} title='Modal heading' animation={false} />
}

тому реквізит, який ви визначили, тепер відокремлений і при необхідності може бути використаний повторно.

Це дорівнює:

function yourA() {
  <Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}

Ось цитати команди React про оператор розкидання в JSX:

Атрибути розповсюдження JSX Якщо ви знаєте всі властивості, які ви хочете розмістити на компоненті достроково, користуватися JSX просто:

var component = <Component foo={x} bar={y} />;

Мутація реквізиту погана
Якщо ви не знаєте, які властивості ви хочете встановити, можливо, пізніше додати їх до об’єкта:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

Це анти-шаблон, оскільки це означає, що ми не можемо допомогти вам перевірити правильні прототипи до способу пізніше. Це означає, що ваші помилки propTypes закінчуються криптованим слідом стека.

Реквізит слід вважати незмінним. Вимкнення предмета реквізиту десь в іншому місці може спричинити несподівані наслідки, так що в ідеалі це було б замороженим об'єктом на даний момент.

Поширення атрибутів
Тепер ви можете використовувати нову функцію JSX під назвою атрибути спред:

var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;

Властивості об'єкта, який ви передаєте, копіюються на реквізити компонента.

Ви можете використовувати це кілька разів або комбінувати його з іншими атрибутами. Порядок специфікації є важливим. Пізніші атрибути переосмислюють попередні.

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

Що з дивними ... нотаціями?
Оператор ... (або оператор розповсюдження) вже підтримується для масивів у ES6. Існує також пропозиція ECMAScript для властивостей об'єкта відпочинку та розповсюдження. Ми використовуємо ці підтримувані та розробляючі стандарти, щоб забезпечити більш чистий синтаксис у JSX.

Для тих, хто походить із світу Python, атрибути розповсюдження JSX еквівалентні розпаковуванню списків аргументів ( **оператор Python -оператор).

Я усвідомлюю, що це питання JSX, але робота з аналогіями іноді допомагає швидше розібратися.

...(Спред оператор) використовується в реагують на:

забезпечити акуратний спосіб передачі реквізиту від батьківського до дочірнього компонентів. наприклад, з урахуванням цих реквізитів у батьківському компоненті,

this.props = {
  username: "danM",
  email: "dan@mail.com"
}

їх можна таким чином передавати дитині,

<ChildComponent {...this.props} />

що подібне до цього

<ChildComponent username={this.props.username} email={this.props.email} />

але спосіб очищення.

Три крапки ...представляють оператори розповсюдження або параметри відпочинку ,

Це дозволяє розширити вираз масиву або рядок або все, що може бути повторенням, в місцях, де очікується нульовий або більше аргументів для викликів функцій або елементів для масиву.

• Об’єднайте два масиви

var arr1 = [1,2,3];
var arr2 = [4,5,6];

arr1 = [...arr1, ...arr2];
console.log(arr1);  //[1, 2, 3, 4, 5, 6]

• Копіювання масиву:

var arr = [1, 2, 3];
var arr2 = [...arr];

console.log(arr); //[1, 2, 3]

Примітка. Синтаксис розповсюдження фактично заглиблюється на один рівень при копіюванні масиву. Тому це може бути непридатним для копіювання багатовимірних масивів, як показано в наступному прикладі (це те саме з Object.assign () та синтаксисом розповсюдження).

• Додайте значення одного масиву до іншого за певним індексом, наприклад 3:

var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6]
console.log(arr2);	// [1, 2, 3, 4, 5, 6]

• При виклику конструктора з новим:

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

console.log(d);

• Поширення в об'єктних літералах:

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
console.log(clonedObj);	//{foo: "bar", x: 42}

var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);	//{foo: "baz", x: 42, y: 13}

Зауважте, що fooвластивість obj1 була перезаписана fooвластивістю obj2

• Як синтаксис параметра відпочинку, який дозволяє нам представляти невизначене число аргументів як масив:

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));	//6
console.log(sum(1, 2, 3, 4));	//10

Примітка: Синтаксис розповсюдження (крім випадків, що стосується властивостей розповсюдження) може застосовуватися лише до ітерабельних об'єктів: Отже, наступне призведе до помилки

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

Довідка1

Довідка2

Кудос до Брендона Мореллі. Він чудово пояснив тут , але посилання можуть загинути, тому я просто вставляю вміст нижче:

Синтаксис поширення - це просто три крапки: ... він дозволяє ітерабельно розширюватися в місцях, де очікуються аргументи 0+. Визначення жорсткі без контексту. Давайте вивчимо кілька різних випадків використання, щоб допомогти зрозуміти, що це означає.

Приклад №1 - Вставлення масивів Погляньте на код нижче. У цьому коді ми не використовуємо синтаксис розповсюдження:

var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];

console.log(arr);

Вище ми створили масив з назвою mid. Потім ми створюємо другий масив, який містить наш midмасив. Нарешті ми виходимо з результату. Що ви очікуєте arrнадрукувати? Натисніть Виконати вище, щоб побачити, що відбувається Ось вихід:

[1, 2, [3, 4], 5, 6]

Це результат, який ви очікували? Вставивши midмасив у arrмасив, ми закінчили масив у масиві. Це добре, якщо це була мета. Але що робити, якщо ви хочете лише один масив зі значеннями від 1 до 6? Для цього ми можемо використовувати синтаксис поширення! Пам’ятайте, синтаксис поширення дозволяє розширити елементи нашого масиву. Розглянемо код нижче. Все те саме - за винятком того, що ми зараз використовуємо синтаксис розширення для вставки midмасиву в arrмасив:

var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];

console.log(arr);

І коли ви натискаєте кнопку запуску, ось результат:

[1, 2, 3, 4, 5, 6]

Дивовижно! Пам'ятаєте визначення синтаксису поширення, яке ви тільки що прочитали вище? Ось де це вступає в гру. Як ви бачите, коли ми створюємо arrмасив і використовуємо оператор розповсюдження на midмасиві, замість того, щоб просто вставляти, midмасив розширюється. Це розширення означає, що кожен елемент у midмасиві вставляється в arrмасив. Замість вкладених масивів результат - це єдиний масив чисел, що становить від 1 до 6.

Приклад №2 - У Math JavaScript є вбудований математичний об'єкт, який дозволяє нам робити цікаві математичні обчислення. У цьому прикладі ми розглянемо Math.max(). Якщо ви не знайомі, Math.max()повертає найбільше з нуля або більше чисел. Ось кілька прикладів:

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

Як бачите, якщо ви хочете знайти максимальне значення декількох чисел, Math.max()потрібні кілька параметрів. Ви, на жаль, не можете просто використовувати один масив як вхід. Перед синтаксисом розповсюдження найпростіший спосіб використання Math.max()в масиві - це використання.apply()

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));

Це працює, це просто дійсно дратує. Тепер погляньмо, як ми робимо те саме, що і з синтаксисом розповсюдження:

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);

console.log(max);

Замість того, щоб створювати функцію та використовувати метод нанесення, щоб повернути результат Math.max(), нам потрібні лише два рядки коду! Синтаксис розповсюдження розширює наші елементи масиву та вводить кожен елемент нашого масиву окремо в Math.max()метод!

Приклад №3 - Скопіюйте масив В JavaScript ви не можете просто скопіювати масив, встановивши нову змінну, рівну вже існуючому масиву. Розглянемо наступний приклад коду:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

console.log(arr2);

Після натискання клавіші Run ви отримаєте такий результат:

['a', 'b', 'c']

Тепер, на перший погляд, схоже, що це спрацювало - схоже, ми скопіювали значення arr в arr2. Але це не те, що сталося. Розумієте, під час роботи з об'єктами в javascript (масиви - це тип об'єкта), які ми призначаємо за посиланням, а не за значенням. Це означає, що arr2 був призначений для того ж посилання, що і arr. Іншими словами, все, що ми робимо для arr2, також вплине на вихідний масив arr (і навпаки). Подивіться нижче:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

arr2.push('d');

console.log(arr);

Вище ми всунули новий елемент d у arr2. Однак, коли ми виходимо із значення arr, ви побачите, що значення d також було додане до цього масиву:

['a', 'b', 'c', 'd']

Не потрібно боятися, хоча! Ми можемо використовувати оператор розповсюдження! Розглянемо код нижче. Це майже те саме, що вище. Замість цього ми використовували оператор розповсюдження в межах квадратних дужок:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

console.log(arr2);

Натисніть запустити, і ви побачите очікуваний вихід:

['a', 'b', 'c']

Вище значення масиву в arr розширювались і ставали окремими елементами, які потім були призначені arr2. Тепер ми можемо змінити масив arr2 скільки завгодно, без наслідків для початкового масиву arr:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

arr2.push('d');

console.log(arr);

Знову ж таки, причина цього працює в тому, що значення arr розширено, щоб заповнити дужки нашого визначення масиву arr2. Таким чином, ми встановлюємо arr2 рівним індивідуальним значенням arr замість посилання на arr, як ми це робили в першому прикладі.

Приклад бонусу - String to Array Як цікавий остаточний приклад, ви можете використовувати синтаксис спред для перетворення рядка в масив. Просто використовуйте синтаксис розповсюдження в парі квадратних дужок:

var str = "hello";
var chars = [...str];

console.log(chars);

Три точки (...)називаються оператором розповсюдження, і це концептуально схоже на оператора поширення масиву ES6, JSX, використовуючи ці підтримувані та розробляючі стандарти, щоб забезпечити більш чистий синтаксис у JSX

Властивості розповсюдження в ініціалізаторах об'єктів копіюють власні перелічені властивості з наданого об'єкта на новостворений об’єкт.

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

Довідка:

1) https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties

2) https://facebook.github.io/react/docs/jsx-spread.html

Значення ... залежить від того, де ви його використовуєте в коді,

1. Використовується для розповсюдження / копіювання масиву / об’єкта - це допомагає копіювати масив / об’єкт, а також додавати нові значення масиву / додавати нові властивості до об’єкта, що є необов'язковим.

const numbers = [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers) //prints [1,2,3,4] 

const person = {
 name: 'Max'
};

const newPerson = {...person, age:28};
console.log(newPerson); //prints {name:'Max', age:28}

2. Використовується для об'єднання аргументів функції в один масив - Ви можете використовувати функції масиву на ньому.

const filter = (...args) => {
   return args.filter(el => el ===1);
}

console.log(filter(1,2,3)); //prints [1] 

Це оператор розповсюдження ...

Наприклад, якщо у вас є масив first=[1,2,3,4,5]та інший second=[6,7,8].

[...first, ...second] //result is [1,2,3,4,5,6,7,8]

Те ж саме можна зробити і з об'єктами json.

Коротше кажучи, три крапки ...є оператором розповсюдження в ES6 (ES2015). Оператор розповсюдження отримає всі дані.

let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];


console.log(b);

Дасть результат [1,2,3,4,5,6]

console.log(c);

Дасть результат [7,8,1,2,3,4]

Зазвичай називається оператором розповсюдження, він використовується для розширення, де потрібно

приклад

const SomeStyle = {
   margin:10,
   background:#somehexa
}

Ви можете використовувати це там, де вам потрібно більше про синтаксис розповсюдження оператора спред .

Поширення атрибутів, які використовуються для передачі декількох властивостей простим способом

{... this.props} є власністю цього.props

Використання {...} Оператора розповсюдження з реквізитами нижче

this.props = 
 { 
    firstName: 'Dan', 
    lastName: 'Abramov', 
    city: 'New York',
    country: 'USA' 
}

Без {...} Спред

<Child 
  firstName={this.props.firstName}
  lastName={this.props.lastName}
  city={this.props.city}
  country={this.props.country}

> 

За допомогою {...} Поширення

<Child { ...this.props } />

Девід Абрамова про оператора Spread (Творець Redux)

... цей синтаксис є частиною ES6, а не те, що ви можете використовувати лише в React. Він може використовуватися двома різними способами; як оператор розповсюдження АБО як параметр відпочинку. Ви можете дізнатися більше з цієї статті: https://www.techiediaries.com/react-spread-operator-props-setstate/

те, що ви згадали у запитанні, є щось подібне, припустимо так,

    function HelloUser() {
      return <Hello Name="ABC" City="XYZ" />;
    }

за допомогою оператора розповсюдження ви можете передавати реквізит на такий компонент.

     function HelloUser() {
       const props = {Name: 'ABC', City: 'XYZ'};
       return <Hello {...props} />;
     }

Звичайна практика передавати реквізити у програмі React. Роблячи це, ми можемо застосовувати зміни стану до дочірнього компонента незалежно від того, чи це вони чисті чи нечисті (без громадянства чи стану). Бувають випадки, коли найкращим підходом при передачі реквізиту є передача особливих властивостей чи цілого об'єкта властивостей. Завдяки підтримці масивів в ES6 нам дали позначення "...", і завдяки цьому ми маємо можливість досягти передачі цілого об'єкта дитині.

Типовий процес передачі реквізиту дитині відзначається цим синтаксисом:

var component = <Component foo={x} bar={y} />;

Це чудово використовувати, коли кількість реквізитів мінімальна, але стає некерованою, коли кількість опор стає занадто значною. Проблема з цим методом виникає, коли ви не знаєте властивостей, необхідних в дочірніх компонентах, а типовим методом JavaScript є просте встановлення цих властивостей і прив'язування до об'єкта пізніше. Це спричиняє проблеми з перевіркою propType та помилками відстеження криптовалютних стеків, які не є корисними та призводять до затримок налагодження. Нижче наведено приклад цієї практики, а чого не робити:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;

Цього ж результату можна досягти, але з більш відповідним успіхом, виконавши це:

var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?

Але не використовуємо розширення JSX або JSX, щоб повернути це назад у рівняння, ми можемо зробити щось подібне:

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

Властивості, включені до "... реквізиту", є foo: x, bar: y. Це може поєднуватися з іншими атрибутами для зміни властивостей "... реквізиту" за допомогою цього синтаксису:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

Крім того, ми можемо копіювати інші об’єкти властивості один на одного або комбінувати їх таким чином:

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

Або об'єднайте два різних об’єкти на кшталт цього (це ще не доступно у всіх реагуючих версіях):

var ab = { ...a, ...b }; // merge(a, b)

Інший спосіб пояснення цього, згідно з повідомленням на сайті Facebook, що реагує / документує:

Якщо у вас вже є "реквізит" як об'єкт, і ви хочете передати його в JSX, ви можете використовувати "..." як оператор SPREAD для передачі всього об'єкта реквізиту. Наступні два приклади еквівалентні:

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



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

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

Його називають оператором розповсюдження. Наприклад, нехай hello = {name: '', msg: ''} нехай hello1 = {... hello} Тепер властивості привіт-об'єкта копіюються в hello1.

Він називається синтаксисом розповсюдження в JavaScript.

Він використовується для деструктуризації масиву або об'єкта в JavaScript.

приклад:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

Ви можете зробити це таким же результатом і Object.assign() функції в javascript.

Довідка: розповсюдження синтаксису

Це буде складено у:

React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)

де він дає більше двох властивостей titleі animationпонад propsхост-елемент.

...є оператором ES6, який називається Spread .

Дивіться https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

оператор розповсюдження (потрійний оператор) вводить у скрипт ecama 6 (ES6). Сценарій ecama (ES6) - це обгортка JavaScript.

оператор розповсюдження чисельних властивостей у реквізиті this.props = {firstName: 'Dan', lastName: 'Абрамов', місто: 'Нью-Йорк', країна: 'США'}

{... this.props} = {firstName: 'Dan', lastName: 'Abramov', місто: 'New York', країна: 'USA'}

Але основний оператор розповсюдження функції використовується для еталонного типу.

For example
let person= {
    name: 'Alex',
    age: 35 
}
person1= person;

person1.name = "Raheel";

console.log( person.name); // output: Raheel

Це називається еталонним типом, один об'єкт впливає на інші об'єкти, оскільки вони можуть бути доступними для пам'яті. Якщо ви отримуєте значення незалежно від середньої пам’яті поширення, обидва використовують оператор розширення.

 let person= {
        name: 'Alex',
        age: 35 
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // output: Alex

якщо у вас є масив елементів, і ви хочете відобразити елементи, які ви просто використовуєте ... arrayemaments, і він повториться над усіма елементами

...(три точки в Javascript) називається синтаксисом Spread або Opead Spread. Це дозволяє розширювати ітерабельний вираз, такий як вираз масиву або рядок, або розширювати вираз об'єкта скрізь, де розміщено. Це не конкретно для React. Це оператор Javascript.

Усі ці відповіді тут корисні, але я хочу перерахувати найбільш використовувані практичні випадки використання синтаксису Spread (Opead Operator).

1. Комбінувати масиви (об'єднати масиви)

Існує безліч способів комбінування масивів , але оператор розповсюдження дозволяє розмістити це в будь-якому місці масиву. Якщо ви хочете поєднати два масиви та розмістити елементи в будь-якій точці масиву, ви можете зробити наступне:

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// arr2 = ["one", "two", "three", "four", "five"]

2. Копіювання масивів

Коли ми хотіли копію масиву, ми використовували метод Array.prototypr.slice () . Але ви можете зробити те ж саме з оператором розповсюдження.

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

3. Функції виклику без застосування

У ES5 для передачі масиву з двох чисел до doStuff()функції ви часто використовуєте метод Function.prototype.apply () наступним чином:

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// Call the function, passing args
doStuff.apply(null, args);

Однак, використовуючи оператор розповсюдження, ви можете передати масив у функцію.

doStuff(...args);

4. Деструктивні масиви

Ви можете використовувати деструктуризацію та оператор решти разом, щоб витягувати інформацію в змінні так, як вам потрібно.

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

5. Аргументи функції як параметри відпочинку

ES6 також має три крапки (...), що є параметром відпочинку, який збирає всі масиви аргументу функції в масив.

function f(a, b, ...args) {
  console.log(args);
}

f(1,2,3,4,5);
// [ 3, 4, 5 ]

6. Використання математичних функцій

Будь-яка функція, де спред використовується як аргумент, може використовуватися функціями, які можуть приймати будь-яку кількість аргументів.

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

7. Об'єднання двох об'єктів

Ви можете використовувати оператор розповсюдження для об'єднання двох об'єктів. Це простий і чистіший спосіб зробити це.

var carType = {
  model: 'Toyota',
  yom: '1995'
};

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

console.log(carData); 
// {
//  model: 'Toyota',
//  yom: '1995',
//  carFuel = 'Petrol'
// }

8. Розділіть рядок на окремі символи

Ви можете використовувати оператор розповсюдження, щоб покласти рядок на окремі символи.

let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]

Ви можете придумати більше способів використання оператора Spread. Я перерахував тут популярні випадки використання.

Це нова особливість в ES6 / Harmony. Він називається Оператор розповсюдження. Це дозволяє або розділити складові частини масиву / об'єкта, або взяти кілька елементів / параметрів і склеїти їх. Ось приклад:

let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array

І з об'єктом / клавішами:

// lets pass an object as props to a react component
let myParameters = {myKey: 5, myOtherKey: 7}
let component = <MyComponent {...myParameters}/>
// this is equal to <MyComponent myKey=5 myOtherKey=7 />

Що насправді класно - ви можете використовувати його для позначення "решта цінностей".

const myFunc = (value1, value2, ...values) {
    // Some code
}

myFunc(1, 2, 3, 4, 5)
// when myFunc is called, the rest of the variables are placed into the "values" array

Вони називаються спредами. Так само, як випливає з назви. Це означає, що він розміщує будь-яке значення цього масиву або об'єктів.

Як от :

let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]