文章目录
在 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