ES6 剩余参数

认识剩余参数

有这么一个需求，定义一个加法函数，用户传多少参数，就计算多少参数的总和。那么函数的形参要写几个呢？1个？2个？3个？显然都不合适，你怎么知道用户会传多少个数呢。由此引出了剩余参数的重要性。具体写法下面再举例，先让大家有个概念

剩余参数的本质

const add = (x, y, ...args) => {
	console.log(x, y, args); //注意这里使用的时候就不需要加“...”了，直接写参数名即可
};
add(); // undefined undefined []
add(1); // 1 undefined []
add(1, 2); // 1 2 []
add(1, 2, 3); // 1 2 [3]
add(1, 2, 3, 4); // 1 2 [3, 4]

从上面的例子中可以看出：剩余参数永远是个数组，即使没有值，也是空数组

剩余参数的注意事项

• 箭头函数的剩余参数

箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号：

// 错误写法
const add = ...args => console.log(args);
add(1, 2, 3); // 报错

// 正确写法
const add = (...args) => console.log(args);
add(1, 2, 3); // [1, 2, 3]

• 使用剩余参数替代 arguments 获取实际参数

// 不使用剩余参数时
const add = function () {
	console.log(arguments); // 注意，不能使用箭头函数         
};                          // 因为箭头函数没有自己的 this 和 arguments ，有的话也是来自父级作用域
add(1, 2); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 使用剩余参数
const add = (...args) => console.log(args); // 现在就可以使用箭头函数了
add(1, 2); // [1, 2] 直接是一个数组，不像arguments只是一个类数组

• 剩余参数的位置

剩余参数只能是最后一个参数，之后不能再有其他参数，否则会报错

const add = (...args) => console.log(args); // 一般情况
const add = (x, ...args) => console.log(args); // 剩余参数前面还有别的参数，也可以
const add = (...args, x) => console.log(args); // Uncaught SyntaxError: Rest parameter must be last formal parameter

剩余参数的应用

完成开篇提到的需求，即实现一个无论用户传多少参数，就计算多少参数的总和的加法函数👇

const add = (...args) => {
	let sum = 0;
	args.forEach(item => {
		sum += item;
	});
	return sum;
};
console.log(add(1, 2, 3)); // 6

与解构赋值结合使用

剩余参数不一定非要作为函数参数使用：

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

// 和函数参数的解构赋值结合使用
const func = ([num, ...args]) => {
	console.log(num, args); 
};
func([1, 2, 3]);// 1 [2, 3]  

// 和对象的解构赋值结合使用
const obj = {
	a: 3,
	x: 1,
	y: 2,
	b: 4
};
// 我想解构出 x 与 y 的值，怎么做呢？
const [x, y, ...z] = obj;
console.log(x, y); // 1 2
console.log(z); // {a: 3, b: 4} 注意，这里的z不是一个数组了，是一个对象
// 有人可能想问，这不是与前面说的“剩余参数永远是个数组”相矛盾了吗？
// 其实也没有 ~ 这里的“...z”不算是严格意义上函数中的“剩余参数”，称它为“剩余元素”更合适些
// 这里的“...z”也必须放在最后！否则也一样会报错