什么是…在这个React(使用JSX)代码中做什么，它被称为什么?
<Modal {...this.props} 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（字符）;
其他回答
在ECMAScript 6 (ES6)中引入的展开运算符(三重运算符)。ECMAScript (ES6)是JavaScript的包装器。
props中的展开运算符可枚举属性。
这一点。道具= ｛ 名字:“丹”, 姓:“阿布拉莫夫”, 城市:纽约， :“美国” ｝ <模态{…这个。props} title='Modal heading' animation={false}>
{……。props} = {firstName: 'Dan'， 姓:“阿布拉莫夫”, 城市:纽约， 国家:“美国”}
但是主特征展开运算符用于引用类型。
例如,
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
．.． (JavaScript中的三个点)被称为扩展语法或扩展操作符。这允许一个可迭代对象(如数组表达式或字符串)被展开，或一个对象表达式被展开。这不是React特有的。它是一个JavaScript操作符。
这里所有的答案都是有用的，但我想列出最常用的传播语法(传播操作符)的实际用例。
1. 组合数组(串联数组)
组合数组的方法有很多种，但展开操作符允许您将其放置在数组中的任何位置。如果你想组合两个数组，并将元素放置在数组中的任何位置，你可以这样做:
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. 复制数组
当我们想要一个数组的副本时，我们使用array .prototype.slice()方法。但是，你也可以用展开运算符做同样的事情。
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3.调用没有应用的函数
在ES5中，要将两个数字的数组传递给doStuff()函数，你经常使用function .prototype.apply()方法，如下所示:
function doStuff (x, y, z) {}
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
但是，通过使用展开操作符，可以将数组传递给函数。
doStuff(...args);
4. 解构数组
你可以使用解构和rest操作符一起将信息提取到你想要的变量中:
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
5. 函数参数作为Rest参数
ES6还有三个点(…)，它表示一个rest形参，将函数的所有剩余参数收集到一个数组中。
function f(a, b, ...args) {
console.log(args);
}
f(1, 2, 3, 4, 5); // [3, 4, 5]
6. 使用数学函数
任何将spread用作实参的函数都可以被接受任意数量实参的函数使用。
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. 两个对象合并
您可以使用展开运算符来合并两个对象。这是一种简单明了的方法。
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. 将字符串分离为单独的字符
您可以使用展开运算符将字符串展开为单独的字符。
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
您可以想到更多使用扩展操作符的方法。我在这里列出的是它的流行用例。
Spread操作符允许您将可迭代对象(如对象、字符串或数组)展开为其元素，而Rest操作符则相反，将一组元素缩减为一个数组。
向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（字符）;
．.． 3个点代表JS中的展开运算符。
没有展开运算符。
let a = ['one','one','two','two'];
let unq = [new Set(a)];
console.log(a);
console.log(unq);
输出:
(4) ['one', 'one', 'two', 'two']
[Set(2)]
带有展开运算符。
let a = ['one','one','two','two'];
let unq = [...new Set(a)];
console.log(a);
console.log(unq);
输出:
(4) ['one', 'one', 'two', 'two']
(2) ['one', 'two']
推荐文章
- 检查是否选择了jQuery选项，如果没有选择默认值
- TypeScript错误:属性“X”在类型“Window”上不存在
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前，每次测试
- 如何强制一个功能React组件渲染?
- 反应-正确的方式传递表单元素的状态兄弟/父元素?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期
- Javascript复选框onChange
- Javascript函数前导bang !语法
- 如何在页面上遍历所有DOM元素?
- 在JS/jQuery中触发按键/按键/按键事件?
