React中的这三个点做了什么？

Question

...在这个React（使用JSX）代码中做了什么以及它叫什么？

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

Answer 1

这是属性传播符号。它是在ES2018中添加的，但是通过转换在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>

传播符号不仅适用于该用例，还适用于创建具有现有对象的大部分（或全部）属性的新对象 - 当您更新状态时会出现很多，因为您可以' t直接修改状态：

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

Answer 2

如您所知...被称为 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} />

简而言之，这是一个整洁的捷径，我们可以说。

Answer 3

JavaScript中的三个点是展开/休息运算符。

传播运营商

spread syntax允许在需要多个参数的位置扩展表达式。

myFunction(...iterableObj);

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

[...Array(10)]

休息参数

rest参数语法用于具有可变数量参数的函数。

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

ES6中引入了数组的spread / rest运算符。对象传播/休息属性有一个状态2 proposal。

TypeScript还支持扩展语法，并且可以将其转换为带有次要issues的旧版ECMAScript。

Answer 4

这三个点代表ES6中的 Spread Operator 。它允许我们在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. 函数参数为数组

    function fun1(...params) { 
   
    }  
   

以上称为rest参数，不限制传递给函数的值的数量。但是，参数必须是相同的类型。

1. 梳理两个对象

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

Answer 5

这是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

Answer 6

对布兰登·莫雷利（Brandon Morelli）表示敬意。他完美地解释了here，但是链接可能会消失，所以我只粘贴了以下内容：

传播语法只是三个点：... 它允许迭代器在期望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的数组怎么办？为此，我们可以使用传播语法！请记住，spread语法允许扩展数组的元素。 让我们看下面的代码。一切都是一样的-只是我们现在使用传播语法将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);

按运行时，将获得以下输出：

['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的引用。

奖金示例-字符串到数组 作为最后一个有趣的示例，您可以使用传播语法将字符串转换为数组。只需在一对方括号内使用传播语法即可：

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

console.log(chars);

Answer 7

它只是为您在 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} />
}

以下是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中提供更清晰的语法。

Answer 8

对于那些来自Python世界的人来说，JSX Spread Attributes相当于 Unpacking Argument Lists（Python ** - 运算符）。

我知道这是一个JSX问题，但使用类比有时会有助于加快速度。

Answer 9

...（点差运算符）用于对：

作出反应

提供了一种将道具从父组件传递到子组件的简洁方法。例如，在父组件中给出这些道具，

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

他们可以通过以下方式传递给孩子，

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

与此类似

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

但道路更清洁。

Answer 10

三个点(...)被称为扩展运算符，这在概念上类似于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

Answer 11

三个点...代表Spread Operators或Rest Parameters，

它允许将数组表达式或字符串或任何可能会迭代的内容扩展到期望零个或多个参数用于函数调用或数组元素的地方。

• 合并两个数组

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]

• 使用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}

请注意，obj1的foo属性已被obj2的foo属性

覆盖

• 作为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

注意：传播语法（传播属性除外）只能应用于可迭代对象： 所以下面会抛出错误

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

Reference1

Reference2

Answer 12

这三个点称为散布运算符。 传播运算符可帮助我们创建复制状态或在反应中提供道具。

在反应状态下使用传播算子

const [myState, setMyState] = useState({
    variable1: 'test',
    variable2: '',
    variable3: ''
});

setMyState({...myState, variable2: 'new value here'});

在上面的代码传播运算符中，将维护当前状态的副本，并且我们还将同时添加新值，如果不这样做，则状态将仅具有 variable2 值 传播运算符可帮助我们编写优化代码

Answer 13

简而言之，三个点......是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]

Answer 14

这是一个传播算子...

例如，如果您有一个数组a="sad& wasd" if a=="sad& wasd": print("hi") output:hi 和另一个first=[1,2,3,4,5]。

second=[6,7,8]

对于json对象也可以做到这一点。

Answer 15

对于那些想要简单而又快速地了解它的人：

