解构赋值(ES6学习笔记)

什么是解构赋值？

• 按照一定模式从数组和对象中提取值，然后对变量进行赋值。（模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值）
• 如果解构不成功，变量的值就为undefined。（赋值没有配对时，未配对的变量值为undefined，此时若有默认值则为默认值）

解构赋值的分类。

• 数组解构赋值 （按照对应顺序赋值）

  // 数组解构
  // 初始化
  {
      let [a,b,c] = [1,2,3]; //等价于let a=1,b=2,c=3
      console.log(a,b,c);  // 1 2 3
  }
  // 先定义后赋值
  {
      let a,b,c;
      [a,b,c]=[1,2,3]; 
      console.log(a,b,c);  //1 2 3
  }
  // '…'扩展运算符，以数组形式取剩余的数
  {
      let a,b,rest;
      [a,b,...rest]=[1,2,3,4,5];
      console.log(a,b,rest);   //1 2 [3,4,5]
  }
  // 适用于变量交换，更为方便，不需要中间值
  {
      let a=1,b=2;
      [a,b]=[b,a];
      console.log(a,b); //2 1
  }
  // 获取函数返回值更为方便
  {
      function f(){
          return [1,2];
      }
      let a,b,c;
      [a,b,c=99]=f();
      console.log(a,b,c);  //1 2 99
  }
  // 当函数返回了多个值，可以选择性的接收其中的值
  {
      function f(){
          return [1,2,3,4,5,6];
      }
      let a,b,c;
      [a,,,b,c]=f();  //每个逗号代表一个数，但是最后一个数的逗号可以省略不写
      console.log(a,b,c);  //1 4 5
  }
  // 函数返回第一个值，以数组形式存取剩余值
  {
      function f(){
          return [1,2,3,4,5,6];
      }
      let a,b,c;
      [a,,...c]=f();
      console.log(a,b,c);  //1 undefined [3,4,5,6]
  }
  // '…'扩展时后面没值就为空数组
  {
      let [foo,...z]=["a"];
      console.log(foo,z);   //a []
  }
  // 嵌套使用
  {
      let [a,[b],d]=[1,[2,3],4];
      console.log(a,b,d);   //1  2  4   
  }
  // 解构赋值表达式两边模板必须一致，不然会报错
  {
      let [f]=1;
      console.log(f);  //1 is not iterable,  
  }
  

• 对象解构赋值（赋值机制其实是，先找到同名的属性名，再把属性值赋值给同名属性名对应的变量，属性名和属性值变量相同的时候可以简写为一个）

  1、赋值没有固定顺序，但变量名必须与属性名同名才能取到对应的属性值。
  2、若变量名与属性名不一致时，必须明确其对应关系。

  // 对象解构
  // 初始化解构赋值，找到属性名相同的变量，然后对应赋值,若其变量为undefined或者默认值
  {
      let {a:a,b:c,c:b,d:d=10}={a:1,b:2};
      console.log(a,b,c,d);  // 1 undefined  2  10
  }
  // 属性名和变量名相同可以省略属性名不写
  {
      let o = {a:1,b:2};
      ({a,b:c,c:b,d=10} = o);  //不是初始化的对象解构赋值要加括号
      console.log(a,b,c,d);    //1 undefined 2 10
  }
  // 嵌套使用
  {
      let metaData={
          title:"abc",
          text:[{
              title:"text",
              desc:"descriptopn"
          }]
      }
      let a,b,desc;
      ({title:a,text:[{title:b,desc:desc}]}=metaData);
      console.log(a,b,desc);   //abc  text  description
  }
  

• 字符串解构赋值

  将字符串看作一个类似于数组的对象。

  // 字符串解构
  // 初始化解构赋值
  {
      let [a,b,c] = 'hello';
      console.log(a,b,c);  //h e l
  }
  // 先定义，后解构赋值
  {
      let a,b,c;
      [a,b,c] = 'hello';
      console.log(a,b,c);  //h e l
  }
  

  该类似数组的对象都有一个length属性，因此可以对这个属性进行解构。

  //对字符串的属性进行解构
  {
      let len;
      ({length:len} = 'hello');
      console.log(len);  //5
  }
  

  该类似数组的对象都有一些方法，也就是函数，它们也可以进行解构。结果为一个函数。

  // 对字符串的方法进行解构
  {
      let upper;
      ({toUpperCase:upper} = 'hello');
      console.log(upper);    //ƒ toUpperCase()
      console.log(upper.call('hello'));    //HELLo
      console.log(upper.call('a1213Bas'));    //A1213BAS 得到的函数可以转换其他字符串
  }
  

• 布尔值解构赋值

• 函数参数解构赋值

  1、函数调用时，会将实参传递给形参，其过程就是实参赋值给形参。因此，也可以使用解构赋值。
  2、其规则与数组、对象的解构赋值一致，关键看参数是采用哪种解构赋值方式。

  // 函数解构赋值
  // 参数为数组
  {
      function add([x,y=10]){
          return x+y;
      }
      let r = add([1]);
      console.log(r);   //11
  }
  // 参数为对象
  {
      function add({x:x,y:y=10}){
          return x+y;
      }
      let r = add({x:20});
      console.log(r);   //30
  }
  

• 数值解构赋值

解构赋值的便利和应用场景

• 变量赋值
• 变量交换
• 获取函数返回值
• 获取数组中需要的值

解构的用途

• 交换变量
• 从函数返回多个值
• 函数参数的定义
• 提取JSON数据