对象的解构赋值中,与顺序无关,需要注意的是,变量名与属性名必须一致
const {name} = obj;这一步是数据解构赋值,相当于声明了保存在obj中的name属性值,意思是可以通过obj访问到name属性,因此还可以打印到name。
对象与数组不同,对象是无序的。所以它是通过属性名来标志的,不需要逗号分开:
用const进行对象的解构赋值时,遇到同名的键值对可以这样重新命名:
{skillName:sklName},意思是取该对象的skillName的属性并赋值给sklName
1、对象的解构赋值
//对象的解构赋值 const obj = { saber :'阿尔托利亚', archer:'卫宫' }; const {saber, archer1 } = obj;
2、稍微复杂的解构条件
//稍微复杂的解构条件 const player = { nickname:'感情的戏我没演技', master:'东海龙王', skill: [{ skillName:'龙吟', mp:'100', time:6000 },{ skillName:'龙卷雨击', mp:'400', time:3000 },{ skillName:'龙腾', mp:'900', time:60000 }] }; const { nickname } = player; //梦幻西游 const { master } = player; //东海龙王 const { skill:[ skill1, { skillName }, { skillName : sklName} ] } = player; const { skill } = player;//得到数组龙吟龙腾龙卷
const [ skill1 ] = skill;//得到数组第一项龙吟
3、结合扩展运算符,
通过扩展运算符“...”来获取obj中的属性和属性值是可以的:扩展运算符有一个作用就是取出参数对象中的所有可遍历属性,拷贝到当前对象之中,就是通过“...”可以拿到obj中的键值对拷贝到a上。
//结合扩展运算符 const obj = { saber:'阿尔托利亚', archer:'卫宫', lancer:'瑟坦达' }; const { saber, ...oth } = obj; 对象的合并 const obj1 = { archer:'卫宫', lancer:'瑟坦达' } const obj = { saber:'阿尔托利亚', ...obj1 }
//oth得到后两项组合的一个对象(即剩下的所有没有匹配到的内容)
4、如何对已经申明的变量进行解构赋值(不建议这种写法)
//如何对已经申明来的变量进行解构赋值(不建议这种写法) let age; const obj = { name:'小明', age:22 }; ( { age } = obj ); //
//得到age的值22
5、默认值(在对象传入乱序的排序参数时会经常使用)
//默认值 let girlfriend = { name:'小红', age:22, }; let { name, age = 24, hobby = ['学习']} = girlfriend
6、提取对象属性
//提取对象属性 const { name, hobby: [ hobby1 ] , hobby } = { name: '小红', hobby: ['学习'] };
6、使用对象传入乱序的函数参数
//使用对象传入乱序的函数参数 function AJAX({ url, data, type = 'get' }){ console.log(type); }; AJAX({ data:{ a:1 }, url:'/getinfo', });
7、获取多个函数的返回值
//获取多个 函数返回值 function getUserInfo(uid){ //..AJAX return{ status:true, data:{ name:'小红' }, msg:'请求成功' }; }; const{ status, data, msg:message } = getUserInfo(123);