首先，这不仅仅是一种反应的语法。这是ES6中称为Spread syntax的语法，它迭代（合并，添加..etc）数组和对象。了解有关here

的更多信息

所以回答这个问题： 假设您有这个标签：

<UserTag name="Supun" age="66" gender="male" />

然后您这样做：

const user = {
  "name"=>"Joe",
  "age"=>"50"      
  "test"=>"test-val"
};

<UserTag name="Supun" gender="male"  {...user} age="66" />

然后标记将等于：

<UserTag name="Joe" gender="male" test="test-val" age="66" />

所以发生了什么事，当您在react标签中使用Spread语法时，它将标签的属性作为对象属性，并与给定对象user合并（如果存在则替换）。同样，您可能已经注意到一件事，它仅在属性之前而不是在属性之后替换。因此在此示例中，年龄保持不变。

希望这会有所帮助：）

Answer 16

...此语法是ES6的一部分，不是只能在React中使用的语法，可以两种不同的方式使用；作为扩展运算符或作为休息参数。您可以在本文中找到更多信息：https://www.techiediaries.com/react-spread-operator-props-setstate/

您在问题中提到的是这样的， 让我们假设这样，

value: int = get_data(some_url)

使用散布运算符，您可以将prop传递给这样的组件。

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

Answer 17

通常称为扩展运算符，用于在需要的地方扩展

示例

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

您可以在任何需要的地方使用它 有关传播算子https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

的更多信息

Answer 18

它称为传播算子。 例如 let hello = {名称：''，msg：''} 让hello1 = {... hello} 现在，hello对象属性已复制到hello1。

Answer 19

...的含义取决于您在代码中的使用位置，

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}

1. 用于将函数参数合并到单个数组中-然后可以在其上使用数组函数。

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

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

Answer 20

通常的做法是在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 Spread或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';

或像这样合并两个不同的对象（目前尚不能在所有的React版本中使用）：

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

根据Facebook的react / docs网站，另一种解释方式是：

如果您已经具有“ props”作为对象，并且想要在JSX中传递它，则可以使用“ ...”作为SPREAD运算符来传递整个props对象。以下两个示例是等效的：

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



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

在构建通用容器时，传播属性会很有用。但是，它们还可以通过轻松地将许多无关的道具传递给不需要它们的组件来使您的代码混乱。应当谨慎使用此语法。

Answer 21

它将被编译为：

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

Answer 22

传播运算符（三元运算符）是在ecama脚本6（ES6）中引入的。Ecama脚本（ES6）是javascript的包装。

在prop中传播运算符的可枚举属性。 this.props = { firstName：“ Dan”， lastName：'Abramov'， 城市：“纽约”， 国家：“美国” }

{... this.props} = {名字：“ Dan”， lastName：'Abramov'， 城市：“纽约”， 国家/地区：“美国”}

但是主要特征散布运算符用于引用类型。

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

Answer 23

  

用于以简单方式传递多个属性的传播属性

     

    

{... this.props}是持有this.props的属性

  

     

使用带有以下道具的{...} Spread运算符

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的创作者）的推文https://twitter.com/dan_abramov/status/694519379191545856?lang=en

Answer 24

如果您有一个元素数组，并且想要显示元素，则只需使用... arrayemaments，它将遍历所有元素

Answer 25

const Profile =  {
          firstName: "kazi",
          lastName: "ahsan"
   }

const ProfileUpdate =  {
          firstName: "kazi",
          lastName: "ahsan"
 }


const newProfile = {...Profile, ...ProfileUpdate}

希望这对某人有帮助。

Answer 26

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

您可以使用javascript中的Object.assign()函数来实现相同的结果。

参考：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Answer 27

这是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 />

真正酷的是，你可以用它来表示＆＃34;剩下的价值＆＃34;。

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

Answer 28

这些被称为点差。顾名思义。这意味着它在这些数组或对象中放置它的任何值。

如：

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