剩余参数是什么#

剩余参数（Rest Parameters）是 ES6 提供的一种语法，用来把函数中“多出来的参数”收集成一个数组。把不确定数量的参数打包成一个数组

1
const add = (...args) => {
2
  console.log(args);
3
};
4
add(1, 2, 3, 4, 5, 6, 7, 8, 9);//[1,2,3,4, 5, 6, 7, 8, 9 ]

剩余参数的本质：是数组

1
const add = (x, y, z, ...args) => {
2
  console.log(x, y, z, args);
3
};
4
add(1, 2, 3, 4, 5, 6, 7, 8, 9);//1 2 3 [ 4, 5, 6, 7, 8, 9 ]

剩余参数的注意事项#

箭头函数的剩余参数

1
const add = (...args) => {
2
  //即使只有一个剩余参数，括号不能省略
3
  console.log(args);
4
};
5
add(1, 2, 3, 4, 5, 6, 7, 8, 9);

代替arguments获取实际参数

1
//箭头函数没有arguments
2
// const add = () => {
3
//   console.log(arguments);
4
// };
5
// add(1, 2);
6

7
//普通函数获取剩余参数
8
// const add1 = function () {
9
//   console.log(arguments[0]); //{ '0': 1, '1': 2 }类数组
10
// };
11
// add1(1, 2);
12

13
//箭头函数获取剩余参数
14
const add = (...args) => {
15
  console.log(args); //[ 1, 2 ]真数组
16
};
17
add(1, 2);

剩余参数的书写位置

1
//剩余参数的书写位置：只能写到最后，否则报错
2
const add = (...args,x) => {
3
  console.log(args); //[ 1, 2 ]真数组
4
};
5
add(1, 2);//报错

剩余参数的应用#

1
//参数累加
2
// const add = (...args) => {
3
//   let sum = 0;
4
//   for (let i = 0; i < args.length; i++) {
5
//     sum += args[i];
6
//   }
7
//   return sum;
8
// };
9
// console.log(add(1, 2));
10
//必须最后一个
11
// const [num, ...args] = [1, 2, 3, 4, 5, 6];
12
// console.log(num, args);
13
//数组参数也能使用
14
// const func = ([num, ...args]) => {
15
//   console.log(num, args);
16
// };
17
// func([1, 2, 3]);
18

19
// const { x, y, ...z } = { a: 3, x: 1, y: 2, b: 4 };
20
// console.log(x, y, z); //输出 1 2 { a: 3, b: 4 }
21

22
const func = ({ x, y, ...z }) => {
23
  console.log(x, y, z);
24
};
25
func({ a: 3, x: 1, y: 2, b: 4 });