JavaScript对象解构

使用解构从对象中取值

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