ES6语法中的解构赋值

关于数组的解构赋值

Easy Assignment
简便赋值

//ES5定义方法
var a = 1, b = 2, c = 3;
//ES6定义方法
var [a, b, c] = [1, 2, 3];

---

Jump Assignment
跳跃赋值

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

a: 1
c: 3
Error: b is not defined

---

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

a: 1
b: [2, 3]

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

a: 1
b: 2
c: 3
d: default

---

Not exist value will be defined as ‘undefined’

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

d: undefined

关于对象的解构赋值

Easily assign values from json objects to variables with ES6 Syntax
使用ES6语法轻松地将json对象的值赋给变量

var object = {
    a: 1,
    b: 2
}

// ES5
// var a = object.a;
// var b = object.b;

// ES6
let {a, b} = object;
// 完整的全写方法为：
// let{a:a, b:b} = object
console.log(a);
console.log(b);

a: 1
b: 2

---

The “Object Destructuring Assignment” is to find variables name in the json object from the current variable name. It will defined as undefined if can’t find variables name in the json object.
对象解构赋值，是由当前的变量名寻找json对象中的变量名，若找不到json对象中对应的变量名，就为undefined。

var object = {
    a: 1,
    b: 2
}
let {a, c} = object;
console.log(a);
console.log(c);

a: 1
c: undefined

---

Custom variable need to be set to a name that corresponds to an existing value in the json object.
自定义变量需要设置一个与json对象中已有值对应的名字。

var object = {
    a: 1,
    b: 2
}
let {a:A, b} = object;  //find 'a' first and assigment to 'A'
console.log(A);
console.log(a);
console.log(b);

A: 1
Error: a is not defined

---

Can’t declared variable at twice.

var obj = {
    a: 1,
    b: 2
}
let a;
let {a, b} = obj;

Error: ‘a’ has already been declared

---

When we need to assignment for a declared variable, only to write like this:

var obj = {
    a: 1,
    b: 2
}
let a = 0;
console.log(a);

({a, b} = obj);
console.log(a);
console.log(b);

a: 0
a: 1
b: 2

---

Destructuring complex json object.
解构复杂的json对象

var obj = {
    arr: [
        'Yo.',
        {
            a: 1
        }
    ]
}
// Use Object Destructuring and Array Destructuring
let {arr: [greet, a]} = obj;
console.log("greet:", greet);
console.log("a:", a);

---

Handling default values when destructuting objects.
解构对象时处理默认值

let {a = 1, b = 2} = {a: 10};
console.log(a);
console.log(b);

a: 10
b: 2

---

Apply Object Destructuring
具体应用

// ES6 Sytax
let res = {
    status: 200,
    id: 12,
    data: [ {name: 'Bob'}, {name: 'EsunR'} ]
}
let {status, id, data} = res;
if(status == 200){
    ...
}

// ES5 Sytax
let res = {
    status: 200,
    id: 12,
    data: [ {name: 'Bob'}, {name: 'EsunR'} ]
}
var status = res.status;
var id = res.id;
var data = res.data;
if(status == 200){
    ...
}

变量的解构赋值（其他）

Destructuring function
解构方法

// ES5
var len = 'yo.'.length;
console.log(len);

len: 3

// ES6
let {length} = 'yo.'
console.log(length);

length: 3

---

String destructuring to arry
字符串解构为数组

let [a, b, c] = 'Yo.'
console.log(a);
console.log(b);
console.log(c);

a: ‘Y’
b: ‘o’
c: ‘.’

---

Parameter Processing
参数的处理

// ES5 Sytax 
// Parameters as arry
var arr = [1, 2];
function test(a, b){
    console.log('a:', a);
    console.log('b:', b);
}
test(arr[0], arr[1])

a: 1
b: 2

// ES6 Sytax
var arr = [1, 2];
function test([a, b]){
    console.log('a:', a);
    console.log('b:', b);
}
test(arr);

a: 1
b: 2

// ES6 Sytax
// Parameters as object
// Benefit: Can sloved the problem of the order of the parameters
var obj = { b:2, a:1 }
function test({a, b}){
    console.log('a:', a);
    console.log('b:', b);
}
test(obj);

参考教程：http://biaoyansu.com/7.3 [表严肃]