本文已参与「新人创作礼」活动，一起开启掘金创作之路。

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

以前的写法：

let obj = {username:'JavaScript123',pwd:'123456'};
let username = obj.username;
let pwd = obj.pwd;
console.log(username);
console.log(pwd);

解构赋值：

let obj = {username:'JavaScript123',pwd:'123456'};
let{username,pwd} = obj;
console.log(username,pwd);

还可以这样写：

let obj = {username:'JavaScript123',pwd:'123456'};
function func({username,pwd}){
		console.log(username,pwd);
}
	func(obj);

他可以对数组进行解构：

let arr = ['a','b',false,123,'你好'];
let[a,b,,,]=arr;
console.log(a,b);

没有值就不用打印，以免报错

对象模型解构中的剩余运算符

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
			console.log(a);
			console.log(b);
			console.log(rest);

解构默认值：

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

例：计算函数任意个参数之和：

		function sum(...num) {
			var sum = 0;
			for (let i = 0; i < num.length; i++) {
				sum += parseInt(num[i])  //parseInt() 函数可解析一个字符串，并返回一个整数。
			}
			console.log(sum)
		}

		sum(1, 2, 3)      //6
		sum(1, 2, "3")     //6
		sum(1, 2, "4和5")   //7

arguments：类数组对象

// arguments类数组对象
		function fn1(){
			console.log(arguments);
		}
		// 无论多少对象都可以全部接收
		fn1('a',0,{foo:'Hello'});

总结解构赋值：

1、解构赋值就是把数据解构进行分解，然后给其变量进行赋值。

2、如果解构不成功，也就是变量和值的个数不一致的时候，变量值为undefined。

3、数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开

4、利用解构赋值能够让我们方便的去取对象中的属性跟方法

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数

function sum (first, ...args) {
     console.log(first); // 10
     console.log(args); // [20, 30] 
 }
 sum(10, 20, 30)

剩余参数和解构配合使用

let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students; 
console.log(s1);  // 'wangwu' 
console.log(s2);  // ['zhangsan', 'lisi']

ES6系列——解构赋值和剩余参数

arguments：类数组对象

总结解构赋值：

剩余参数

​剩余参数和解构配合使用

剩余参数和解构配合使用