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}]