使用解构从对象中取值
对象解构最基本的用法是从对象中获取属性的值,解构时没有的属性返回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!!!