(二)6.解构赋值19-08-06

一数组解构赋值

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

打印结果：1 2

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

打印结果：1 2 (4) [3, 4, 5, 6]

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

打印结果：1 2 3

{
  let a,b,c,rest;
  [a,b,c]=[1,2]; //没有配对成功c值会显示undefined
  console.log(a,b,c);
}

打印结果：1 2 undefined

举例应用场景1 变量的交换

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

打印结果：2 1

举例应用场景2

{
  function f() {
    return [1,2];
  }
  let a,b;
  [a,b]=f();//使用es6解构赋值，不需要先找个地方存储1，2
  console.log(a,b);
}

打印结果：1 2

举例应用场景3 返回多个值时可以选择性的接收某几个变量

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

打印结果：1 4

举例应用场景4 第一个取出来其他的赋值为数组

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

打印结果：1 (4) [2, 3, 4, 5]

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

打印结果：1 (3) [3, 4, 5]

对象解构赋值

{
  let a,b;
  ({a,b}={a:1,b:2})
  console.log(a,b);
}

打印结果：1 2

{
  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

对象解构赋值实用场景1 特别实用需熟练

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

打印结果：abc test