深入理解ES6之数据解构的用法
一对象解构
对象解构语法在赋值语句的左侧使用了对象字面量
letnode={
type:true,
name:false
}
//既声明又赋值
let{
type,
name
}=node;
//或者先声明再赋值
lettype,name
({type,name}=node);
console.log(type);//true
console.log(name);//false
type与name标识符既声明了本地变量，也读取了对象的相应属性值。
解构赋值表达式的值为表达式右侧的值。当解构表达式的右侧的计算结果为null或者undefined时，会抛出错误。
默认值
当你使用解构赋值语句时，如果所指定的本地变量在对象中没有找到同名属性，那么该变量会被赋值为undefined
letnode={
type:true,
name:false
},
type,name,value;
({type,value,name}=node);
console.log(type);//true
console.log(name);//false
console.log(value);//undefined
你可以选择性地定义一个默认值，以便在指定属性不存在时使用该值。
letnode={
type:true,
name:false
},
type,name,value;
({
type,
value=true,
name
}=node);
console.log(type);//true
console.log(name);//false
console.log(value);//true
赋值给不同的本地变量名
letnode={
type:true,
name:false,
value:"dd"
}
let{
type:localType,
name:localName,
value:localValue="cc"
}=node;
console.log(localType);
console.log(localName);
console.log(localValue);
type:localType这种语法表示要读取名为type的属性，并把它的值存储在变量localType上。该语法与传统对象字面量的语法相反
嵌套的对象结构
letnode={
type:"Identifier",
name:"foo",
loc:{
start:{
line:1,
column:1
},
end:{
line:1,
column:4
}
}
}
let{
loc:localL,
loc:{
start:localS,
end:localE
}
}=node;
console.log(localL);//start:{line:1,column:1},end:{line:1,column:4}
console.log(localS);//{line:1,column:1}
console.log(localE);//{line:1,column:4}
当冒号右侧存在花括号时，表示目标被嵌套在对象的更深一层中（loc:{start:localS,end:localE}）
二数据解构
数组解构的语法看起来跟对象解构非常相似，只是将对象字面量换成了数组字面量。
letcolors=["red","blue","green"]; let[firstC,secondC,thirdC,thursC="yellow"]=colors; console.log(firstC//red console.log(secondC);//blue console.log(thirdC);//green console.log(thursC);//yellow
你也可以在解构模式中忽略一些项，并只给感兴趣的项提供变量名。
letcolors=["red","green","blue"]; let[,,thirdC]=colors; console.log(thirdC);//blue
thirdC之前的逗号是为数组前面的项提供的占位符。使用这种方法，你就可以轻易从数组任意位置取出值，而无需给其他项提供名称。
解构赋值
letcolors=["red","green","blue"], firstColor="black", secondColor="purple"; [firstColor,secondColor]=colors; console.log(firstColor);//red console.log(secondColor);//green
数组解构有一个非常独特的用例，能轻易的互换两个变量的值。
leta=1,b=2; [a,b]=[b,a]; console.log(a);//2 console.log(b);//1
嵌套的解构
letcolors=["red",["green","blue"],"yellow"]; let[firstC,[,ssc]]=colors; console.log(ssc);//blue
剩余项
letcolors=["red","green","blue"]; let[firstC,...restC]=colors; console.log(firstC); console.log(...restC); console.log(restC[0]);//green console.log(restC[1]);//blue
使用剩余项可以进行数组克隆
letcolors=["red","green","blue"]; let[...restC]=colors; console.log(restC);//["red","green","blue"]
三混合解构
letnode={
type:"Identifier",
name:'foo',
loc:{
start:{
line:1,
column:1
},
end:{
line:1,
column:4
}
},
range:[0,3]
}
let{
type,
name:localName,
loc:{
start:{
line:ll
},
end:{
column:col
}
},
range:[,second]
}=node;
console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。