Spread操作符允许您将可迭代对象(如对象、字符串或数组)展开为其元素，而Rest操作符则相反，将一组元素缩减为一个数组。

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

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数组展开运算符JSX 利用这些支持并开发标准，以便在JSX中提供更清晰的语法

对象初始化器中的展开属性复制自己的枚举对象 属性从提供的对象转移到新创建的对象。 设n = {x, y，…z}; n;// {x: 1, y: 2, a: 3, b: 4}

引用:

传播特性 JSX深入

…(展开运算符)用于React to:

提供一种简洁的方式将道具从父组件传递给子组件。例如，给定父组件中的这些道具，

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

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

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

哪个和这个相似

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

但要干净得多。

向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 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()和spread语法)。

将一个数组的值添加到另一个数组的特定索引处。

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 1970年1月 var d = new Date(…dateFields); console.log (d);

在对象字面量中展开:

var obj1 = {foo: 'bar'， x: 42}; var obj2 = {foo: 'ba '， 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形参语法，它允许我们将无限数量的实参表示为数组:

函数sum(…theArgs) { theArgs返回。Reduce ((previous, current) => { 返回先前+当前; })； ｝ Console.log (sum(1,2,3));/ / 6 Console.log (sum(1,2,3,4));/ / 10

注意:spread语法(除了spread属性的情况)只能应用于可迭代对象:

所以下面的语句会抛出一个错误:

var obj = {'key1'： 'value1'}; var 数组 = [...卷];类型错误：obj 不可迭代

Reference1

Reference2