Reactのこれら3つのドットは何をしますか？

何をしない...、この中にコードとそれが呼ばれている？（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すべて同じプロパティを持つ新しいオブジェクトに置き換えられます。fooa"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} />

要するに、それはきちんとしたショートカットです、と言うことができます。

3つのドットは、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. 2つのオブジェクトを組み合わせる

   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'}

Rest Parametersと呼ばれる3つのドットの別の使用法があり、関数へのすべての引数を1つの配列として取得することができます。

4. 配列としての関数引数

    function fun1(...params) { 
   
    }  

JavaScriptの3つのドットは、スプレッド/レストオペレーターです。

スプレッドオペレーター

スプレッドの構文は、式が複数の引数が期待されている場所に展開することができます。

myFunction(...iterableObj);

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

[...Array(10)]

残りのパラメータ

残りのパラメータの構文は、可変個の引数を持つ関数のために使用されています。

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

アレイのスプレッド/レストオペレーターはES6で導入されました。オブジェクトのスプレッド/レストプロパティに関するState 2の提案があります。

TypeScriptは、spread構文もサポートしており、マイナーな問題を伴うECMAScriptの古いバージョンにそれを組み込むことができます。

これは、Reactでも使用されているES6の機能です。以下の例を見てください。

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

この方法は、最大3つのパラメーターがある場合は問題ありません。しかし、たとえば110個のパラメーターを追加する必要がある場合はどうでしょうか。それらをすべて定義して、1つずつ追加する必要がありますか？

もちろん、もっと簡単な方法があります。これは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（まだ完全にサポートされていないオブジェクト1）で配列とオブジェクト演算子を使用しているため、基本的には、すでに小道具を定義している場合は、この方法で要素に渡すことができます。

したがって、あなたの場合、コードは次のようになります：

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} />
}

これらは、JSXのスプレッドオペレーターに関するReactチームからの引用です。

JSXスプレッド属性コンポーネントに配置するすべてのプロパティが事前にわかっている場合、JSXを使用するのは簡単です。

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

小道具の変更は悪い
です設定したいプロパティがわからない場合、後でオブジェクトに追加したくなるかもしれません：

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

これは、適切なpropTypeを後で確認するまで支援できないため、アンチパターンです。これは、propTypesエラーが不可解なスタックトレースで終わることを意味します。

小道具は不変であると考えられるべきです。propsオブジェクトを別の場所で変更すると、予期しない結果が生じる可能性があるため、理想的には、この時点ではフリーズオブジェクトになります。

スプレッド属性
これで、スプレッド属性と呼ばれる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のアレイですでにサポートされています。Object RestプロパティとSpreadプロパティの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} />

しかし、よりきれい。

3つのドット...は、スプレッドオペレーターまたはレストパラメーターを表します。

これにより、配列式や文字列など、関数呼び出しのゼロ個以上の引数または配列の要素が期待される場所で、反復可能なすべてのものを展開できます。

• 2つの配列をマージする

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]

注：スプレッドの構文は、配列をコピーするときに1レベル深くなります。したがって、次の例に示すように、多次元配列のコピーには適さない可能性があります（Object.assign（）とスプレッド構文でも同じです）。

• ある配列の値を特定のインデックスで他の配列に追加します（例：3）。

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

• newでコンストラクターを呼び出す場合：

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}

fooobj1のプロパティがobj2 fooプロパティによって上書きされていることに注意してください

• 不定の数の引数を配列として表すことができる残りのパラメーター構文として：

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構文（spreadプロパティの場合を除く）は、反復可能なオブジェクトにのみ適用できます。 そのため、次の場合はエラーがスローされます

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

参照1

参照2

Brandon Morelliへの称賛。彼はここで完全に説明しましたが、リンクが無効になる可能性があるため、以下のコンテンツを貼り付けています。

スプレッド構文は3つのドットです：... 0+の引数が期待される場所でイテラブルを展開できます。定義は文脈なしでは難しい。これが何を意味するのかを理解するために、いくつかの異なるユースケースを調べてみましょう。

例＃1 —配列の挿入 以下のコードを見てください。このコードでは、spread構文は使用しません。

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

console.log(arr);

上記では、という名前の配列を作成しましたmid。次に、配列を含む2番目の配列を作成しますmid。最後に、結果をログアウトします。何arrを印刷する予定ですか？上の実行をクリックして、何が起こるかを確認してください。出力は次のとおりです。

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

それはあなたが期待した結果ですか？mid配列を配列に挿入arrすると、配列内の配列ができあがります。それが目標だったとしても、それで問題ありません。しかし、1から6の値を持つ単一の配列だけが必要な場合はどうでしょうか。これを達成するために、spread構文を使用できます！スプレッド構文により、配列の要素を拡張できることに注意してください。以下のコードを見てみましょう。すべてが同じです。ただし、mid配列を配列に挿入するために、spread構文を使用しています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()は、0個以上の数値の最大値を返します。以下にいくつかの例を示します。

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));

