ES2015 ...操作符的2种用法

ES2015中新增了一种...的操作符，...操作符有两个作用，rest和spread。

一、剩余参数 Rest

ES2015以前

对于未知个数的参数，如果我们想获取，是用arguments对象来接收，arguments是一个伪数组

function foo(){
	console.log(arguments)
}
foo(1,2,3,4,5,6,7)

ES2015以后，可以用...来代替arguments 接收剩余参数

//在形参前面加上...操作符，这个形参以数组的形式接收从当前这个位置开始往后所有的实参。可以取代以前以argumens接收无限参数的方式
function foo(...args){
	console.log(args)
}
foo(1,2,3,4,5,6,7)

需要注意的是，因为接收的是剩余参数 ，所以只能出现在形参的最后一位，而且只能使用一次

// ...只能出现在形参的最后一位，而且只能使用一次
function foo(first,...args){
   console.log(args)
}

二、展开数组 Spread

...操作符除了可以用来收起剩余数据这种rest用法，还有一种spread用法

ES2015以前

如果想依次把数组当作参数传入console.log这个方法，可以这样写：

const array = ['jack','luyu','amy']

console.log(array[0],array[1],array[2]) // jack luyu amy

如果参数有很多个，上面的方法就不好使了，我们可以使用apply方法

const array = ['jack','luyu','amy']

console.log(...array) // jack luyu amy

ES2015以后

我们可以使用...操作符来实现，更简便了

...操作符会自动把数组当中的每一个成员按照次序传递到参数列表中

const array = ['jack','luyu','amy']

console.log(...array) // jack luyu amy