ES6 剩余参数展开运算符-优快云博客

ES6 剩余参数

在原来的语法当中如果你要传入参数并且全部获取执行的话，很多情况下我们一般用arguments，但用arguments时会出现很多问题：

如果和形参配合使用，容易导致混乱
从语义上使用arguments获取参数，由于形参缺失，无法从函数定义上理解函数真实意图

因此在ES6中出现了剩余参数
剩余参数专门用于收集末尾所有参数，将其放置到一个形参数组中。


	function sum(...args) {//形参的名字随便取
	    //args收集了所有的参数，形成的一个数组
	    let sum = 0;
	    for (let i = 0; i < args.length; i++) {
	        sum += args[i];
	    }
	    return sum;
	}
	
	console.log(sum())
	console.log(sum(1))
	console.log(sum(1, 2))
	console.log(sum(1, 2, 3))
	console.log(sum(1, 2, 3, 4))

它起一个收集参数的目的，之后就不需要arguments了。
之后我们就可以利用剩余参数这个数组进行操作了。

注意：

只能有一个剩余参数，不能出现多个
一个参数如果有剩余参数，剩余参数只能放在最后

展开运算符

由剩余参数我们引出了一个问题当我们要把一个已经生成好的数组想要吧数组的每一位当所参数传入的时候，就会遇到问题。


	function getRandomNumbers(length) {
	    const arr = [];
	    for (let i = 0; i < length; i++) {
	        arr.push(Math.random());
	    }
	    return arr;
	}
	
	const numbers = getRandomNumbers(10);

此时我们创建了一个数组将其每一位都生成一位随机数push进去长度为十。
那么我们如果想将这个数组的每一位当做参数都传入时，就需要去循环数组的每一位，这样的话就会比较麻烦，所以在ES6中延伸出一个新的方法叫展开运算符。

对数组展开 ES6

使用方式： ...要展开的东西

这种方法跟剩余参数的写法是一样的，但是应用的地方不一样

如果说你将...写在形参上，起一个收集参数的目的，起一个把分散的东西聚拢了目的。
如果说你将...写在别的地方的话，就是展开。


	//如果我要去执行一个函数，传参时这样写
	sun(...numbers);
	//那么我传入的就不是一个参数了而是将数组内所有参数展开传入
	//而且灵活的是，我还可以在展开运算符后面和前边继续传参是完全没有问题的
	sun(3, 4, ...numbers, 1, 2);

再比如说：


	//我们声明一个数组
	const arr1 = [1, 2, 3, 4];
	//需求是我们需要将arr1克隆岛arr2
	const arr2 = [...arr1];
	//我们只需要将arr1新建一个数组放进去并且展开就行
	//是不是非常简单

对对象展开 ES7

在ES6之后展开运算符非常方便，之后在ES7中又对其进行了进一步升级，不光数组连对象也能开。


	const obj = {
		name : 123,
		age : 456
	}
	//此时我们创建一个对象
	//需求是将obj克隆到obj2里我们是只需要这样
	
	const obj2 = {//创建一个对象
		...obj//属性为展开的obj
		name : 789//如果要添加或者更改属性，只需要在后面添加即可
	}