DIV CSS 佈局教程網

大致介紹

解構：就是將聲明的一組變量和與相同結構的數組或者對象的元素數值一一對應，並將變量相對應元素進行賦值

數組解構

例子：

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

可以看到，數組中的a,b,c分別對應1，2,3

嵌套的數組也可以進行解構

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

 let [d,,e] = [1,2,3];
 console.log(e); //3

 let [f,...tail] = [1,2,3];
 console.log(tail); //[2, 3]

在解構不成功時，變量的值就是undefined

 let [a,b] = [1];
 console.log(b); //undefined

不完全解構也是可以的

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

也可以設置默認值

let [a = 1] = [];
 console.log(a); //1

 let [b = 1] = [2];
 console.log(b); //2

 let [c = 1] = [undefined];
 console.log(c); //1

 let [d = 1] = [null];
 console.log(d); //null

注意：在ES6中使用嚴格相等運算符（===）。所以如果默認值不嚴格相等undefined，默認值就不會生效。例如null

默認值也可以是表達式，但是要注意只有默認值在使用時才會觸發函數（惰性求值）

function f(){
  alert(1);
 }
 let [a = f()] = [3]; //f()不會執行
 let [b = f()] = [undefined]; //會執行

對象解構

例子：

 let {foo,bar} = {foo:1,bar:2};
 console.log(foo); //1

注意：與數組不同，對象解構時不是根據位置對變量賦值的，而是通過變量名進行賦值，即變量名和屬性名必須相等才可以進行賦值，位置不重要

 let {bar,foo} = {foo:1,bar:2};
 console.log(foo);//1

如果變量名和屬性名不相同，則要采取下面的方法

 let {first: f,last: l} = {first:1,last:3};
 console.log(l); //3

意思就是先在對象中查找first屬性，如果有就賦值給f，其中first是匹配的模式，而f才是真正的變量

所以對象解構的完整形式是：

let {first: first,last: last} = {first:1,last:3}; 

對象解構也可以進行嵌套

let obj = {
  a:1,
  b:[
   'hello',
   {c:'world'}
  ]
 }
 let {a: a,b: [h,{c:w}]} = obj;
 console.log(a); //1
 console.log(h); //hello
 console.log(w); //world

對象解構也可以設置默認值，並且如果解構失敗，變量會賦值undefined

 let {x: x = 1,y: y=2,z: z=3,w: w} = {x:3,y:null,z:undefined};
 console.log(x) //3
 console.log(y) //null
 console.log(z) //3
 console.log(w) //undefined 

字符串解構

字符串之所以能夠解構是因為此時字符串轉換成了一個數組

 let [a,b,c] = 'hello';
 console.log(a); //h
 console.log(b); //e
 console.log(c); //l

數值和布爾值解構

解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: a} = true;
a === Boolean.prototype.toString // true

上面代碼中，數值和布爾值的包裝對象都有tostring屬性，因此變量s都能取到值。

解構賦值的規則是，只要等號右邊的值不是對象或數組，就先將其轉為對象。由於null和undefined無法轉為對象，所以對它們進行解構賦值，都會報錯。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！