5.解构

---

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

   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'

2. 解构可以指定默认值

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

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

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

//解构赋值
//数组解构
{
  let a, b, rest;
  [a, b] = [1, 2];
  console.log(a, b);
}

{
  let a, b, rest;
  [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
  console.log(a, b, rest);
}

//对象解构
{
  let a, b;
  ({
    a,
    b
  } = {
    a: 1,
    b: 2
  })
  console.log(a, b);
}

//默认值
{
  let a, b, c, rest;
  [a, b, c = 3] = [1, 2]; // 1 2 3
  [a, b, c] = [1, 2]; // 1 2 undefind
  console.log(a, b, c);
}

//变量交换
{
  let a = 1;
  let b = 2;
  [a, b] = [b, a];
  console.log(a, b);
}

{
  function f() {
    return [1, 2]
  }
  let a, b;
  [a, b] = f();
  console.log(a, b);
}

{
  function f() {
    return [1, 2, 3, 4, 5]
  }
  let a, b, c;
  [a, , , b] = f(); //选择性接收变量
  console.log(a, b); //1 4
}

{
  function f() {
    return [1, 2, 3, 4, 5]
  }
  let a, b, c;
  [a, ...b] = f(); // 1 [2,3,4,5]
  [a, , ...b] = f(); // 1 [3,4,5]
  console.log(a, b);
}

{
  let o = {
    p: 42,
    q: true
  };
  let {
    p,
    q
  } = o;
  console.log(p, q); // 42 true
}

{
  let {
    a = 10, b = 5
  } = {
    a: 3
  };
  console.log(a, b); // 3 5
}

//json 处理
{
  let metaData = {
    title: 'abc',
    test: [{
      title: 'test',
      desc: 'description'
    }]
  }
  let {
    title: esTitle,
    test: [{
      title: cnTitle
    }]
  } = metaData;
  console.log(esTitle, cnTitle);
}