一:为什么用解构:
在之前提取数据对象需要逐个赋值,可能会为了一个小数据挖掘整个机构,ES6给数组和对象添加了解构可以方便提取数据。
二:对象解构:
1:
let node = {
type:"node",
name:"haha",
}
let {type,name} = node;
console.log(type)//"node"
console.log(name)//"haha"
注意:当解构赋值表达式的右侧(等号右边)的计算结果为null或者undefined时,会报出异常。因为任何读取nul或者undefined的斗湖导致运行时错误。
2:默认值
let {type,name,value} = node;
console.log(type) //"node"
console.log(name) //"haha"
console.log(value) //undefined
let {type,name,value="vvvv"} = node;
console.log(value) //"vvvv"
3:赋值给不同的本地变量名
let node = {
type:"node",
name:"haha",
}
let {type:localtype,name:localname="wuyunqiang"} = node;
console.log(localtype); //"node"
console.log(localname); //"haha"
4:嵌套的推向解构
let node = {
type:"id",
name:"haha",
loc:{
start:{
line:1,
column:1
},
end:{
line:1,
column:4
},
}
}
let {loc:{start}} = node;
console.log(start.line)
console.log(start.column)
三:数组解构:
数组解构和对象解构比较相似,对象是根据key来检索取值,数组是根据位置来检索取值。
1:根据位置索引赋值
let colors = ["red","green","blue"];
let [ , second] = colors;
console.log(second)//"green"
2:用于值交换
ES6 之前
let a = 1 ;
let b = 2;
let tmp;
tmp =a; a= b;b= tmp;
console.log(a)//2
console.log(b)//1
ES6之后
let a = 1; let b = 2;
[a,b] = [b,a];
console.log(a)//2
console.log(b)//1
3:默认值嵌套索引类似于对象
4:剩余项
let colors = ["red","green","blue"];
let [first ,...rest] = colors;
console.log(first); // "red"
console.log(rest.length) // 2
console.log(rest[0]) //"green"
四:混合解构:
对象与数组解构能被用到一起。
let node = {
type:"id",
name:"haha",
loc:{
start:{
line:1,
column:1
},
end:{
line:1,
column:4
},
}
range:[0,3]
}
let {loc :{start},range:[startindex]}=node;
console.log(start.line); // 1
console.log(startindex) // 0
混合使用对象与数组解构,node的任何部分都能提取出来。对于从JSON配置结构中抽取数据来说,这种方法尤为有用,因为他不需要探索整个结构。
五:参数解构:
参数结构提供了更清晰地标明函数期望输入的替代方案。它使用对象或数组的模式替代了具名参数。
function setCookie(name,value,{secure,path,domain,expires}){//设置cookie的代码}
setCookie("type","xxx",{secure:true,expires:20000})
注意:
1:结构的参数是必须的,否则会报错
2:参数结构也可以设置默认值
function setCookie(name,value,{
secure=true,
path="xxxx",
domain="xxxx",
expires=20000
}={}){//设置cookie的代码}
setCookie("type","xxx",{secure:true,expires:20000})