解构功能日常经常用到:
es5读取变量方式:
let option = {
name:'cc',
isCheck:false
};
let name=option.name;
let check=option.check;
es6解构函数方法:
let option = {
name:'cc',
isCheck:false
};
let {name,isCheck} = option;
解构函数的使用一定要先赋值初始化。不然会报错。
解构赋值:
同样也可以用解构函数对对象赋值:
let option = {
name:'cc',
isCheck:false,
},
name="22",
isCheck=true
;
//添加小括号让赋值语句转化为一个表达式语句
({name,isCheck}=option);
console.info(name);//cc
原对象里不存在的对象会是一个undefined
为非同名变量赋值:
注意: 须赋值变量 写在最后
let option = {
name:'cc',
isCheck:false
};
let {name:peopleName,
isCheck:peopleCheck} = option; //直
接前面对象语法就行 和 对象简写类似
也可以添加默认值:
let option = {
name:'cc'
}
;
let {name:peopleName,isCheck:peopleCheck= false} = option;
console.info(peopleName);
嵌套对象解构:
嵌套对象自然也可以这样 语法如下:
let option = {
writes:{
see:'see',
sing:'sing'
} ,
name:'cc'
};
let {writes:{see}} = option;
console.info(see);//see
console.info(writes);//error 若想取得write的值可以在 定义变量时再次书写 let {writes:{see},writes} = option;
数组解构:
对应顺序就行
let colors=['red','blue','green'];
let [one,two]=colors;
console.info(one,two);//red blue
也可以只要自己需要的值
let colors=['red','blue','green'];
let [ , , three]=colors;
console.info(three);//green
数组的结构 也是必须要初始化的操作
解构赋值 :
同样可以作用于上下文
且不用用()包裹
let colors=['red','blue','green'],
one,
two;
let [one,two]=colors;
console.info(one,two);//red blue
默认值:
不存在的默认 为undefined
有默认值的为默认值,语法如下
let node = {
type:'see',
name:'aaa'
};
let [type,name='cc',isCode=false] = node;
console.info(isCode);//false
解构赋值用于交换变量;
let a=1,b=2;
[a,b]=
[b,a]
;
默认值 与 对象语法相同
嵌套也一样
不定元素:
let colors=['red','blue','green'];
let [red,...otherColor] = colors;
console.info(otherColor);//[ 'blue', 'green' ]
克隆数组 :
es5:
let colors=['red','blue','green'];
let colors2=colors.concat();
console.info(colors2);//[ 'red', 'blue', 'green' ]
es6:
let colors=['red','blue','green'];
let colors2=colors.concat();
console.info(...colors2);//[ 'red', 'blue', 'green' ]
混合解构:
数组和对象的结构可以混合进行
解构参数:
可以这样传递形参
function (name,{
isCheck,
change
}){
};
解构的参数为必须参数 不传递会报错
同样 解构参数能设置默认值
同样 解构参数能设置默认值
function printTest(name,{
isCheck=false,
change
}){
console.info(arguments);//{ '0': 'aaa', '1': { change: 'ccc' } }
};
printTest('aaa',{change:'ccc'});