解构赋值,也称“模式匹配”,即赋值的左右两边模式相同,则等号右边的值赋给左边的变量。
解构赋值 适用 let var const声明变量/常量;
在解构赋值前,声明多个变量:
var a=1;
var b=2;
var c=3;
解构赋值:var [a,b,c] = [1,2,3];
解构赋值不成功:
var [a] = []; //a undefined
解构赋值不完全成功:
var [a,b] = [1] ; //a=1;b undefined;
数组的解构赋值:严格按照顺序;
嵌套的数组解构赋值:
var [a,[b],c] = [1,[2],3]; // a=1;b=2;c=3;
不完全解构的嵌套数组赋值:
let [a,[b],c] = [1,[2,3],4]; //a=1;b=2;c=4;
let [a,[b,c],d] = [1,[2],3] ; // a=1;b=2;c undefined;d=3;
解构赋值报错:若等号右侧的值不是数组形式,则赋值报错:
var [a] = 1; //报错
var [b] = null; //报错
var [c] = undefined; //报错
var [d] = false; //报错
var [e] = {}; //报错
解构赋值默认值:
默认值仅在等号右侧的值严格等于undefined时,默认值才生效:
var [a=1,b=2] = []; //a=1;b=2;
var [a=1] = [null] ; // a=1; null !==undefined
var [a=1] = [undefined] ; // a=1;
默认值可以是表达式:表达式是惰性求值,仅在用到的时候才求值;
function fn(){alert(1)};
var [a=fn()] = []; // fn会执行;
var [b=fn()] = [1] ; //fn不会执行; b=1;
默认值也可引用解构赋值的其他变量,前提是该变量已经声明:
var [a=1,b=a] = []; //a=1;b=1;
var [a=b,b=1] = []; //报错 referenceError;
对象的解构赋值:找同名属性,顺序不重要:
var {b,a} = {a:1,b:2}; // a=1;b=2;
赋值的变量名与属性名不一致:
var {color: pink,b} = {color:'#ccc',b:3}; //pink='#ccc'; b=3;
对象的解构赋值,找同名的属性,找到后将值赋给变量。(实际赋值的是后者)。
var {abc:car,bcd:color} = {abc:'丰田',bcd:'green'}; //car = '丰田' ;color='green'; 其中abc和bcd都是模式,不是变量。
var obj={a:1,b:2,c:3}; var {a,b,c}=obj; //a=1;b=2;c=3;
var obj={a:1,b:2,c:3} ; var {a:first,b:second,c:third}=obj; //first=1;second=2;third=3; a undefined,b undefined ,c undefined; a,b,c都是模式不是实际的变量;
解构失败的值是undefined;
对象的解构赋值中,变量的声明和赋值是一体的,对于let和const来说,仅能声明一次,若重复声明则报错。
let a;let {a} = {a:1}; // 报错,重复声明变量。
解决:let a; (let {a} = {a:1}) // a=1; javascript会将两次声明区分成两个代码块,不会报错。(容易乱,还是少用)
解构赋值的默认值:(解构赋值生效的条件是属性值严格等于undefined)
var {a:b=1} = {}; //b=1;
var {a:b=2} = {a:null}; //b=null ,null !==undefined