ES6中的解構（一）

2021-09-08 21:12:01 字數 910 閱讀 9628

傳統的賦值方式

let x = 1;


let y = 2;


let z = 3;


//或let x = 1,


y = 2,


z = 3;
es6中採用陣列模式   運算子

let [x,y,z] = [1,2,3];


let arr = [1,2,3];


let [a,b,c] = arr;
模式匹配,一一對應

let [a,,c] = [1,2,3];      //a = 1; c = 3;


let [a,b,c] = [1,2];        //c = undefined
帶預設值

let [a = 1] = ['a']; // a = 'a';


let [a = 1] = ;    // a = 1;
需要特別注意，如果解構的值為undefined，則取預設值

let [b = 1] = [undefined];  //1


let [b = 1] = [null];       //null
解構的物件不僅僅可以是單一的值，也可以是物件或陣列

let [a,b,c] = [1,[2,3],4];


let [a,b,c] = [1,,4];
在物件的結構中，如下例，name是匹配模式，a才是變數

let  = ;  //a = 'abc';b = 20;


let  = ;  //相當於let  = 


let  = ;   //錯誤  name為變數， abc是物件中匹配的值

ES6中的解構

陣列中的解構 輸出 白板么雞 二條物件的解構 輸出 老王 12陣列的結構用 物件的解構用 一定要區分它是陣列還是解構。區分方法 看 它是在賦值還是在拿值，等號左邊，都為解構，等號右邊，都是陣列或者物件。運算子，首先來看 輸出 白板 么雞二條 如果給c加上 運算子 輸出 白板 么雞 二條 三餅 四筒 ...

ES6中解構賦值

理解 解構賦值就是從目標物件或陣列中提取自己想要的變數。最常用的場景是 element ui 或 vant ui 按需引入，請求介面返回想要的資料。陣列解構 乙個蘿蔔乙個坑，按照順序進行 var a,b,c 12,13 a,b 這個寫法報錯 invalid destructuring assignm...

ES6中的解構賦值

按照原有值的解構，把原有值中的某一部分內容快速獲取到 快速賦值 給乙個變數 陣列的解構賦值 解構賦值本身是es6的語法規範，使用什麼關鍵字來宣告這些變數是無所謂的 let ary 12,23,34 傳統的取值賦值操作 let a ary 0 b ary 0 c ary 0 console.log a...