博客
关于我
扩展(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运算符的常见用途

  • 转换字符串为数组

    想将一个字符串看作数组处理,可以利用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/

    你可能感兴趣的文章
    Mysql tinyint(1)与tinyint(4)的区别
    查看>>
    mysql union orderby 无效
    查看>>
    mysql where中如何判断不为空
    查看>>
    mysql workbench6.3.5_MySQL Workbench
    查看>>
    MySQL Workbench安装教程以及菜单汉化
    查看>>
    MySQL Xtrabackup 安装、备份、恢复
    查看>>
    mysql [Err] 1436 - Thread stack overrun: 129464 bytes used of a 286720 byte stack, and 160000 bytes
    查看>>
    MySQL _ MySQL常用操作
    查看>>
    MySQL – 导出数据成csv
    查看>>
    MySQL —— 在CentOS9下安装MySQL
    查看>>
    mysql 不区分大小写
    查看>>
    mysql 两列互转
    查看>>
    MySQL 中开启二进制日志(Binlog)
    查看>>
    MySQL 中文问题
    查看>>
    MySQL 中日志的面试题总结
    查看>>
    mysql 中的all,5分钟了解MySQL5.7中union all用法的黑科技
    查看>>
    Mysql 中的日期时间字符串查询
    查看>>
    MySQL 中锁的面试题总结
    查看>>
    MySQL 中随机抽样:order by rand limit 的替代方案
    查看>>
    MySQL 为什么需要两阶段提交?
    查看>>