三，ES6新特性 解构赋值

首先看一下定义：

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构；

传统的变量赋值是这样的：

var  arr=[1,2,3];

var a=arr[0]; //1

var b=arr[1]; //2

var c=arr[2]; //3

解构赋值是如何操作的呢：

var [a,b,c]=[1,2,3];

console.log(a) //1

console.log(b) //2

console.log(c) //3

代码首先减少了 其次可读性也强了很多，这就是数组的解构赋值

当然，数组的解构赋值需要注意一些地方：

1，解构赋值是可以嵌套的；

var [a,b,[c,d]]=[1,2[3,4]];

console.log(a) //1

console.log(b) //2

console.log(c) //3

console.log(d) //4

2,不完全解构||赋值不成功

var [a,b,c]=[1,2]

console.log(a) //1

console.log(b) //2

console.log(c) //undefined 相当于声明了c而没有赋值；

3，允许设定默认值

var [a,b,c=3]=[1,2]

console.log(a) //1

console.log(b) //2

console.log(c) //3

c已经指定默认值为3，即使右边对应的没有也没有关系；如果想覆盖掉默认值，只需要在右侧添上一个值即可

var [a,b,c=3]=[1,2,6]

console.log(a) //1

console.log(b) //2

console.log(c) //6

此时默认值3被新值6覆盖掉。注意：如果新值为undefined，那么是不会覆盖掉默认值的

对象的解构赋值

对象的解构赋值和数组的类似：

var {a,b,c}={"a":1,"b":2,"c":3}

console.log(a) //1

console.log(b) //2

console.log(c) //3

基本上和数组一样，不过有一点不同

var {a,b,c}={"a":1,"c":3,"b":2}

console.log(a) //1

console.log(b) //2

console.log(c) //3

对象里的顺序变了 ，但是变量的值却没有变，这就告诉我们对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），

它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值

var {a}={"b":1};

console.log(a) //undefined

变量a在右侧找不到相对应a的值，所以显示未定义

对象的解构赋值也可以嵌套

var {a,b,{c,d}}={1,2{3,4}};

console.log(a) //1

console.log(b) //2

console.log(c) //3

console.log(d) //4

同样也可以指定默认值

var {a,b,{c,d=4}}={1,2{3}};

console.log(a) //1

console.log(b) //2

console.log(c) //3

console.log(d) //4

字符串的解构赋值

var [a,b,c]="我爱你"；

console.log(a) //我

console.log(b) //爱

console.log(c) //你

这是因为在解构赋值的过程中，字符串被转换成了一个类似数组的对象。变量a，b，c都分别赋上了对应的值

解构赋值的用途

1，交换变量的值

传统做法：

var a=1;

var b=2;

var c=a;

var b=a;

var a=c;

console.log(a) //2

console.log(b) //1

使用解构赋值：

var a=1,b=2;

[a,b]=[b,a]

这样就OK了  代码少了很多，更简洁。

2，提取函数返回的多个值

函数只能返回一个值，可以将多个值存放在数组或者对象里，然后在利用解构赋值提取内容：

function fun(){

return {"name":"老沙“，“age":20”}

}

var {name,age}=demo();

console.log(name) //老沙

console.log(age) //20

3,定义函数参数

function demo({a,b,c}){

console.log("我是"+a)

console.log("喜欢"+b)

console.log("讨厌"+c)

}

demo({a:"唐僧",b:"念经",c:"妖精"});

4,函数参数的默认值

传统的函数参数默认值一般这样实现；

function demo(a){

var name;

if(a===undefined){var name="孙悟空";}else{name=a}

}

使用解构赋值：

function demo({name="孙悟空"}){

console.log(name) //孙悟空

}

demo({});//没有传入参数，所以使用 了默认的参数。如果传入参数的话，就会把默认的参数覆盖掉；