js 对象解构

在 js 中，如果我们需要把一个对象里面的属性提取出来放到自定义的变量上，在不使用对象解构的情况下可能会写出这样的代码：

// 示例对象
let person = {
   
  name: "ec50n9",
  age: 19,
  job: "student"
};

// 挨个赋值
let personName = person.name,
    personAge = person.age,
    personJob = person.job;

这样写是没什么问题的，但是对比使用对象解构的写法，上面这种写法就略显复杂了

对象解构的基本用法

来看看使用了对象解构的写法：

// 上面的赋值代码变成了这样👇
let {
    name: personName, age: personAge, job: personJob } = person;

console.log(personName);  // "ec50n9"
console.log(personAge);   // 19

可以看到在对象解构的写法中，等号左边的写法就类似于一个对象，只不过属性名对应的不是值，而是将要赋值的变量名，下面这代码可能更直观些：

// 左边是解构，右边是对象
let {
    name: personName, age: personAge } = {
    name: "ec50n9", age: 19 };

我觉得可以把左边的对象解构语句理解成是一个填空的模板，js 只是在帮我们做填空题，这样一来，👇下面的这些对象解构的特性就好理解些了。

忽略部分属性

如果只想赋值 personName 和 personAge 变量的话，不写 job 就可以了：

let {
    name: personName, age: personAge } = person;

简写语法

如果想让变量直接使用属性的名称，可以使用简写语法⬇️

let {
    name, age } = person;
console.log(name); // "ec50n9"
console.log(age);  // 19 

定义默认值

有时候，可能被解构的对象中没有被引用的属性，可以通过下面这种方法来定义默认值，也就是如果对象中没有对应属性，就使用默认值：

let {
    name