本文共 2445 字，大约阅读时间需要 8 分钟。
其实对于开发者来说，Spread运算符和Rest运算符的区别可能是一个常见的考点。那么它们究竟有什么不同呢？让我来从功能与语法上对它们作个区分和解释。
Rest运算符的作用
Rest运算符(简称Rest参数)主要用于将值序列组合成数组。它对形参的作用位置，通常出现在函数形式的定义中。关键在于它会自动捕获传入的所有参数，形成一个数组。这种特性让Rest参数在处理不知道具体传几个参数的情况下非常实用。Spread运算符的作用
Spread运算符则相反，它用于将数组转换为参数序列，也就是展开成一系列独立参数。它会起到散布作用，类似于对一个数组的成员逐一解构。需要注意的是，Spread运算符对实参起作用，适用于在调用函数、构造对象或进行数组合并等场景。相同的语法表达
可能让人感到困惑的是，两个运算符都使用“…”（三个点）的符号。但使用的位置和含义截然不同。Rest运算符通常出现在函数参数中，而Spread运算符常见于数组展开或对象合并的语境中。参数处理的不同
Rest运算符会将多余的参数整合成数组，而Spread运算符则会将数组拆分成单独的元素传递给函数或其他用途。这一点在处理函数调用时尤为重要，尤其是当需要灵活传递参数数量时。例如：function test(a, ...rest) { // rest包含所有非必传参数 console.log(rest);} 另一个例子，使用Spread运算符：
function test(...args) { // args是所有收到的参数数组 console.log(args);} Rest运算符的使用场景
当你不知道该传多少个参数时，Rest运算符能够轻松应对。而且，还有一个重要规则——Rest参数必须放在函数形式的最后。如果不遵守这一点，可能会导致意想不到的错误。例如：// 正确的写法function sum(...args) { return args.reduce((acc, curr) => acc + curr, 0); } // 错误的写法function sum(a, ...args, b) { … } 后者是无效的，因为Rest参数必须是最后一个位置。
Spread运算符的灵活性
Spread运算符的另一大特点是它能够将类数组对象（如arguments对象）转换为真正的数组。这样可以在不支持传变量个数的情况下，实现完美的参数处理。例如：var args = arguments;var ieArgs = [...args]; // 将伪数组转为真数组
与解构赋值结合使用
在涉及对象和数组解构时，Rest和Spread运算符可以相辅相成。例如，在解构对象时，可以使用Rest参数来获取所有剩余的属性，而在数组展开时，则使用Spread运算符。例如：// 对象解构const {a, ...b} = {a: 1, b: 2, c: 3};// b会被赋值为{c:3} // 数组展开const arr = [1,2,3];const [first, ...rest] = arr;// first=1, rest=[2,3]
转换字符串为数组
想将一个字符串看作数组处理，可以利用Spread运算符将其拆分成单个字符数组：const str = 'hello';const chars = [...str];// chars将是['h','e','l','l','o']
连接数组
Spread运算符还能用来将多个数组合并成一个数组：const arr1 = [1,2];const arr2 = [3,4];const combined = [...arr1, ...arr2];// combined = [1,2,3,4]
处理伪数组
在某些老旧的代码库中，可能会使用arguments对象来模拟数组。在这种情况下，Spread运算符能事半功倍：const args = arguments;const array = [...args];// 当前的函数所有参数会被转换为数组
替代多余的字符串连接
有时候，在传递多个字符串参数时，可以通过Spread运算符将它们一次性传递，避免冗长的连接操作：function logMessages(...messages) { console.log(...messages);}// 调用时可以与单一字符串一样使用logMessages('info', 'error', 'success'); 正确处理Rest参数的位置
Rest参数必须始终作为函数参数列表的最后一个部分。这是语法上的一个严格规定。错误地将Rest参数放在中间，会导致语法错误：// 错误function sum(a, ...rest, b) { ... } 正确的形式应为：
function sum(a, ...rest) { ... } 避免带三个点的输出失误
在使用Rest参数输出时，不要忘记关键的一点：不带三个点。如果忘记去掉三个点，即便输入的值是数组形式，也无法得到预期的效果。例如：var rest = [1,2,3];var result = [...rest]; // 正确// 如果不带三个点，直接使用restresult = rest; // 正确
这一点尤其重要的是，当在深层次结构中使用Rest和Spread时，正确管理三个点的位置会避免无数的错误。
通过以上对比和解释，希望大家能够更加清晰地理解Rest运算符和Spread运算符的区别和使用场景。在实际编码中，合理运用这两个强大的工具能够极大提升代码的可维护性和简洁性。
转载地址：http://yhvqz.baihongyu.com/