三点……表示展开运算符或休息参数。

它允许数组表达式或字符串或任何可以迭代的东西在函数调用的参数为零或多个，或数组的元素为预期的地方展开。

合并两个数组

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

扩展语法允许像数组和对象这样的数据结构进行解构 它们可以从中提取一个值，也可以为它们添加一个值。 如 Const obj={name:"ram"，age:10 从上面的例子中，我们可以说我们解构了obj并从该对象中提取了name。 同样的, const newObj ={……obj,地址:“尼泊尔”} 从这个例子中，我们向该对象添加了一个新属性。 在数组的情况下也是类似的。

JavaScript中的三个点是展开/休息操作符。

传播算子

扩展语法允许在需要多个参数的地方展开表达式。

myFunction(...iterableObj);

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

[...Array(10)]

其他参数

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

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

数组的展开/休息操作符是在ES6中引入的。有一个关于对象扩展/休息属性的状态2提案。

TypeScript还支持扩展语法，并可以将其转换为较旧版本的ECMAScript，但存在一些小问题。

这三个点(…)被称为展开运算符，这在概念上类似于ES6数组展开运算符JSX 利用这些支持并开发标准，以便在JSX中提供更清晰的语法

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

引用:

传播特性 JSX深入

对于那些想要简单快速理解这个问题的人:

首先，这不仅仅是React的语法。这是ES6中的扩展语法，它迭代(合并，添加等)数组和对象。点击这里阅读更多信息。

为了回答这个问题:

让我们想象你有这样的标签:

<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语法时，它将标签的属性作为对象属性，与给定的对象用户合并(如果存在则替换)。此外，您可能已经注意到，它只替换属性之前，而不是属性之后。所以在这个例子中，年龄保持不变。

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