ES6 解構賦值的介紹

常考的面試題中：

已知 x =3,y=5 在不宣告其他變數的情況下交換其值；
解法1:老式解法
x =x+y;
y =x-y
x= x-y
解法2：（解構賦值）
[y,x] = [x,y]  // 注意：一定是陣列的解構賦值，因為它按順序而非屬性名相同；符合預期

定義： 按照一定的模式從陣列和物件中提取值，然後對變數進行賦值，這被稱為解構（destructuring）

let a = 1;

let b = 2;
let c = 3;

形式多種多樣，但一定要遵循一條原則，就是左右的格式結構要相同！！！

1.這幾個都屬於完全解構，即數量和格式完全匹配
let [a, b, c) = [1, 2 , 3];  //  a= 1 b=2 c=3
let [foo, [[bar], baz]] = [l , [[2], 3]]; // foo = 1 bar= 2 baz=3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
2.不完全解構，但是格式結構也一定要一樣！！！
let [x, y] = [1, 2, 3];
x // 1
y // 2 
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

注意：如果等號的右邊不是陣列（或者嚴格來說不是可遍歷的結構）將會報錯：

／／ 報錯

let [foo] = 1;
let [foo] = false ; 
let [foo] = nan;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

解構賦值允許指定預設值

let [foo = true] = ;

foo // true
let [x, y ='b']=['a', undefined]; // x='a', y='b' 
let [x, y = 'b'] = ['a'] //  x='a', y='b' 
比較注意的：
es6 內部使用嚴格相等運算子（＝＝＝）判斷乙個位置是否有值 所以，如果乙個陣列成員
不嚴格等於 undefined ，預設位是不會生效的
第乙個是等於undefined,第二個不嚴格等於，則預設值無效
let [x = 1] = [undefined]; // x = 1
let [x = 1] = [null]; // x =null
預設值是表示式時，表現為惰性賦值，即只有在真正用到時才會呼叫：
function f()
let [x = f() ] = [1] // x=1
let [x = f() ] = [undefined] // x = 'aaaaa'
let [x = f() ] = [null] // x=null
預設值可以引用解構賦值的其他變數，但該變數必須己經宣告。
let [x = 1 , y = x] = ; // x=1 ; y=1
let [x = 1, y = x] = [2]; // x=2 ; y=2
let [ x = 1 , y = x] = [ 1 , 2] ; // x=1; y=2

物件的解構與陣列有個重要的不同。

陣列的元素是按次序排列的，變數的取值是由它的位置決定的；

而物件的屬性沒有次序，變數必須與屬性同名才能取到正確的值。

屬性名左右對應才能列印出對應的值

屬性名對應的均可以列印出對應的值

let  = ;
too //  'aaa'
bar // 'bbb' 
無對應的屬性名：
let  = ; // bazo = undefined

給解構出來的屬性起別名：

var  = 

// bgm = 'aaa' cgm = 'bbb'
實際上說明 ，物件的解構賦值是下面形式的簡寫
let  = ;

物件的解構也可以指定預設值。預設值生效的條件是，物件的屬性值嚴格等於 undefined; 和陣列規則相同

var ;

x // 3 
var  =  ;
x // 1
y // 5 
var  = {};
y // 3 
var  =  ;
y // 5 
var  ={};
msg // 'something went wrong' 
注意事項：預設值生效的條件是，物件的屬性值嚴格等於 undefined
var ;
x // 3
var ;
x // null 
如果解構失敗 變數的值等於 undefined
let  } =  ;  // 不存在foo屬性名,報錯

由於陣列本質是特殊的物件 因此可以對陣列進行物件屬性的解構。

let arr = [1, 2, 3] ; 

let  = arr
first // 1    
last // 3

字串也可以解構賦值。這是因為此時字串被轉換成了乙個類似陣列的物件。

直接對字串解構賦值，遵循的規則還是和陣列物件的規則一樣，不過格式比較單一，物件形式以及自定義變數名

const  = 'love'
a // 'l'
b // 'o'
c // 'v'
d // 'e'
可以對字串中的長度屬性解構獲取對應的值：
let  = 'hello';
len // 5

交換變數的值

let x= 1;
let y =2;
[y, x] = [x, y]  // y=1 x=2
從函式返回多個值
function example() 
let  = jsondata
console.log(id, status, number)  // 這裡的data是模式

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...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名，右邊可以是乙個陣列 的表示式或乙個物件 的表示式，等等。...