解构

解构可以理解成一种函数赋值方式

   var foo = { bar: 'pony', baz: 3 }
    var { bar, baz } = foo
    console.log(bar) //pony
        // <- 'pony'
    console.log(baz) = 3

可以对象解构也可以数组解构

对象解构

1. 可以使用计算后的对象名

es5

var key = 'such_dynamic'
var baz = { such_dynamic: 'bar' }
var foo = baz[key]
console.log(foo)

es6

var key = 'such_dynamic'
var { [key]: foo } = { such_dynamic: 'bar' }
console.log(foo)
// <- 'bar'

1. 解构可以指定默认值

var {foo=3} = { foo: 2 }
console.log(foo)
// <- 2
var {foo=3} = { foo: undefined }
console.log(foo)
// <- 3
var {foo=3} = { bar: 2 }
console.log(foo)
// <- 3

1. 解构也可以在数组中使用

var [a] = [10]
console.log(a)
// <- 10

解构的用法

应用场景一：交换两个函数的变量

解构还有一个超酷特性，当你交换两个变量的值时不再需要使用臭名昭著的aux变量了。

function es5 () {
  var left = 10
  var right = 20
  var aux
  if (right > left) {
    aux = right
    right = left
    left = aux
  }
}
function es6 () {
  var left = 10
  var right = 20
  if (right > left) {
    [left, right] = [right, left]
  }
}