es6解構賦值

coding changes the world , accumulating makes yourself

主要從三個方面講述：

陣列式的解構賦值

物件式的解構賦值

函式中的解構賦值

// preface

// 現今的變數宣告語法十分的直接：左邊是乙個變數名，右邊可以是乙個陣列：的表示式或乙個物件： 的表示式，等等。解構賦值允許我們將右邊的表示式看起來也像變數宣告一般，然後在左邊將值一一提取
// 1. 陣列解構賦值
// 1.1 傳統方法: 為陣列中元素起乙個 alias
var value = [1,2,3,4,5];
var el1 = value[0],el2 = value[1], el3 = [2];
// 1.2 es6 方法
let value = [1,2,3,4,5];
let [el1,el2,el3] = value; // 對應前三個元素有了 alias
// 1.3 兩個變數交換值的時候 不再需要臨時變數了
[a,b] = [b,a] // 感覺和 python 的路線有點像
// 1.4 解構賦值的套欠
let [el1,el2,[el3,el4]] = [1, 2, [3, 4, 5]];
// 1.5 指定位置的賦值
let [el1,,el3,,el5] = [1,2,3,4,5];
// 1.5.1 example
var [,firstname, lastname] = "john doe".match(/^(\w+) (\w+)$/);
// 1.6 指定預設值:需要注意的是預設值只會在對undefined值起作用(也就是說預設值的時候首先會檢測 右側是否賦值 undefined)
var [firstname = 'john', lastname = 'joe'] = ;
// 1.6.1 下面的值 是 null
var [firstname = "john", lastname = "doe"] = [null, null];
// 1.7 rest 引數，休止符,tail 變數將會接收 陣列的剩餘元素(注意：tail 變數後面不能有其他變數了)
var vlaue = [1,2,3,4,5];
var [el1,el2,el3,...tail] = value;
// 2. 物件的解構賦值
// 與陣列解構賦值的方式幾乎完全一樣
// 可以這樣理解： 陣列是通過位置 序號來賦值的，plainobj 是通過鍵名來賦值的。（本質上陣列的位置，序號也就是鍵名）
// 2.1 物件的解構賦值
var person = ;
var = person;
// 2.2 es6允許變數名與對應的屬性名不一致。這裡相當於宣告了name 和 lastname 兩個變數
var person = ;
var = person;
// let person = ;
// undefined
// let = person
// undefined
// firstname
// vm120: 1 uncaught referenceerror: firstname is not defined
// at:1:1
// 2.3 深層套欠物件賦值, 
// note: 此時，name 變數並沒有宣告
var person = };
var } = person;
// 2.4.1 物件包裹陣列
var person = ;
var = person;
// 2.4.2 array is around object 
var person = ;
var = person;
// 2.5 obj deconstruction uses default value
// note: 預設值使用的是 賦值符號不是 冒號
var = {};
// 預設值同樣也只會在對undefined值起作用，下面的例子中firstname和lastname也都將是null：
var = ;
// 3.0 函式引數的解構賦值
// es6中，函式的引數也支援解構賦值。這對於有複雜配置引數的函式十分有用。你可以結合使用陣列和物件的解構賦值。
// 3.1傳統寫法
function
finduser
(userid, options) 
if (options.includehistory) {}
}// 3.2 es6 寫法(真是太簡潔了)
function
finduser
(userid, ) 
if (includeprofile) {}
}// supplement
// note: 我們是對變數賦值 所以即使是物件，左邊 一般也是只有鍵沒有 value 的, 如果 物件 deconstruction 時候，value 處有值，那麼 該鍵對應的變數是不會被宣告的
// 有了陣列的解構賦值，多變數同時賦值的寫法改變
// s1.1.1 傳統 
var a = 1, b = 2, c =3;
// s1.1.2 es6
let [a,b,c] = [1,2,3];
// 總結： 1. 可以同時宣告多個變數 並且對多個變數進行賦值 2. 對於返回的陣列或者 plainobj 可以直接一次性取值 3. 對於複雜的 物件包裹 取值也不需要不斷的鏈式，直接字面量取值

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解構賦值

陣列的解構賦值 陣列的解構賦值需要左邊的變數結構需要等於右邊的值的結構，即給對應位置的變數宣告對應位置的值，變數的取值由位置決定 只要某種資料型別具有迭代器 iterator 介面，就可以使用陣列的解構賦值，不一定非是陣列 es6中具有iterator介面的資料型別有 陣列，類陣列物件，字串，set...