【金秋打卡】第12天剩余参数

一、课程名称：前端工程师2022版

二、课程章节：剩余参数与展开运算符

三、课程讲师：Alex

四、课程内容

1、剩余参数是什么

（1）认识剩余参数

当碰见不知道需要传入多少数量参数的函数时，可以考虑剩余参数，具体格式如const add = (x,y,z,...args) => {};，其中，x、y、z表示固定参数，后面跟着的一部分就是剩余参数了，英文的省略号+参数命名，参数命名只要是合法标识符就可以，最好还是有语义一些，需要注意的是，剩余参数只有在定义时需要加上三个点，一般打印等操作是不需要加三个点的

（2）剩余参数的本质

剩余的参数归它管，剩余参数永远是个数组，即使没有值，也是空数组

2、剩余参数的注意事项

（1）箭头函数的剩余参数：箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号，如const add = (...args) => {};

（2）使用剩余参数替代arguments获取实际参数，const add = (...args) =>{console.log(args); } add(1,2);

（3）剩余参数的位置：剩余参数只能是最后一个参数，之后不能再有其他参数，否则会报错

3、剩余参数的应用（重点）

（1）完成add函数

const add = (...args) => {

        let sum = 0;

        for (let i = 0; i < args.length; i++) {

          sum += args[i];

        }

        return sum;

      };

console.log(add()); //0

console.log(add(1, 2, 3)); //6

 // 方法2：使用reduce方法，计算数组元素相加后的总和：

（2）剩余参数与解构赋值结合使用：剩余参数不一定非要作为函数参数使用，但必须满足是最后一个的条件

const [num, ...args] = [1, 2, 3, 4];

      console.log(num, args); //1 (3) [2, 3, 4]

      // 与函数的解构赋值

      const func = ([num, ...args]) => {};

      func([1, 2, 3]);

      // 与对象的解构赋值,此时的剩余参数不再是数组形式，叫剩余元素更加贴切

      const { x, y, ...z } = { a: 3, x: 1, y: 2, b: 4 };

      console.log(x, y, z); //1 2 {a: 3, b: 4}

      // 对象的解构赋值可以放到函数中

      const fun = ({ x, y, ...z }) => {};

      fun({ a: 3, x: 1, y: 2, b: 4 });

五、课程心得

剩余参数有很大的作用，它就像一个收纳盒，专门接收末尾的剩余参数并管理它们，方便我们进行封装函数等操作，今天真是收获满满。