使用解构从对象中取值

对象解构最基本的用法是从对象中获取属性的值,解构时没有的属性返回Undefined

const obj = {id: 1,name: '小明',age:  18,
}

const { id, name } = obj;

使用解构从嵌套对象中获取值

onst obj = {id: 1,name: '小明',dept: {id: 'D001',name: '小红',address: {gender: '女',city: '海南'  }}  
}

const { dept: { address: { city } } } = obj;
console.log(city); // 海南

使用对象解构定义一个新变量

假设我们正在尝试获取gender属性的值（对象没有gender属性）

const obj = {id: 1,name: '小明',age:  18,
}

 使用解构，我们可以这样做：

const { name, gender = '男' } = obj;
console.log(gender); // 男

 除了直接解构属性，给属性设置默认值外，我们还可以有更复杂的应用

const {name, id, message = `${name} is ${id}`} = obj;
console.log(message); // 小明 is 1

如何使用JavaScript对象解构别名？

 对象解构时，可以既起别名，也可以指定默认值

const obj = {name: "小明",age: 18,gender: "男",
};

let { name: a, age: b = "29", gender: c, address = "海南" } = obj;
console.log(a, b, c, address); //小明 18 男 海南

给事先声明的变量解构

注意：当先声明再解构时会报错，因为会将{  }认为是一个代码块，而对代码块赋值则是错误的，解决方法为整体套一个括号（ ）

const obj = {name: "小明",age: 18,gender: "男",
};

let name, age, gender;
({ name, age, gender } = obj); //整体加括号，不然会报错
console.log(name, age, gender); //小明 18 男

在函数参数和返回值中解构对象

我们可以使用对象解构将属性值作为参数传递给函数

const obj = {name: "小明",age: 18,gender: "男",
};

 创建一个简单的函数，该函数使用name和gender属性值组成一条消息并输出到浏览器控制台。

function logObj({ name, gender }) {console.log(`${name} is ${gender}`);
}

 调用该函数：

logObj(obj); // 小明 is 男

 对象解构函数还有另一种用法。如果函数返回一个对象，我们可以将值直接解构为变量

function getUser() {return {name: "小明",age: 18,gender: "男",};
}

const { age } = getUser();
console.log(age); // 18

在循环中使用对象解构

const obj = [{name: "小明",age: 18,gender: "男",},{name: "小红",age: 33,gender: "女",},{name: "小黄",gender: "男",age: 16,},
];

我们可以使用for-of循环遍历obj对象，然后使用对象解构赋值语法来获取详细信息

for (let { name, age } of obj) {console.log(`${name} is ${age} years log!!!`);
}

 输出结果是：

小明 is 18 years log!!!
小红 is 33 years log!!!
小黄 is 16 years log!!!