首页 > 代码库 > 变量的解构赋值

变量的解构赋值

2024-08-27 21:15:05   221人阅读

1.数组形式的解构赋值

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

如果解构不成功，变量的值就等于undefined

1 var [a,b]=[1];
2 console.log(a);//1
3 console.log(b);//undefined

数组的不完全解构依然可以解构成功

1  let [a,b]=[1,2,3];
2  console.log(a);//1
3  console.log(b);//2
4  
5  let [x,[y],z]=[1,[2,3],4];
6  console.log(x);//1
7  console.log(y);//2
8  console.log(z);//4

如果等号的右边是不可遍历的结构，将会报错

 1 let [a]=1;
 2 let [b]=false;
 3 let [c]=NaN;
 4 let [d]=undefined;
 5 let [e]=null;
 6 let [f]={};
 7 
 8 console.log(a);//报错
 9 console.log(b);//报错
10 console.log(c);//报错
11 console.log(d);//报错
12 console.log(e);//报错
13 console.log(f);//报错

解构赋值允许指定默认值

1 var [foo=true]=[];
2 console.log(foo);//true
3 
4 let [x,y="b"]=[‘a‘,undefined];
5 
6 console.log(x);//a
7 
8 console.log(y);//b

在ES6内部使用严格相等===运算符来判断一个位置是否有值，如果一个数组成员不严格等于undefined，默认值不会生效

1 var [x=1]=[null];
2 console.log(x);//null

 2.对象形式的解构赋值

对象的解构赋值要求变量必须与对象的属性名相同才可以取到正确的值

1 var {a,b}={a:‘aaa‘,b:‘bbb‘}
2 
3 console.log(a);//aaa
4 
5 console.log(b);//bbb

如果变量与对象属性名不一致，也可以将变量作为对象的属性值来解构赋值

1 var {a:myVariable}={a:‘我的变量解构成对象属性值‘,b:‘另外一个属性值‘}
2 
3 console.log(myVariable);//我的变量解构成对象属性值

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

 

采用对象形式的解构赋值的变量的声明和赋值是一起的，因此对于let命令和const命令来说不可以重复进行声明，否则会报错

1 let myVariable;
2 let {a:myVariable}={a:‘我的变量‘}
3 
4 console.log(myVariable);//Uncaught SyntaxError: Identifier ‘myVariable‘ has already been declared

对象的解构也可以指定默认值，但对象的属性值要严格等于undefind

1 var {a=3}={a:undefined} 
2 
3 console.log(a);//3
4 
5 var {x=3}={x:null}
6 
7 console.log(x);//null

如果解构失败，变量的值等于undefined

1 var {a}={b:‘c‘};
2 
3 console.log(a);//undefined

如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，将会报错

 

变量解构赋值的常见用途 

 1 /*用途1：交换变量的值*/
 2 let x=3;
 3 let y=4;
 4 [x,y]=[y,x];
 5 
 6 console.log(x);//4
 7 console.log(y);//3
 8 
 9 /*用途2：从函数返回多个值*/
10 function returnArr(){
11     return [1,2,3];
12 }
13 
14 var [a,b,c]=returnArr();
15 
16 console.log(a);//1
17 console.log(b);//2
18 console.log(c);//3
19 
20 function returnObj(){
21     return {
22         propA:‘a‘,
23         propB:‘b‘,
24     }
25 }
26 
27 var {propA,propB}=returnObj();
28 
29 console.log(propA);//a
30 console.log(propB);//b
31 
32 /*提取JSON数据*/
33 var jsonData=http://www.mamicode.com/{
34     id:42,
35     status:‘ok‘,
36     data:[867,5309]
37 }
38 
39 let {id,status,data:number}=jsonData;
40 console.log(id);//42
41 console.log(status);//ok
42 console.log(number);//[867,5309]

 

变量的解构赋值


联系
我们