了解 JavaScript 中 Rest 和 Spread 运算符之间的区别
了解 JavaScript 中 Rest 和 Spread 运算符之间的区别
编码时，Rest Parameter 和 Spread 运算符可能会让初学者非常困惑。看了很多基于这个话题的长文，决定写一篇短文，帮助初学者理解这两个术语的区别，尽可能的简单解释。
Rest Parameter 使我们能够将任意数量的参数传递给一个函数，然后在一个数组中访问它们。其余参数以三个点 (...) 为前缀。
Rest Parameter 和 Spread Operator 都具有相似的语法，即三个点的语法，即 (...)，但是三个点在 rest 和 spread 中的工作方式不同。与展开运算符不同，rest 参数必须是最后一个参数，因为它用于收集所有剩余的（任意数量）元素并将它们打包到一个数组中，作为函数的最后一个参数。
Rest 参数可以与数组的解构一起使用（这涉及将复杂的结构分解为更简单的部分）。传入的参数将被拆分为数组并位于数组内。通过使用rest参数，我们可以收集数组的剩余元素并将其放入一个新数组中，并将所有元素打包成一个数组后，它将作为函数的Last参数。因此，术语休息参数。
让我们在下面的代码示例中考虑一个 rest 运算符的示例。
const [pet1, pet2, ...args] = ['cats', 'dogs', 'rabbits', 'monkeys']
console.log(pet1, pet2, args);
结果
'猫' '小狗' ['兔子','猴子'];
在上面的例子中，包含 'rabbits' 和 'monkeys' 的数组在通过收集或捕获除定义的 pet1 和 pet2 之外的其余参数形成的数组内进行 RESTING。因此，其余参数将被收集在一起并压缩在 args 中，这是最后一个参数，后面是上面代码语法中的三个点。因此，其余参数让所有收集的参数紧凑地打包在一起并将它们压缩到一个数组中。这就像从所有房间收集许多物品并将它们放置或包装或堆叠到盒子或容器中！
根据定义，扩展运算符是使我们能够将数组的值分散到函数中的零个或多个参数或数组中的元素的运算符。让我们考虑一个简单的例子来理解扩展运算符。 JavaScript 扩展运算符 ( ... ) 允许我们快速将现有数组或对象的全部或部分复制到另一个数组或对象中。在下面提供的示例中，数组 A 和 B 的值通过使用 (...) 运算符快速复制到数组 C 中，如下所示。在结果中，我们注意到变量 A 和 B 的值是如何通过使用扩展运算符分布在变量 C 中的。
常量 A = [100,200,300];
常量 B = [400,500,600];
常量 C = […A,…B];
在上面的例子中，我们可以看到，当我们希望每个变量代表它所存储的元素时，每个变量的名称前面都会提到三个点。 A 包含数字 100,200,300，为了表示所有三个数字，我们将其称为 ...A，对于 B 中包含的数字，我们分别将其称为 ...B。
扩展运算符也可用于对象，如下例所示。
常量 myCat = {
品种：“芒奇金”，
年龄：1，
颜色：“姜黄色” } 常量 updateMyCat = {
性别女”，
国家：“美国”， } 常量更新信息 ={...myCat,...updateMyCat};
在上面的例子中，两个对象 myCat 和 updateMyCat 被快速复制到对象 updatedInfo 中，使用如上所示的三个点。
在上面的对象中，我们注意到，扩展语法遵循对象的属性并添加键值对（键是品种、年龄、颜色、性别、国家，它们各自的值是“Munchkin”、1、“ Ginger”、“female”、“USA”）到正在创建的对象，即updatedInfo。然后，复制的键值对在 updatedInfo 对象中展开或扩展，如上面的结果所示。
总而言之，尽管Spread语法和rest语法都用三个点表示，但我们从上面的例子中观察到它们以相反的方式运行。
Spread 语法将数组或对象中包含的项目“扩展”或“展开”或“展开”为单独的项目或元素，而 Rest 语法收集多个项目并“收缩”或“减少”或“折叠”单独的项目成一个紧凑的阵列。
总而言之，展开语法解包或打开被覆盖或关闭的项目，其余语法包装或容器化打开或展开的项目。
欢迎您提出您的意见或建议，以识别spread算子和rest算子之间的区别。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
