js--对象赋值与合并（解构和复制assign）

前言

　　前端开发中经常会遇到给对象赋值的操作，比如在我们拿到后端的数据的时候，我们需要一一给我们页面绑定的对象进行赋值，又或者在点击重置按钮的时候，我们经常需要给查询的条件空间进行初始化赋值。本文来总结一下常见的对象赋值，合并的方法。

正文

　　1、手动给对象进行赋值

     // 模拟请求回来的接口
        const resData = {
            name: "张三",
            age: 18,
            sex: "男"
        }
        // 模拟页面绑定数据
        const data = {
            name: null,
            age: null,
            sex: null
        }
        data.name = resData.name
        data.age = resData.age
        data.sex = resData.sex
        console.log(data);// {name: "张三",age: 18,sex: "男"}

 　　上面这种方法最为简单，但是实际开发中当对象的属性特别多的时候，代码就会十分冗余，因此，ES6 中新增了扩展运算符和 Object.assign() 合并对象的方法。

　　2、扩展运算符实现合并

　　扩展运算符大家应该并不陌生，来看下面的代码：

    // 模拟请求回来的接口
        const resData = {
            name: "张三",
            age: 18,
            sex: "男"
        }
        // 模拟页面绑定数据
        const data = {
            name: null,
            age: null,
            sex: null
        }
        const newData = { ...data , ...resData}
        console.log(newData);// {name: "张三",age: 18,sex: "男"}

　　上面的代码确实能将请求回来的数据进行合并，但是缺点是每次合并都需要创建一个newData 变量，原来的 data 对象并没有发生变化。

　　3、Object,assign() 详解

　　官方文档介绍：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

　　使用语法：Object.assign(target，...sources)， 其中 target 为目标对象（即合并后生成对象），sources 为源对象（即被合并对象），返回值为目标对象

　　注意：如果目标对象中的属性和源对象中有相同的键，则源对象的值会覆盖目标对象的值。当源对象值为null 或者undefined 的时候，不会抛出错误。

　　使用代码如下：

    // 模拟请求回来的接口
        const resData = {
            name: "张三",
            age: 18,
            sex: "男"
        }
        // 模拟页面绑定数据
        const data = {
            name: null,
            age: null,
            sex: null
        }
        const returnValue = Object.assign(data,resData)
        console.log(returnValue);// {name: "张三",age: 18,sex: "男"}
        console.log(data);// {name: "张三",age: 18,sex: "男"}

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。