ES6 解构赋值详解：对象解构赋值、数组解构赋值

迈不过友情╰ 2021-12-05 15:09 449阅读 0赞

所谓的解构赋值就是：按照一定模式，从数组和对象中提取值，对变量进行赋值（先解析结构再进行赋值）。

##### 对象的解构赋值 #####

对象是通过属性名进行解构（是用的最多的解构赋值）

*  基本使用
    
        // 创建一个对象
        let obj = { username: '妲己', age: 18, gender: 'girl'}
        // 进行解构赋值
        let { age, username, gender} = obj
        // 通过解构赋值后左侧表达式中的变量已经申明可以直接使用
        username = username +','+ age
        console.log(username) // 输出结果：妲己,18
 *  属性名必须相同
    
    等号左侧中的名称必须是右侧对象中已有的属性名
    
        let obj = { username: '妲己', age: 18, gender: 'girl'}
        // obj 中没有 hobby 属性；相当于只声明了变量，没有进行赋值
        let { gender, hobby, username} = obj
        console.log(hobby)
    
    执行结果：
    
        undefined
 *  等号两侧的类型必须保持一致
    
        let obj = { username: '妲己', age: 18, gender: 'girl'}
        // 等号左侧为 “数组” 右侧是 “对象”
        let [gender, username, age] = obj
        console.log(username)
    
    执行结果：
    
        # 报错
        Uncaught TypeError: obj is not iterable
 *  灵活使用
    
    需要哪个属性值就结构赋值哪个属性，等号左侧名称的个数与右侧对象中的属性个数可以不一致。
    
        let obj = { username: '妲己', age: 18, gender: 'girl'}
        // 只获取对象中的 age 
        let { age} = obj
        console.log(age) // 执行结果：18
    
    作为参数使用
    
        let obj = { username: '妲己', age: 18, gender: 'girl'}
        
        function fun({ username, age} = obj) { 
            console.log(username, age)
        }
        
        fun()
    
    执行结果：
    
        妲己 18

##### 数组的解构赋值 #####

通过数组下标进行解构赋值

*  基本使用
    
        let arr = ["潘金莲", 26, "Sexy married women"]
        let [name, age, MaritalStatus] = arr
        console.log(MaritalStatus)
    
    输出结果：
    
        Sexy married women
 *  等号左右两侧的结构必须保持一致
    
        let arr = ["潘金莲", 26, ["Sexy married women", "萧、古筝、琵琶"]]
        let [name, age, MaritalStatus] = arr
        console.log(name, age, MaritalStatus)
    
    执行结果：
    
        # 变量 MatitalStatus 拿到的是一个数组，获取其中的值还需要下标索引
        潘金莲 26 ["Sexy married women", "萧、古筝、琵琶"]数
 *  被解构的数组为空时，可以给等号左侧中的变量初始化一个默认值
    
        let arr = []
        let [name = "貂蝉", age = 16, gender = "女"] = arr
        console.log(name, age, gender)
    
    执行结果：
    
        貂蝉 16 女
 *  灵活使用
    
    获取数组指定下标的值，通过 “,” ；一个 “,” 占一个下标
    
        let arr = ["潘金莲", 26, "Sexy married women", "萧、古筝、琵琶"]
        // 获取 arr 下标为 2 的值
        let [,,MatitalStatus] = arr
        // 输出结果
        console.log(MatitalStatus)
    
    执行结果：
    
        Sexy married women