前言
rest参数与arguments变量相似。ES6引入rest参数代替arguments，获取函数实参。
扩展运算符能将数组转化为参数序列。
一、rest参数
function namelist1() { console.log(arguments); } function namelist2(...args) { console.log(args); } namelist1('张三', '李四', '王五'); namelist1('张三', '李四', '王五');
由此可看出args也是数组，所以它可以跟数组方法filter，some，map，every等连用。
注意！rest参数必须放在参数最后，如下：
function fn(a, b, ...args) { console.log(a); console.log(b); console.log(args); } fn(1, 2, 3, 4);
二、扩展运算符
1.将数组转化为逗号分隔的参数序列
代码如下（示例）：
const namelist = ['张三', '李四', '王五']; function fn() { console.log(arguments); } fn(...namelist); //相当于fn('张三', '李四', '王五') console.log(namelist); console.log(...namelist);
2.应用
- 数组合并
const film = ['失孤', '心灵旅途']; const tv = ['盗墓笔记', '秦岭神树']; const yule = [...film, ...tv]; console.log(yule);
- 数组的克隆
const list1 = ['a', 'b', 'c']; const list2 = [...list1]; console.log(list1); console.log(list2);
- 将伪数组转换为真数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>1</div> <div>2</div> <div>3</div> <script> const divs = document.querySelectorAll('div'); const divlist = [...divs]; console.log(divs); console.log(divlist); </script> </body> </html>
总结
以上就是rest参数和扩展运算符的讲解。
