ES6常用解构赋值有哪几种？

ES6常用解构赋值有哪几种？

a.数组的解构赋值

//数组解析赋值，模式匹配
{
    let [a, b, c] = [1, 2, 3];
    console.log("模式匹配");
    console.log(a);//1
    console.log(b);//2
    console.log(c);//3
}
//嵌套数组赋值
{
    let [a, [b, c]] = [1, [2, 3]];
    console.log("嵌套数组赋值");
    console.log(a);//1
    console.log(b);//2
    console.log(c);//3
}
//不完全解析
{
    let [a,b,c]=[1,2];
   console.log("不完全解析");
   console.log(a);//1
    console.log(b);//2
    console.log(c);//undefined
}
{
    let [a,[b],c]=[1,[1,2],3];
    console.log("不完全解析2");
   console.log(a);//1
    console.log(b);//1
    console.log(c);//3
}
//剩余运算符
{
    let [a,...b]=[1,2,3];
    console.log("剩余运算符");
    console.log(a);//1
    console.log(b);//[2,3]
}
//默认值解析
{
    let {a =10 ,b=5}={a:3}
    console.log("默认值解析");
    console.log(a);//3
    console.log(b);//5
}

b.对象的解构赋值

//解析嵌套对象
 {
   console.log("解析嵌套对象");
   let obj={
     p:["hello",{y:"world"}]
   }
   let {p:[x,{y}]}=obj;
   console.log(x);//hello
   console.log(y);//world
 }
 //可忽略
 {
   console.log("可忽略");
   let obj={p:["hello",{y:"word"},'ECMSScript']}
   let {p:[x,{y}]}=obj;
   console.log(x);//hello
   console.log(y);//word
 }
 //不完全解析
 {
   console.log("不完全解析");
   let obj={p:[{y:'world'},'hello']}
   let {p:[{y},x,z]}=obj;
   console.log(x);//world
   console.log(y);//hello
   console.log(z);//undefined
 }
    //剩余解析
 {
     let {x,y,...rest}={x:10,y:20,z:30,xx:11,yy:22,zz:33}
     console.log("剩余解析");
     console.log(x);//10
     console.log(y);//20
     console.log(rest);//{30,11,22,33}
 }
 //默认值解析
 {
     console.log("默认值解析");
     let{a=10,b=20}={a:100};
     console.log(a);//100
     console.log(b);//20

     let{c:cc=15,d:dd=30}={c:130}
     console.log(cc);//130
     console.log(dd);//30
 }

c.字符串的解构赋值

//字符串被转换成了一个类似数组的对象，将每个字符进行数组的解构赋值，类似数组的对象都有一个length属性

const [a, b, c] = 'yes';
console.log(a)  //y
console.log(b)  //e
console.log(c)  //s
let {length : len} = 'yes';  // len=3

d.数值和布尔值的解构赋值

//如果等号右边是数值和布尔值，会先转为对象

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

e.函数参数的解构赋值

  //参数解析
  console.log("参数解析");
  (function add([x,y]){
    console.log(x + y);
  })([1,2]); // 对于函数内部的代码来说，它们能感受到的参数就是x和y。

 //参数解析默认值
 //1.
function move({x = 0, y = 0} = {}) {
    console.log([x, y]);
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

2.
function move({x, y} = { x: 0, y: 0 }) {
    console.log([x, y]);
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]