我正在参加「掘金·启航计划」

前言

上一篇我们有提到过解构，后来在一看当时就只说了一个变量互换值的 小案例，这次先以解构为出发点，把他讲透

解构

之所以推荐写解构的写法，因为解构之后会节省代码 而且效率高，因为不用重复写对象名，还有就是解构之后也可以赋值一个新的变量名(重命名字段)，也可以设置默认值,而且还有那么一丢小炫酷的感觉。请看代码

const userInfo = {
    name:'小明',
    age:18
}

// 基本使用
const {name,age} = userInfo
console.log(name,age) // 这里输出的是 小明,18

// 设置默认值 注意：如果不赋值默认值，那么下面 sex 打印的会是 undefined
const {age,sex = '男'} = userInfo
console.log(age,sex) // 这里输出的是 18,男 


// 重命名  这里不要看上面了，我们下面重新写一段
const classInfo = {
    classid : 888,
    className : '一年级一班',
    gradeid: 678,
    classroomid : 999
}
let classid = 555
// 这里函数的情况就比如 UI 框架里面抛出来的事件并携带参数，这种情况蛮多的
function onSelectClassChange(classInfo){
    // 未解构写法
    classid = classInfo.classid
    console.log(classid,classInfo.className,classInfo.gradeid) // 这里输出的是 888,一年级一班
    
    // 通过解构并且重命名去写
    const { classid : newClassid ,className,gradeid} = classInfo
    classid = newClassid
    console.log(classid,className,gradeid) // 这里输出的是 888,一年级一班,678
}

onSelectClassChange(classInfo)

// 还有常用的解构赋值 如
const style = {
    color : 'red',
    fontSize :12
}

let color = 'yellow'
let fontSize = 16
([color,fontSize] = style)
console.log(color,fontSize) // 这里输出的是 ref,12

// 还有一种玩法就是多重解构，比如有时候后端接口返回这样的数据格式
const res = {
    data:{
        total:0,
        list:[.......]
    }
}

// 我们要拿到里面的 total 还有 list 可以这样写
const {data:{toatl,list}} = res
console.log(total,list) // 这里输出的是 0,[.......]

最后

以上就是我对于解构的全部了解，有不足的地方大家多多提在评论区，但是上面解构大家别太死板，比如 解构的同时，即可赋值，也可以设置默认值，还可以多层解构对吧，灵活运用，如果对你有帮助的话，麻烦点个赞哈，谢谢支持~