解构赋值:按照一定模式,从数组和对象中提取值,对变量进行赋值。左边和右边结构格式要一致,解构赋值在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