js对象的解构

admin

知识库

发布于：2023-08-08 22:09:47

对象的解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法：

1.赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

2.对象属性的值将被赋值给与属性名相同的变量

3.注意解构的变量名不要和外面的变量名冲突，否则报错

4.对象中找不到与变量名一至的属性时，变量值为undefined

解构语法

        const obj={
            uname:'程序员',
            age:18
        }
        const {uname,age} = {uname:'程序员',age:18}
        console.log(uname)//uname='程序员'
        console.log(age)//age=18

对象解构的变量名可以重新改名旧变量名:新变量名

        const {uname:username,age} = {uname:'程序员',age:18}
        console.log(username)//username='程序员'
        console.log(age)//age=18

解构数组对象

        const pig=[{
            uname:'佩奇',
            age:20
        }]
        const [{uname,age}]=pig
        console.log(uname)//uname='佩奇'
        console.log(age)//age=20

多级对象解构

        const pig={
            name:'佩奇',
            family:{
                mother:'猪妈妈',
                father:'猪爸爸',
                brother:'乔治'
            },
            age:16
        }
        const {name,family:{mother,father,brother}}=pig
        console.log(name)//name='佩奇'
        console.log(mother)//mother='猪妈妈'
        console.log(father)//father='猪爸爸'
        console.log(brother)//brother='乔治'