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'
})

参数解构拥有以上其它解构方式的全部能力。你能够在其中使用默认参数、混合解构、或使用与属性不一样的其余变量名。