Что делают эти три точки в 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;
}

Как вы знаете, ...они называются Spread Attributes, которые представляет имя, что позволяет расширять выражение.

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, пока намного позже. Это означает, что ваши ошибки 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]

Примечание. Синтаксис Spread эффективно копируется на один уровень при копировании массива. Следовательно, это может быть непригодно для копирования многомерных массивов, как показано в следующем примере (то же самое с 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 было перезаписано obj2foo свойством

• В качестве синтаксиса параметра rest, который позволяет нам представлять неопределенное количество аргументов в виде массива:

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

Примечание: Spread синтаксис (кроме как в случае распространенных свойств) может быть применено только к Iterable объектов: Так следующее выбросит ошибку

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

Reference1

Reference2

Престижность Брэндону Морелли. Он прекрасно объяснил здесь , но ссылки могут умереть, поэтому я просто вставляю содержание ниже:

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

Пример # 1 - Вставка массивов Посмотрите на код ниже. В этом коде мы не используем синтаксис распространения:

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

console.log(arr);

Выше мы создали массив с именем mid. Затем мы создаем второй массив, который содержит наш midмассив. Наконец, мы выходим из результата. Что вы ожидаете arrнапечатать? Нажмите Run выше, чтобы увидеть, что происходит. Вот вывод:

[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. Математика В 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);

Вместо того, чтобы создавать функцию и использовать метод apply для возврата результата 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);

Нажмите Run, и вы увидите ожидаемый результат:

['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, как мы это делали в первом примере.

Бонусный пример - строка в массив В качестве забавного финального примера вы можете использовать синтаксис распространения для преобразования строки в массив. Просто используйте синтаксис распространения в паре квадратных скобок:

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). Оператор Spread извлечет все данные.

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
}

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

Атрибуты Spread, используемые для простой передачи нескольких свойств

{... this.props} содержит свойство this.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} />;

Свойства, включенные в "... props": foo: x, bar: y. Это может быть объединено с другими атрибутами, чтобы переопределить свойства "... props", используя этот синтаксис:

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:

Если у вас уже есть «props» в качестве объекта и вы хотите передать его в JSX, вы можете использовать «...» в качестве оператора SPREAD для передачи всего объекта «props». Следующие два примера эквивалентны:

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



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

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

Его называют оператором распространения. Например, let hello = {name: '', msg: ''} let hello1 = {... hello} Теперь свойства объекта 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 script 6 (ES6) .Ecama script (ES6) - это оболочка javascript.

перечислить оператор перечислимых свойств в подпорках. this.props = {firstName: 'Dan', lastName: 'Abramov', город: 'New York', страна: 'USA'}

{... 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) называется синтаксисом или оператором распространения. Это позволяет расширить итерацию, например выражение массива или строку , или объект выражение которое будет расширено, где бы оно ни размещалось. Это не относится к React. Это оператор Javascript.

Все эти ответы здесь полезны, но я хочу перечислить наиболее часто используемые варианты практического использования синтаксиса Spread (Spread 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. Разрушающие массивы

Вы можете использовать деструктуризацию и оператор rest вместе для извлечения информации в переменные так, как вы хотите:

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 также имеет три точки (...), которые являются параметром rest, который собирает все оставшиеся аргументы функции в массив.

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"]

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

Это новая функция в 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]