剩余参数

什么是剩余参数

ES6 中引入了 rest（剩余）参数，允许将不确定部分的参数合成一个数组。其写法为 ...变量名，变量是一个数组，用来保存不确定部分的参数。

// ...args 为剩余参数，其中变量args表示一个数组,用来接受传过来的所有实参
const sum = (...args) => {
  console.log(args);
};
sum(1, 2, 3, 4); //  [1, 2, 3, 4]
sum(); // []

// ...args 为剩余参数，其中变量args表示一个数组，用于接受第3个（包含）之后的所有实参
const f = (a, b, ...args) => {
  console.log(a); // 1
  console.log(b); // 2
  console.log(args); // [3, 4, 5]
};
f(1, 2, 3, 4, 5);

剩余参数的本质

剩余参数中的变量本质是一个数组，即使没有值，也是一个空数组，所以数组所有的方法这个变量都可以用

const f = (a, ...args) => {
  args.push(a);
  console.log(args); //[1]
};
f(1);

剩余参数的注意事项

• 剩余参数之后不能再有其它参数，即剩余参数必需是最后一个参数，否则会报错

const f = (a,...args,b) => {} // 报错

• 当箭头函数中只有一个剩余参数时，其圆括号也不能省略

// const f = ...args => args;  错误写法
const f = (...args) => args;
console.log(f(1, 2, 3)); // [1, 2, 3]

剩余参数在实际开发中的应用

• 根据实参传递的个数来求和

// 箭头函数与剩余参
const sum = (...args) => {
  var result = 0;
  args.forEach((item) => {
    result += item;
  });
  return result;
};
console.log(sum(1, 2, 3, 4));

• 剩余参数与数组的解构赋值的结合应用

剩余参数不一定非要作为函数参数使用，解构赋值也可以使用

当剩余参数与解构赋值结合使用时，我们称他为 剩余元素。

同时在与解构赋值结合时，也只能是最后一个元素，之后不能再有其他参数，否则会报错

// 绑定模式
let [a, b, ...c] = [1, 2, 3, 4, 5, 6];
console.log(a); // 1
console.log(b); // 2
console.log(c); //  [3, 4, 5, 6]

• 剩余参数与与对象的解构赋值结合应用

// 绑定模式
const { a, b, ...c } = { a: 1, b: 2, c: 3, d: 5 };
console.log(a); // 1
console.log(b); // 2
console.log(c); // {c: 3, d: 5}