es6解構賦值理解

2021-08-20 19:11:00 字數 2522 閱讀 4312

最優:結構賦值的規則是,只要等號右邊的值不是物件或者陣列,就先將其轉為物件,再匹配更詳細規則。由於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...