解構的作用:簡化書寫長度，提升開發效率，
解構物件
在開發中我們常用到使用ajax請求資料，并且把資料渲染到頁面上，可能這個資料回傳的物件或陣列，例如回傳一個obj{name:'zwq',age:18,sex:woman}而我們獲取里面的值保存在變數里會用 var name = obj.name,var age = obj.age，
在es6中提供了解構的語法糖，讓左右兩側極為相似的結構進行變數賦值，
在物件中單獨寫一個name代表的就是 name：name，左側name你要到物件物件找到的屬性，右側name代表你宣告的變數名，所以，下面代碼中obj物件的name，age屬性賦值給變數name和age，在左側的變數找到了右側物件的相同屬性并把值賦給對應變數，
let obj = {
name: "zwq",
age: 18,
sex:'female'
}
let name,age;
({ name, age } = obj);
console.log(name, age); //zwq 18
上面代碼是先宣告變數，在賦值，也可以宣告變數時同時賦值，如下：
let {name,age} = obj;
console.log(name,age); //zwq 18
當自己宣告的變數不想和對應的屬性重名是
let {name:Oname,age:Oage} = obj;
console.log(Oname,Oage); //zwq 18
默認賦值
下面代碼采用默認賦值，形參a,分別默認賦值為10，20，當值傳入一個值的時候，b并不是undefined，而是取默認值，
function sum(a = 10,b = 20){
console.log(a+b);
}
sum(5);
下面代碼使用默認值的方式給變數sex附上默認值male，當物件中找不到對應的屬性是取默認值，當存在對用屬性是，取物件里面的值，
let {name:Oname,age:Oage,sex ='male' } = obj;
console.log(Oname,Oage,sex);
解構陣列
由于陣列也是物件,屬性名是當前的索引值，所以下面可以成功的進行變數賦值，同時陣列中用length屬性，因此宣告length變數也可以獲取物件的屬性值：陣列的長度
let arr = [1,2,3];
let {0:x,1:y,2:z} = arr
console.log(x,y,z); //1,2,3
let{length} = arr;
console.log(length); //3
而解構就是使用左右兩側極為相似的解構進行賦值，在陣列解構中這樣書寫：
let [x,y,z] = arr;
console.log(x,y,z); //1,2,3
當陣列嵌套物件的形式也可以利用左右兩側相似解構進行賦值，
用，，，占位，照抄arr的結構，如下宣告name變數，并且列印zwq.
let arr = [1,2,3,{name:'zwq'}];
let [,,,{name}] = arr;
console.log(name);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/174074.html
標籤：JavaScript
上一篇：vue-cli3和element做一個簡單的登陸頁面
下一篇：Vue