JS对象解构赋值

对象解构

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

• 例1

   const { name, age, height } = {   //解构的属性名和变量名要保持一致
        name: 'Jack',
        age: 18,
        height: 1.88
    }
    console.log(name)
    console.log(age)
    console.log(height)

打印结果

• 例2：对象解构的变量名可以重新改名，旧变量名：新变量名

const { name: username, age, height } = {
    name: 'Jack',
    age: 18,
    height: 1.88
}

console.log(username)
console.log(age)
console.log(height)

打印结果

• 例3：解构对象数组

   const pig = [
        {
            name: '佩奇',
            age: 18,
        }
    ]
    const [{ name, age }] = pig
    console.log(name)
    console.log(age)

打印结果

• 例4：多级解构对象

      const pig = {
            name: '佩奇',
            family: {
                mother: '猪妈妈',
                father: '猪爸爸',
                sister: "乔治"
            },
            age: 6
        }
        const { name, family: { mother, father, sister }, age } = pig

        console.log(name)
        console.log(mother)
        console.log(father)
        console.log(sister)
        console.log(age)

打印结果

• 例5：数组多级解构

const pig = [{
    name: '佩奇',
    family: {
        mother: '猪妈妈',
        father: '猪爸爸',
        sister: "乔治"
    },
    age: 6
}]
const [{ name, family: { mother, father, sister }, age }] = pig

console.log(name)
console.log(mother)
console.log(father)
console.log(sister)
console.log(age)

打印结果