js 对象的深拷贝、合并、清空属性值(自己封装，递归清除对象属性值。)

快来打我* 2023-02-26 13:26 53阅读 0赞

### 对象属性和值的深拷贝 ###

let staffForm = { 
    	id: '123',
    	name: 'zhangsan'
    }

#### `方法一：ES6语法进行深拷贝` ####

let obj = Object.assign({ }, staffForm);//obj是深拷贝的对象

#### `方法二：JSON工具,通过转字符串，然后转对象` ####

let obj = JSON.parse(JSON.stringify(staffForm));//obj是深拷贝

--------------------

### 合并对象 ###

会合并相同属性、后面的会覆盖前面的

const o1 = {  a: 1, b: 1, c: 1 };
    const o2 = {  b: 2, c: 2 };
    const o3 = {  c: 3 };
    
    const obj = Object.assign({ }, o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }

[Object.assign(target, …sources)][Object.assign_target_ _sources]请移步MDN文档

--------------------

### 清空对象属性值 ###

相当于遍历属性然后给每一个属性重新赋值为 `''`  
直接清空被操作的对象staffForm

#### `方式一：适合没有嵌套对象的对象` ####

Object.keys(staffForm).forEach(key=>staffForm[key]='');//清空属性值没有返回值

上面这种方式不能解决嵌套的对象，例如：

#### `方式二：定义一个常量，通过拷贝的方式获取一个清空的对象（不推荐）` ####

let obj2 = { 
    	id:1,
    	name:'',
    	dept:{ 
    		deptId:'',
    		deptName:''
    	}
    }

这种对象的清空可以通过上面的深拷贝用过的`Object.assign()`方法  
`反过来使用`  
首先定义一个常量

const objTemplate = { 
    	id:'',
    	name:'',
    	dept:{ 
    		deptId:'',
    		deptName:''
    	}
    }

然后

let obj2 = Object.assign({ }, objTemplate);//obj是深拷贝的对象

### `方式三：（强烈推荐使用!!!）自定义函数清空属性值` ###

通过递归处理对象属性值

###### 下面是我自己封装的一个方法`(方便自己日后再次使用)`，通过判断属性值是否是对象，如果是对象则递归处理 ######

使用的`Vue.js`，将下面的方法放在`methods`中

clearValue(obj){ 
        Object.keys(obj).forEach(key => { 
            if (typeof obj[key]=='object'){ 
                this.clearValue(obj[key])
            }else { 
                obj[key]='';
            }
        });
    }

然后调用该方法即可`清空obj对象的属性值`  
例如：

控制台打印的结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]  
如果是html中使用则去掉`this`调用，可以自己写一个`ObjectUtils.js`

function clearValue(obj){ 
        Object.keys(obj).forEach(key => { 
            if (typeof obj[key]=='object'){ 
                this.clearValue(obj[key])
            }else { 
                obj[key]='';
            }
        });
    },

然后引入`ObjectUtils.js`

function clearValue (obj) { 
        Object.keys(obj).forEach(key => { 
            if (typeof obj[key] == 'object') { 
                clearValue(obj[key])
            } else { 
                obj[key] = '';
            }
        });
    }

然后调用即可  
将`obj`替换成要清空的属性值

clearValue(obj);

示例代码：

结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]

[Object.assign_target_ _sources]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODEzMjA4_size_16_color_FFFFFF_t_70]: /images/20230209/fbab89b828ca46b4a7623d1fde6a1fae.png