ES6-解构

对象和数组是js中常用的数据解构，由于JSON的普及，二者已经成为语言中特别重要的一个部分。ES6中添加了可以简化解析这种解构的新特性：解构。解构是一种打破数据结构，将其拆分成更小部分的过程。

在早期版本中，开发者为了从对象和数组中获取特定数据并赋值给变量，就像这样：

var  = {
    name: 'tom',
    type: '1'
}
var name = node.name,    //tom
    type = node.type;    //1

对象解构

对象解构的语法是在赋值的左边放置一个对象，例：

let node = {
    name:'tom',
    type: '1'
}

let {name, type} = node;

console.log(name, type)    //tom, 1

默认值

使用解构表达式时，如果指定的局部变量在对象中不存在，那么这个局部变量会被赋值为undefined，例：

let node = {
    name:'tom',
    type: '1'
}

let {name, type， value} = node;

console.log(name, type, value)    //tom, 1, undefined

这段代码额外定义了一个局部变量value， 然后尝试为它赋值，然而在node对象上，并没有对应名称的属性值，所以像预期中那样赋值为undefined.

当指定的属性不存在时，可以定义一个默认值，在属性名称后面添加默认值即可， 例：

let node = {
    name:'tom',
    type: '1'
}

let {name, type， value='true'} = node;

console.log(name, type, value)    //tom, 1, true

为变量value设置了默认值true，只有当node上没有该属性或者该属性当值为undefined时才会生效。

为非同名变量赋值

若你想使用不同的变量赋值，例：

let node = {
    name:'tom',
    type: '1'
}

let {name, type:nameType， value='true'} = node;

console.log(name, nameType, value)    //tom, 1, true

在上面的代码中，名称被放置在右边，需要进行值读取的位置被放在左边。

嵌套对象的解构

对于深层次的解构，可以深入到嵌套对象的结构中去提取你想要的数据，例：

let node = {
    name:'tom',
    type: '1',
    meat:{
        start:{
            date: '1980-01-23',
            time: '10:00'
        },
        end:{
            date: '1980-01-23',
            time: '11:00'
        }
    }
}

let {meat:{start}} = node;

console.log(start.time, start.date)    //11:00, 1980-01-23

还能更近一步，在对象的嵌套解构中为本地变量使用不同的名称，和为非同名变量赋值语法相同。

数组解构

数组解构和对象解构非常相似，只是将对象替换成数组。数组解构时，解构作用在数组内部的位置上，而不是作用在对象的具体的属性名称上，例：

let colors = ['red', 'green', 'blue'];
let [firstColor, secondColor] = colors;
console.log(firstColor, secondColor)    //red, green

其他的基本一样不在一一列出。

混合解构

对象和数组解构能被用在一起，以创建更复杂的解构表达式。在对象和数组混合解构中这么做能更准确的提取出你想要的数据片段。例：

let node = {
    name:'tom',
    type: '1',
    meat:{
        start:{
            date: '1980-01-23',
            time: '10:00'
        },
        end:{
            date: '1980-01-23',
            time: '11:00'
        }
    },
    colors: ['red', 'green', 'blue']
}

let {
    meat:{start},
    colors: [firstColor]
    } = node;

console.log(start.date, firstColor)    //1980-01-23, red
    

这种解构对从JOSN配置中抽取数据来说尤为有用。因为它不需要在探索整个结构。

参数解构

解构还有一个特别有用的场景， 即在传递函数参数时。 当一个js函数接收大量可选参数时，常用的模式是创建一个options对象，其中包含了附加的参数，就像这样：

function foo(options) {
   var options = options || {}
   var name = options.name,
       tiem = options.time;
   
   //...其他代码
}

foo({
    name: 'tom',
    tiem: '10:00'
})

参数的解构提供了更清楚的地标标明了函数期望输入的方案。它使用对象或数组解构的模式替代了具体的参数名称。下面重写了foo()函数：

function foo({name, time} = {}) {
   //...其他代码
}

foo({
    name: 'tom',
    tiem: '10:00'
})

参数解构拥有以上其它解构方式的所有能力。你可以在其中使用默认参数、混合解构、或使用与属性不同的其他变量名。