扩展(spread)运算符和剩余(rest)运算符使用总结-白红宇

扩展(spread)运算符和剩余(rest)运算符使用总结

阅读量：676 次

发布时间：2019-03-16

本文共 2416 字，大约阅读时间需要 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/

你可能感兴趣的文章