ES6 -- 解構分配(Destructuring Assignment)

"解構分配"意思是: 可從一個現有的物件或陣列中產生新的變數出來。且用這種方式的語法會變得更簡潔、直觀清楚。

在ES5中, 當我們想將原本陣列的值以相反順序放進去並存放在新變數時, 會這麼做:

e.g.

var item = ["a", "z"];

var a = item[0];

var z = item[1];

item = [z, a];                                  // 在此設定為新的陣列, 且值放的順序是和原本陣列相反的

console.log(item);                      // ["z", "a"]

在ES6中用解構分配來做:

e.g.

var item = ["a", "z"];

var [a, z] = item;                           // 重點 --> 在此的 [a, z]會自動對應上一行的"a"和"z"。用"[]"表示是從陣列中去做解構分配, 在此[]只能算是變數的集合, 而非真的是個陣列

item = [z, a];                                  // 在此設定為新的陣列, 且值放的順序是和原本陣列相反的

console.log(item);                     // ["z", "a"]

另外, 在ES5中, 當我們將物件的屬性存放在新變數時, 會這麼做:

e.g.

var obj = {

    name: "John",

    age: 30,

    sex: "man"

};

var name = obj.name;

var age = obj.age;

var sex = obj.sex;

console.log(name, age, sex);                         // John 30 man

在ES6中用解構分配來做:

e.g.

var obj = {

    name: "John",

    age: 30,

    sex: "man"

};

var {name, age, sex} = obj;                                // 重點 --> 在此的{name, age, sex}會自動對應上面的"name"、"age"、"sex"。用"{}"表示是從物件中去做解構分配, 在此{}只能算是變數的集合, 而非真的是個物件

console.log(name, age, sex);                          // John 30 man

另外, 如果我們今天想要處理的是"深層物件"(深層物件是指物件中又有物件)呢:

在ES5中是這樣寫:

e.g.

var obj = {

    name: {

        firstName: "John",

        lastName: "Lin"

    },

    age: 30,

    sex: "man"

};

var firstName = obj.name.firstName;

var lastName = obj.name.lastName;

var age = obj.age;

var sex = obj.sex;

console.log(firstName, lastName, age, sex);                        // John Lin 30 man

在ES6中用解構分配來做:

e.g.

var obj = {

    name: {

        firstName: "John",

        lastName: "Lin"

    },

    age: 30,

    sex: "man"

};

var {name:{firstName, lastName}, age, sex} = obj;                // 重點在這句

console.log(firstName, lastName, age, sex);                          // John Lin 30 man

再者, 如果今天當我們傳入的參數是個陣列, 且需要在函式中將陣列值取出:

在ES5中會這樣做:

e.g.

function f1(ary) {

    var name = ary[0];                                                 // 在此取出陣列第1個值

    var age = ary[1];                                                    // 在此取出陣列第2個值

    console.log(name, age);                                   // John 30

}

f1(["John", 30]);

在ES6中用解構分配來做:

e.g.

function f2([name, age]) {                                      // 直接在傳入參數這邊做解構分配

    console.log(name, age);                                    // John 30

}

f2(["John", 30]); 

再者, 如果今天當我們傳入的參數是個物件, 且需要在函式中將物件的屬性值取出:

在ES5中會這樣做:

e.g.

function f1(obj) {

    var name = obj.name;                                         // 在此取出物件物件屬性值

    var age = obj.age;                                                // 在此取出物件物件屬性值

    console.log(name, age);                                    // John 30

}

f1({name: "John", age: 30});

在ES6中用解構分配來做:

e.g.

function f2({name, age}) {                                     //  直接在傳入參數這邊做解構分配

    console.log(name, age);                                   // John 30

}

f2({name: "John", age: 30});

最後, 如果我們需要為新變數指定預設值時,要如何做呢:

在ES5中, 會這樣寫:

e.g.

var list = [7, 42];

var a = list[0] ? list[0] : 1;

var b = list[1] ? list[1] : 2;

var c = list[2] ? list[2] : 3;                                             // 取不到值, 所以得到3

var d = list[3] ? list[3] : undefined;                           // 取不到值, 所以得到undefined

console.log(a, b, c, d);                                             // 7 42 3 undefined

在ES6中用解構分配來做:

e.g.

var list = [7, 42];

var [a = 1, b = 2, c = 3, d] = list;                                // 重點 --> 在此的 [a = 1, b = 2, c = 3, d]會自動對應上一行的"7"和"42"。用"[]"表示是從陣列中去做解構分配, 在此[]只能算是變數的集合, 而非真的是個陣列。d不給值 --> 通常預設值是"undefined"。(如果d=null, 那會輸出"null")。會用到預設值通常代表陣列值不夠分配。

console.log(a, b, c, d);                                             // 7 42 3 undefined