JavaScript中的解構賦值

JavaScript是一種頗有趣的語言，我我的很喜歡它，雖然仍還有些人不大喜歡它。在ECMAScript6（ES6）中，有許多有用的特性來使JavaScript開發更有趣。在本文中，我未來探討一些關於解構賦值的內容，並提供一些可能有用的實際例子。

MDN是這樣描述解構賦值的：

解構賦值語法是一種 JavaScript表達式 用來將 數組中的值或對象中的 屬性 取出來區分爲不一樣變量。

對象的解構賦值

假設你有一個對象用來表示3維空間中的一個點：

let myPointInSpace = {
    x: 3,
    y: -2,
    z: 2.7
}

假設你要用這些座標作一些 計算，你會將這些座標取出並賦值給變量 以便 後續使用

//sqrt() 平方根
let distance = Math.sqrt(x*x + y*y + z*z);

這樣確實能夠生效。可是若是你作了足夠屢次，你可能已經很厭煩這樣的複製粘貼了。使用解構賦值，你能更簡單的採集到這些座標：

let {x,y,z} = myPointInSpace;
let distance1 = Math.sqrt(x*x + y*y + z*z);

這裏的大括號指明瞭解構賦值。上面代碼中的第一行查看了myPointInSpace變量，並從中查找大括號內指明的任何屬性，最後返回他們並賦值爲獨立的變量。

若是你只須要x和y座標，你也能夠這樣作：

let {x,y} = myPointInSpace;

數組的解構賦值

解構賦值能很好的運用在對象中，但它一樣也能很好的做用於數組中。如今讓咱們將座標點放進一個數組中：

var myPointInSpaces= [{x:12,y:33,z:44},{x:12,y:22,z:32}];

如今要對這些點進行處理，傳統能夠想到的方法是這樣的

var myPointInSpaces= [{x:11,y:21,z:31},{x:12,y:22,z:32}];
let newPointInSpaces = myPointInSpaces.map(function(value,index,array){
    console.log(value.x);//11 12
    console.log(value.y);//21 22
    console.log(value.z);//31 33
    return {
        x:value.x + 1,
        y:value.y + 1,
        z:value.z + 1
    }
})
console.log(newPointInSpaces);// [{x:12,y:22,z:32},{x:13,y:23,z:33}]

藉助解構賦值，能變得這樣簡潔：

var myPointInSpaces= [{x:11,y:21,z:31},{x:12,y:22,z:32}];
let newPointInSpaces = myPointInSpaces.map(function({x,y,z},index,array){
    console.log(x);//11 12
    console.log(y);//21 22
    console.log(z);//31 33
    return {
        x:x + 1,
        y:y + 1,
        z:z + 1
    }
})
console.log(newPointInSpaces);// [{x:12,y:22,z:32},{x:13,y:23,z:33}]

使用箭頭函數更簡潔

var myPointInSpaces= [{x:11,y:21,z:31},{x:12,y:22,z:32}];
let newPointInSpaces = myPointInSpaces.map(({x,y,z})=>({
    x:x+1,
    y:y+1,
    z:z+1
}))
console.log(newPointInSpaces);// [{x:12,y:22,z:32},{x:13,y:23,z:33}]