最優:結構賦值的規則是,只要等號右邊的值不是物件或者陣列,就先將其轉為物件,再匹配更詳細規則。由於undefined和null無法轉換為物件,所以進行匹配就回報錯。
注意事項:變數宣告、函式引數、賦值語句模式等不要帶圓括號,es6識別不出來是要做結構還是做表示式。
1、陣列:左右都是陣列(可遍歷)
1.1、模式匹配:左右兩邊格式完全相同,較好理解,直接賦值。
let a=1; //a==1
let [a,b,c]=[1,2,3]; //a==1,b==2,c==3
let[a,[b,c]]=[1,[2,3]]; //a==1,b==2,c==3
1.2、運算子匹配:三點運算子
1.2.1、剩餘運算子:剩餘的必須寫在最後部分
let [a,b,...c]=[1,2,3,4,5]; //a==1,b==2,c==[3,4,5]
1.2.2、拓展運算子:解構陣列插入,避免出現直接插入情況
let a=[2,3,4];b=[1,...a,5]; //b==[1,2,3,4,5]
1.3、不完全解構:從左到右匹配完,剩餘部分忽略
1.3.1、值不夠匹配變數:let [a,b,c]=[1,2]; //a==1,b==2,c==undefined
1.3.2、變數不夠匹配值:let [a,b,c]=[1,2,3,4]; //a==1,b==2,c==3
1.4、設定預設值:只要匹配的右邊是嚴格等於undefined,那麼左邊的預設值就生效。設定的預設值必須是宣告過的。
let [x=1]=[undefined]; //x==1
let [x=1]=[null]; //null
let [x=1,y=2]=[3]; //x==3,y==2
let[x=y]=; //referenceerror:y is not defined
2、物件
2.1、直接匹配(實際為通過物件冒號的左邊進行匹配,賦值給右邊的變數;當沒有明確寫的時候預設變數和屬性相同)
let =; //foo=="a",bar=="b";實際生效的是 let =;
let =; //foo=="a",bar=="b"
2.2、巢狀匹配:參考第1點,物件層級一樣,父層一定要匹配上否則報錯,因為undefined是沒有子屬性的。
let }=}; //foo==undefined,匹配上foo,子物件a==5
let }=}; //foo==,匹配上foo,子物件a==5;先賦值foo=2,再賦值foo=
let }=; //undefined,不報錯,匹配上foo,但是沒找到子物件a
let }=; //cannot destructure property `a` of 'undefined' or 'null'.,報錯,匹配不上faa,更不要說.出子物件
2.3、預設值:只要匹配的右邊是嚴格等於undefined,那麼左邊的預設值就生效。設定的預設值必須是宣告過的。
let ={}; //x==1
let =; //x==3,y==2
let={}; //y==3,x只是匹配,不是變數
let=; //y==5,x只是匹配,不是變數
let={}; //referenceerror: s is not defined
2.4、陣列:作為特殊物件進行物件結構:匹配的是下標
let arr=[1,2,3,4];
let =arr; //a==3
3、字串:根據字串長度結構為陣列,匹配規格和陣列&物件一樣
let=[a,b,c]="abcdefg"; //a=="a",b=="b".c=="c" 根據陣列匹配陣列
let=="abcdefg"; //a=="a",b=="d".c=="f" 根據陣列下標匹配物件
4、數值和布林值結構:先轉換為物件,然後通過原型屬性進行匹配
let =123; s===number.prototype.tostring //true
5、函式次數的解構
規則和物件解構一樣,不過是講賦值轉成了穿參的形式。
function add([x,y]) add([1,2]) //3
function add(=) ; add() //00 ,如果沒給其他賦值那就2個都是0,如果賦值2個就顯示賦值的 例如add() return [1,2],只有1個就按規則匹配 例如add(x:1) return [1,undefined]。最核心的思路就是,等號右側的0,0是給預設值 而不是給變數,可以理解為={}。傳參就是我們呼叫方法的時候給過去。
6、主要用途
6.1、陣列順序調整
6.2、返回多個值:相比之前只能renturn 1個值,現在es6可以返回乙個陣列或者物件,然後通過結構得到返回的所有資料
function example() let [a,b,c]=example(); //a==1,b==2,c==3
6.3、通過函式引數結構進行有序傳參(陣列匹配)和無序傳參(物件匹配)
ES6整理 解構賦值
es6中允許從陣列中提取值,按照對應位置,對變數賦值。物件也可以實現解構。let arr 1,2,3 let a,b,c arr 或者 陣列解構允許我們按照一一對應的關係從陣列中提取值,然後將值賦值給變數 let a,b,c 1,2,3 console.log a console.log b con...
ES6 解構賦值
陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...
ES6解構賦值
一 基本用法 解構 destructuring 按照一定的模式,從陣列或者物件中提取值,對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...