それは機能します、それは本当に本当に迷惑です。次に、spread構文を使用してまったく同じことを行う方法を見てみましょう。

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

console.log(max);

関数を作成し、applyメソッドを使用しての結果を返す代わりに、Math.max()必要なコードは2行だけです。スプレッド構文は、配列要素を拡張し、配列の各要素を個別に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に割り当てられた個々の要素になるように拡張されました。これで、元のarr配列に影響を与えずに、arr2配列を必要なだけ変更できます。

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

arr2.push('d');

console.log(arr);

繰り返しますが、これが機能するのは、arrの値が、arr2配列定義の角かっこを埋めるために拡張されるためです。したがって、最初の例で行ったようなarrへの参照の代わりに、arr2をarrの個々の値と等しくなるように設定します。

ボーナスの例—文字列から配列へ 楽しい最後の例として、spread構文を使用して文字列を配列に変換できます。一対の角括弧内のスプレッド構文を使用するだけです。

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

console.log(chars);

3つのドット(...)は拡散演算子と呼ばれ、これは概念的にES6配列拡散演算子に似ています。JSXは、JSXでより明確な構文を提供するために、これらのサポートされている開発中の標準を利用しています。

オブジェクト初期化子のSpreadプロパティは、提供されたオブジェクトから新しく作成されたオブジェクトに独自の列挙可能なプロパティをコピーします。

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オブジェクトでも同じことができます。

つまり、3つのドット...は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
}

これは、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 } />

Dan Abramovの Spreadオペレーターに関するツイート（Reduxのクリエイター）

...この構文はES6の一部であり、Reactでのみ使用できるものではありません。2つの異なる方法で使用できます。スプレッドオペレーターとして、または残りのパラメーターとして。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';

または、次のように2つの異なるオブジェクトをマージします（これは、すべての反応バージョンでまだ使用できません）。

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

Facebookのreact / docsサイトによると、これを説明する別の方法は次のとおりです。

オブジェクトとして「props」がすでにあり、それをJSXで渡したい場合は、「...」をSPREAD演算子として使用して、propsオブジェクト全体を渡すことができます。次の2つの例は同等です。

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ホスト要素があります。

...Spreadと呼ばれるES6オペレーターです。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntaxを参照してください

スプレッドオペレーター（トリプルオペレーター）は、ecamaスクリプト6（ES6）で導入されています。Ecamaスクリプト（ES6）は、javascriptのラッパーです。

小道具のオペレーター列挙可能なプロパティを広げます。this.props = {firstName： 'Dan'、lastName： 'Abramov'、city： 'New York'、country： 'USA'}

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

ただし、主な特徴スプレッド演算子は参照タイプに使用されます。

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

person1.name = "Raheel";

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

これは参照タイプと呼ばれ、1つのオブジェクトはメモリ内で共有できるため、他のオブジェクトに影響を与えます。独立して値を取得する場合は、両方のスプレッドメモリがスプレッド演算子を使用することを意味します。

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

person2.name = "Shahzad";

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

要素の配列があり、使用した要素を表示したい場合は、... arrayemamentsを使用すると、すべての要素を繰り返し処理します

...（Javascriptでは3つのドット）は、Spread SyntaxまたはSpread Operatorと呼ばれます。これにより、配列式や文字列などのイテラブルを展開したり、オブジェクト式をどこにでも展開したりできます。これはReactに固有のものではありません。これはJavascript演算子です。

ここでのこれらすべての回答は役に立ちますが、スプレッド構文（スプレッド演算子）の主に使用される実用的なユースケースをリストアップしたいと思います。

1.配列の結合（配列の連結）

配列を組み合わせるにはさまざまな方法がありますが、spread演算子を使用すると、これを配列の任意の場所に配置できます。2つの配列を組み合わせて、配列内の任意の場所に要素を配置する場合は、次のようにします。

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

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

2.配列のコピー

配列のコピーが必要なときは、以前はArray.prototypr.slice（）メソッドがありました。ただし、spreadオペレーターでも同じことができます。

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

3.適用せずに関数を呼び出す

ES5では、2つの数値の配列をdoStuff()関数に渡すために、次のようにFunction.prototype.apply（）メソッドを使用することがよくあります。

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

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

ただし、spread演算子を使用すると、関数に配列を渡すことができます。

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には、関数の残りのすべての引数を配列に収集する残りのパラメーターである3つのドット（...）もあります。

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

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

6.数学関数の使用

引数としてspreadが使用されている関数は、任意の数の引数を受け入れることができる関数で使用できます。

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

7. 2つのオブジェクトを組み合わせる

スプレッド演算子を使用して、2つのオブジェクトを組み合わせることができます。これは、簡単でわかりやすい方法です。

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の新機能です。これは、Spread Operatorと呼ばれます。配列/オブジェクトの構成要素を分離するか、複数のアイテム/パラメーターを取得してそれらを接着することができます。次に例を示します。

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]