解構賦值的用法。

按照必定模式，從數組和對象中提取，對變量進行賦值，稱爲解構 
經過解構咱們可讓賦值更優雅便捷

// 通常賦值 var a = 1, b = 2, c = 3;

//解構賦值 var [a, b, c] = [1, 2, 3];

固然不單單是var，let和const也能夠

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

語法本質

實質上這個語法就是一種模式匹配 
若是等號兩邊模式相同 
左邊變量就會被賦予相應值 
因此下面的形式也能夠正常賦值

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

不過咱們徹底沒有必要寫這麼複雜

特殊用法

解構賦值還能夠和「…」配合使用 
若是「…」在等號左邊 
那麼就會把剩餘的值合併爲一個數組 
這個操做符只能寫在最後一個變量前面

var [left, ...right] = [1, 2, 3, 4, 5]; console.log(left, right);//1 [2,3,4,5]

---

若是「…」在等號右邊 
就是把數組展開再賦值

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

（「…」叫作展開操做符，之後我還會細講）

解構失敗與不徹底解構

若是沒有在匹配中沒有對應值，那麼它的值就是undefined 
也就是解構失敗 
等號右邊少值

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

---

與它相對的就是不徹底解構 
等號左邊少值

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

錯誤解構

若是等號右邊不是數組（不是可遍歷解構） 
就會報錯 
好比說這些狀況是不能賦值解構的

var [foo] = 1/true/NaN/undefined/null/{};

 

下面的狀況也是不能夠的

var [a, [b]] = [1, 2];

它能夠拆成var a = 1;和var [b] = 2; 
第二個一樣不能解構賦值因此會報錯

默認賦值

能夠使用下面這種語法實現默認的賦值

var [foo = 1] = []; console.log(foo); //1

---

只有當右側的值嚴格等於undefined纔會使用默認賦值

var [foo = 1] = [null]; console.log(foo); //null

因爲 null ！== undefined 
因此這裏foo被賦予null

惰性賦值

惰性賦值說的是默認賦值的機制 
只有在須要使用默認值的時候 
纔會去求值

function foo(){ alert(' '); return 123; }

var [a = foo()] = [1]; //不彈窗 console.log(a); //1

 

var [a = foo()] = []; //彈窗 console.log(a); //123

解構順序

解構賦值首先會看右邊有沒有與之對應的值 
沒有的話從左向右解析

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

 

這段代碼就至關於

var a = 1; var b = a;

 

---

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

注意 
若是這裏var 換成let就不同了

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

這段代碼能夠當作

let a = b; let b = 1;

因爲let聲明沒有變量提高 
因此此時b還未聲明就會報錯

---

能夠看看這道題

var [x1 = 1, y1 = x1] = []; var [x2 = 1, y2 = x2] = [2]; var [x3 = 1, y3 = x3] = [1,2]; var [x4 = y4, y4 = 1] = []; console.log(x1,y1);//1 1 console.log(x2,y2);//2 2 console.log(x3,y3);//1 2 console.log(x4,y4);//undefined 1

同理若是上面的第四行的var換成let會報錯

對象解構

上面咱們經過數組的形式瞭解瞭解構賦值 
其實解構賦值不單單能夠用數組 
對象也能夠 
它們相似的地方就再也不贅述了

基本用法

對象的解構賦值是按照屬性名（鍵）決定的 
若是沒有找到對應的屬性，那就賦予undefined

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

 

對於已經聲明過的變量要注意

var a; {a} = {a: 1}; //錯誤

 

瀏覽器會報錯 
由於js引擎把它理解成了代碼塊 
而內部的代碼它不認識 
解決辦法就是加上括號 
這樣瀏覽器就能夠知道這是一個表達式

var a; ({a} = {a: 1});

 

---

可是若是咱們想要聲明的變量與屬性名不一樣怎麼辦呢 
咱們能夠使用另外一種模式

var {foo: a, bar: b, foobar: c = 100} = { foo: 1, bar: 2 } console.log(a, b, c);//1 2 100

 

這至關於聲明瞭a和b變量 
一樣能夠使用默認賦值

字符串解構賦值

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

 

字符串被轉化爲基本包裝對象（類數組對象） 
因此能夠實現

var {length : len} = 'hello'; console.log(len); //5

 

同理這個類數組對象中有length屬性

基本值解構賦值

若是等號右邊是數字或者布爾值 
也一樣會轉化爲包裝對象

let {toString: a} = 123; let {toString: b} = true; console.log( a === Number.prototype.toString); //true console.log( b === Boolean.prototype.toString); //true

 

---

但注意null和undefined沒有封裝對象 
下面的代碼會報錯

let {toString: x } = undefined; //錯誤

let {toString: y } = null; //錯誤

函數參數的結構賦值

function add([x, y]) { return x + y; } console.log(add([1, 2]));

 

函數參數表面上是一個數組 
但在傳入參數時，數組參數就被結構成變量 x 和 y 
至關於var [x, y] = [1, 2]

---

function foo({x = 0, y = 0} = {}){ console.log([x, y]); } foo({x: 1,y: 2}); //[1, 2] foo({x: 1}); //[1, 0] foo({}); //[0, 0] foo(); //[0, 0]

 

function bar({x, y} = {x: 0, y: 0}){ console.log([x, y]); } bar({x: 1,y: 2}); //[1, 2] bar({x: 1}); //[1, undefined] bar({}); //[undefined, undefined] bar(); //[0, 0]

 

解構賦值的應用

除了交換變量之外 
解構賦值還有不少用途

函數多值返回

function demo(){ return [1, 2, 3]; } var [a, b, c] = demo();

 

函數定義參數

function demo({a, b, c}){ ... } demo({a: 1, b: 2, c: 3});

 

提取JSON數據

var jsonData= { id: 66, status: 'OK', data: [123, 456] } let {id, status, data:number} = jsonData;

 

轉載：https://blog.csdn.net/q1056843325/article/details/53728836