JS利用解构赋值更新对象某些属性

引言

今天在看vue3+TS的后台管理项目时候，发现了一个有趣的东西，框架作者在vuex更新state中的一个对象的某些属性时候，用到了解构赋值，更新对象某些属性有很多种方法，但是这个比较新颖，和其他方法一起分享出来。

用处便是遇到很庞大的对象时候，复用大部分属性，只更新一小部分属性。

总结

老样子，先给总结。

• 解构赋值法（...）

//需要更新的源对象
let state={
    name:'genting',
    sex:'male',
    list:[1,2,3]
}

//进行了某些操作，比如接口获取了更新数据
//需要更新的数据
let obj2={
    name:'incubus',
    age:18,//新增的数据
    list:[4,5,6]||[]//覆盖或清空
}

//...state需要在最上面，否则不能覆盖/更新
let obj1={
    //源对象
    ...state,

    //更新的数据
    /* name:'incubus',
    age:18,//新增的数据
    list:[4,5,6]||[]//覆盖或清空 */

    //或者这样写法
    ...obj2
}

state=obj1

/* 结果
    state={
        name:'incubus',//更新了
        sex:'male',//复用
        age:18,//新增了
        list:[4,5,6]//更新了
    } 
*/

• 对象方法(Object.assign)

let state={
    name:'genting',
    sex:'male',
    list:[1,2,3]
}

//进行了某些操作，比如接口获取了更新数据
//需要更新的数据
let obj2={
    name:'incubus',
    age:18,
    list:[4,5,6]||[]//覆盖或清空
}

state=Object.assign(state,obj2)//注意顺序

/* 结果
state={
    name:'incubus',//更新了
    sex:'male',//复用
    age:18,//新增了
    list:[4,5,6]//更新了
} 
*/

此方法也可以用来组合新对象，拷贝对象

• 手动赋值......

好像vue2里的，如果需要响应式，就得手动$set(obj,key,value)了

有时候赋值对象没有的键名会报错。尽量避免这种操作。

注意点

原理都是用了后者覆盖前者。

但是解构赋值这个比较特殊，因为直接写是不能通过的。很有趣的写法，遇到可不要不认识了。

let obj={
    list:[],
    list:[4,5,6]||[]//报错
}