ES6附加特性_解构

使用结构可以轻松使用模板从对象或数组中提取数据。例如,需要将一个对象上的两个属性分别赋值给两个变量。

对象解构

     const ninja = {name:"Yoshi",action:"skulk",weapon:"shuriken"}

      //旧有的方式:将一个对象上的每个属性分别显式复制给对应的变量。
      const nameOld = ninja.name;
      const actionOld = ninja.action;
      const weaponOld = ninja.weapon;


      

      //对象结构:我可以一次性将每个属性都复制给同名的变量。
      const {name,action,weapon} = ninja;
      console.log(name==='Yoshi');
      console.log(action==='skulk');
      console.log(weapon==='shuriken');


      //如果需要的话,我们可以显示指定要赋值的变量。
      const {name:myName,action:myAction,weapon:myWeapon} = ninja;
      console.log(myName==='Yoshi');
      console.log(myAction==='skulk');
      console.log(myWeapon==='shuriken');



如上面例子所示,使用对象的解构,我们可以很容易的从一个对象字符量中提取多个变量。
const {name,action,weapon} = ninja;
这句代码将创建3个新的变量(分别是name,weapon,和weapon),他们的值分别是右边对象ninja对应的3个属性(分别是ninja.name,ninja.action,ninja.weapon)。

若不想使用对象属性的名称,可以调整为以下语句:

      const [name:myName,action:myAction,weapon:myWeapon] = ninja;

数组结构

      const ninjas = ["Yoshi","Kuma","Hattori"]
      
      //数组元素的值按照顺序赋值给指定的变量。
      const [firstNinja,secondNinja,thirdNinja] = ninjas;

      console.log(firstNinja==="Yoshi");
      console.log(firstNinja==="Kuma");
      console.log(thirdNinja==="Hattori");   


      const[,,third] = ninjas;
      // 我们可以跳过特定的数组项。
      console.log(third==="Hattori");   


      //我们可以捕获要追踪的项。
      const [first,...remaining] = ninjas;
      console.log(first==="Yoshi");
      console.log(remaining.length===2);
      console.log(remaining[0] ==="Kuma");
      console.log(remaining[1]==="Hattori");
      
      
      

字符串结构与对象的结构稍微有点不太一样,主要是语法上的区别。字符串的结构使用中括号(对象的结构使用花括号),如以下代码:

const [firstNinja,secondNinja,thirdNinja] = ninjas;

此时,Yoshi赋值给变量firstNinja,Kuma赋值给变量secondNinja,Hattori赋值给变量thirdNinja。数组结构还有一些高级用法,例如想跳过指定几个元素,可以省略变量名保留逗号,如

const [,,third] = ninjas;

在这种情况下,将两个值将被忽略,而第三个值Hattori,将赋值给第三个变量。此外我们还可以提取某些元素,将剩余的元素赋值给新的数组。

const [first,...remaining] = ninjas;

第一个元素Yoshi,赋值给第一个变量first,剩余的Kuma和Hattori赋值给新的数组remaining。在本例中,剩余的元素与剩余操作用法一致。(...操作符)。

原文地址:https://www.cnblogs.com/jamal/p/14009754.html