使用结构可以轻松使用模板从对象或数组中提取数据。例如,需要将一个对象上的两个属性分别赋值给两个变量。
对象解构
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。在本例中,剩余的元素与剩余操作用法一致。(...操作符)。