ES6解構賦值

es6允許按照一定模式從陣列和物件中提取值，然後對變數進行賦值，這被稱為解構；

//es5多個變數賦值

var a = 1;
var b = 2;
var c = 3;
//es6使用陣列解構賦值給多個變數賦值，與上述**有相同的賦值效果; 
let [a,b,c] = [1,2,3]; 
//解構賦值是從陣列中提取值，並按照位置給變數賦值，可以設定預設值，若解構不成功值為undefined
let [a=111,b,c] = [,23,]; // a=111, b=23 ，c=undefined

//簡單的物件解構賦值

let  = ; // name = 'sisi', age = 12
//複雜的物件解構賦值 
let  = ;//其中，foo為模式，abc為變數，賦值給變數即abc, abc=eee；
const node = 
}};let , loc: } } = node;
//賦值結果：line = 1 ，start = object  ，loc = object 
//真正賦值的是冒號後面的變數，而不是冒號前面的模式；最後一次對line的賦值中start、loc都是模式，只有line是變數

let [a,b,c,d,e] = 'hello'; //a='h',b='e',c='l',d='l',e='o'

// 引數預設值

//傳統js
function foo (val) 
//es6 效果相同
function foo (val = 'lll')

// 情況一 

function foo1 ( = {}) 
// 情況二 
function foo2 ( = ) 
foo1(); // ['kk',12]
foo2(); // ['kk',12]
foo1({}); // ['kk',12]
foo2({}); // [undefined,undefined]
foo1(); // ['sisi',12]
foo2(); // ['sisi',undefined]
foo1(); // ['sisi',15]
foo2(); // ['sisi',15]

先來分析物件的解構賦值過程，這個問題比較容易理解：

1. 這兩個函式引數裡面等號左邊的是引數，等號右邊的是賦值；

2. 當函式傳入引數時，會對傳入引數進行解構，當解構失敗時，會設定為等式左邊的預設值；

3. 在foo1中，給變數 name 和age 指定了預設值，給函式設定的預設引數為空物件，所以當傳入引數為時，age屬性解構失敗，會預設等於等式左邊的值即12；

4. 但在foo2中，可以看為給函式預設傳入乙個物件，當呼叫函式，重新給函式傳入物件時，預設傳入物件將失效，並對傳入的物件進行解構賦值。

foo2({}); // [undefined,undefined]

// 等效為
function foo2 ( = {}) 
foo1( = )

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 現今的變數宣告語法十分的直接 左邊是乙個變數名，右邊可以是乙個陣列 的表示式或乙個物件 的表示式，等等。...