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。在本例中，剩余的元素与剩余操作用法一致。（...操作符）。

标签：ES6,console,log,weapon,附加,解构,ninja,const,name
来源： https://www.cnblogs.com/jamal/p/14009754.html