向Brandon Morelli致敬。他在这里解释得很好，但链接可能会消失，所以我只是粘贴下面的内容:

扩展语法就是三个点:… 它允许迭代对象在需要0+参数的地方展开。 没有上下文的定义很难。让我们探索一些不同的用例来帮助理解这意味着什么。

例1 -插入数组

看看下面的代码。在这段代码中，我们没有使用spread语法:

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语法!请记住，展开语法允许数组的元素展开。

让我们看看下面的代码。一切都是一样的-除了我们现在使用spread语法将mid数组插入到arr数组中:

Var mid = [3,4]; Var arr =[1,2，…]Mid, 5,6]; console.log (arr);

当你点击运行按钮时，结果是这样的:

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

太棒了!

还记得刚才读到的扩展语法定义吗?这就是它发挥作用的地方。如你所见，当我们创建arr数组并在中间数组上使用展开运算符时，中间数组不仅被插入，还会展开。这种展开意味着中间数组中的每个元素都被插入到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]; 函数max(arr) { Math.max返回。应用(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()的结果，只需要两行代码!扩展语法展开数组元素，并将数组中的每个元素分别输入Math.max()方法!

例3 -复制Array

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

奖励示例-字符串到数组

作为有趣的最后一个示例，您可以使用spread语法将字符串转换为数组。只需在一对方括号内使用spread语法:

var str = “hello”; var chars = [...p]; 控制台.log（字符）;

．.． 被称为扩展属性，顾名思义，它允许表达式展开。

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

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

向Brandon Morelli致敬。他在这里解释得很好，但链接可能会消失，所以我只是粘贴下面的内容:

扩展语法就是三个点:… 它允许迭代对象在需要0+参数的地方展开。 没有上下文的定义很难。让我们探索一些不同的用例来帮助理解这意味着什么。

例1 -插入数组

看看下面的代码。在这段代码中，我们没有使用spread语法:

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语法!请记住，展开语法允许数组的元素展开。

让我们看看下面的代码。一切都是一样的-除了我们现在使用spread语法将mid数组插入到arr数组中:

Var mid = [3,4]; Var arr =[1,2，…]Mid, 5,6]; console.log (arr);

当你点击运行按钮时，结果是这样的:

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

太棒了!

还记得刚才读到的扩展语法定义吗?这就是它发挥作用的地方。如你所见，当我们创建arr数组并在中间数组上使用展开运算符时，中间数组不仅被插入，还会展开。这种展开意味着中间数组中的每个元素都被插入到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]; 函数max(arr) { Math.max返回。应用(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()的结果，只需要两行代码!扩展语法展开数组元素，并将数组中的每个元素分别输入Math.max()方法!

例3 -复制Array

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

奖励示例-字符串到数组

作为有趣的最后一个示例，您可以使用spread语法将字符串转换为数组。只需在一对方括号内使用spread语法:

var str = “hello”; var chars = [...p]; 控制台.log（字符）;

这就是属性展开符号。它是在ES2018年添加的(扩展数组/可迭代对象是更早的ES2015年)，但它在React项目中已经通过编译(作为“JSX扩展属性”，尽管你也可以在其他地方做，而不仅仅是属性)得到了很长时间的支持。

{……。props}将props中的“自己的”可枚举属性展开为您正在创建的Modal元素上的离散属性。例如，如果这个。道具包含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}>

但它是动态的，所以道具中任何“自己的”属性都包括在内。

由于儿童是道具中“自己”的属性，传播将包括它。如果这个出现的组件有子元素，它们会被传递给Modal。在开始标记和结束标记之间放置子元素只是语法上的“糖”——好的那种——用于在开始标记中放置子属性。例子:

实例扩展React。组件{ 呈现(){ const {className, children} = this.props; 回报( < div className = {className} > {孩子} < / div > ）; ｝ ｝ ReactDOM.render ( ［ > <例子className =“第一” <span>第一个子元素</span> < / >示例, <示例className="second" children={<span> second中的子</span>} /> ), . getelementbyid(“根”) ）; 当代{ 颜色:绿色; ｝ 接着{ 颜色:蓝色; ｝ < div id = "根" > < / div > < script src = " https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js " > < /脚本> < script src = " https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js " > < /脚本>

扩展表示法不仅在这个用例中很方便，而且在创建一个具有现有对象的大部分(或全部)属性的新对象时也很方便——当你更新状态时经常会出现这种情况，因为你不能直接修改状态:

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

这将this.state.foo替换为一个新对象，该对象具有与foo相同的所有属性，除了a属性，它变成了“updated”:

Const obj = { foo: { 答:1, b: 2 c: 3 ｝ }; console.log(“原始”,obj.foo); //创建一个新对象并将其赋值给' obj.foo ' obj。Foo ={…Foo, a: "updated"}; obj.foo console.log(“更新”); .as-console-wrapper { Max-height: 100%重要; ｝

这是ES6的一个特性，在React中也使用了这个特性。请看下面的例子:

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

如果我们最多有三个参数，这种方式很好。但是，如果我们需要添加，例如，110个参数。我们是否应该定义它们并逐个添加它们?

当然，有一种更简单的方法，叫做扩散。 而不是传递所有这些参数，你写:

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

在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.这可以与其他属性结合起来覆盖"…使用这种语法:

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

在构建泛型容器时，扩展属性可能很有用。然而，它们也会使代码变得混乱，因为很容易将许多不相关的道具传递给不关心它们的组件。应该谨慎使用此语法。