ES6里的解构赋值和扩展运算符

解构赋值：按照一定模式，从数组和对象中提取值，对变量进行赋值。左边和右边结构格式要一致,解构赋值在ajax数据交互时非常有用。

解构赋值分为数组的解构赋值和对象的解构赋值，解构赋值也能用于函数里作为形参。

解构赋值

数组的解构赋值

数组的解构赋值，此时一定要区分它是数组还是解构，区分方法是看它是在赋值还是在取值，等号左边的都是解构，等号右边的都是数组或对象。

let [a,b,c] = [1,2,3];
console.log(a); //1
console.log(b); //2
console.log©; //3

let ary = [12];
let [a,b] = ary;
console.log(a,b); //12 undefined
解构赋值时可以给变量设置默认值，如下例：
let ary = [12];
let [a,b=0] =ary; //在解构的时候可以给变量设置默认值
console.log(a,b); // 12 0

let a = 12,
b = 13;
[a,b]=[b,a];
console.log(a,b); // a与b交换位置 13,12

对象的解构赋值

冒号右边的变量才是真正的被赋值，冒号左边的变量表示对象的属性,左侧变量名和对象中的属性名一致才可以
let{a,b}={a:“aaa”,b:“bbb”};
let{a,b}={a:“aaa”};
let{a,b=5}={a:1};

let obj = {name:‘xxx’,age:25,sex:0};
let {name,age} = obj; //左侧的name和age都是变量，都对应右侧对象中的属性名

console.log(name,age); // xxx 25

let {friend =0} = obj;
console.log(friend); //0 给不存在的属性设置默认值

let value = {name:‘xxx’,age:25,score:[12,23,34,45]};
//a=‘xxx’
//b=12
//c=[23,34,45]
let {name:a,score:[b,…c]} =value; //千万注意这里name:a意思是给name变量取个别名叫a,此时a就是name，name就是a
console.log(a,b,c); // xxx 12 [23,34,45]

如果说不取别名，按照通常做法那就是下面这样：
let value = {name:‘xxx’,age:25,score:[12,23,34,45]};
let {name,score} =value;
console.log(name,score); // xxx [12,23,34,45]

解构赋值在函数中的应用
函数里也能把形参写成解构赋值的形式，看下例:
function show({a,b=“李四” }){
console.log(a,b) //undefined,李四
}
show( { } )

当然，你也能写成下面这样,结果都一样:
function show( {a,b=“李四” } = { } ){
console.log(a,b) //undefined,李四
}
show( )

…扩展运算符

…必须出现在尾巴上，这个叫做扩展运算符，也叫rest运算符，俗称叫“尾巴”解构.看下面扩展运算符的实际应用

解构赋值
var [a,…b,c] = [“白板”,“幺鸡”,“二条”,“红中”]; //报错
应该是 var [a,b,…c] = [“白板”，“幺鸡”,“二条”,“红中”];
console.log(a); //白板
console.log(b); //幺鸡
console.log©; //二条，红中

合并数组
let a =[1,2,3];
let b = [4,5,6];
let c =[…a , …b];
console.log©; // [1,2,3,4,5,6]

字符串转为数组
[ …‘siva’ ] // [‘s’,‘i’,‘v’,‘a’]

浅拷贝
//数组
var a = [1,2,4];
var b = […a];
a.push(6);
console.log(b); //[1,2,4]

//对象
var a= {a:1};
var b ={…a};
a.a =5 ;
console.log(b.a); //1