那三个点…不是React术语。这些是JavaScript ES6扩展操作符。这有助于在不影响原始数组的情况下创建一个新数组来执行深度复制。这也可以用于对象。

const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1 // [1, 2, 3, 4, 5]
/*
 This is an example of a shallow copy.
 Where the value of arr1 is copied to arr2
 But now if you apply any method to
 arr2 will affect the arr1 also.  
*/

/*
 This is an example of a deep copy. 
 Here the values of arr1 get copied but they 
 both are disconnected. Meaning if you
 apply any method to arr3 it will not
 affect the arr1.
 */
 const arr3 = [...arr1] // [1, 2, 3, 4, 5]

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

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

合并两个数组

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

三个点代表ES6中的展开运算符。它允许我们在JavaScript中做很多事情:

连接数组 var shooterGames =['使命召唤'，'孤岛惊魂'，'生化危机']; var racingGames =['极品飞车'，' gt赛车'，'Burnout']; Var游戏=[…]shooterGames……玩赛车); console.log(games) //['使命召唤'，'孤岛惊魂'，'生化危机'，'极品飞车'，' gt赛车'，'Burnout'] 析构数组 var shooterGames =['使命召唤'，'孤岛惊魂'，'生化危机']; Var[首先，…剩余]= shooterGames; console.log(第一);//使命召唤 console.log(剩余的);//[《孤岛惊魂》、《生化危机》] 组合两个对象 var myCrush = { 名字:“萨琳娜”, middlename:“玛丽” }; Var lastname = '我的姓'; var myWife = { ……myCrush, 姓 ｝ console.log (myWife);// {firstname: 'Selena'， // midlename: 'Marie'， // lastname: '我的姓'}

这三个点还有另一个用途，就是所谓的Rest参数，它可以将一个函数的所有参数作为一个数组。

作为数组的函数参数 函数fun1(…参数){ ｝

那三个点…不是React术语。这些是JavaScript ES6扩展操作符。这有助于在不影响原始数组的情况下创建一个新数组来执行深度复制。这也可以用于对象。

const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1 // [1, 2, 3, 4, 5]
/*
 This is an example of a shallow copy.
 Where the value of arr1 is copied to arr2
 But now if you apply any method to
 arr2 will affect the arr1 also.  
*/

/*
 This is an example of a deep copy. 
 Here the values of arr1 get copied but they 
 both are disconnected. Meaning if you
 apply any method to arr3 it will not
 affect the arr1.
 */
 const arr3 = [...arr1] // [1, 2, 3, 4, 5]

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

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

引用:

传播特性 JSX深入

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

传播算子

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

myFunction(...iterableObj);

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

[...Array(10)]

其他参数

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

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

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

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