js 對象的深拷貝、合并、清空屬性值(自己封裝，遞歸清除對象屬性值。)

對象屬性和值的深拷貝

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)請移步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對象的屬性值

例如：

let obj = {
	staffId: '1',
	deptId: {
	    deptId: "1",
	    deptName: "人事"
	},
	staffNum: '33088',
	staffName: {
		one:{
			two:{
				three:'這是一個測試值'
			}
		}
	},
	position: {
	    jobId: "1",
	    jobName: "HR"
	},
	eduBackground: '碩士',
};
this.clearValue(obj);
console.log(obj);
           

控制台列印的結果

如果是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] = '';
        }
    });
}
           

<script src="./js/ObjectUtils.js"></script>
           

clearValue(obj);
           

let obj = {
    staffId: '1',
    deptId: {
        deptId: "1",
        deptName: "人事"
    },
    staffNum: '33088',
    staffName: {
        one: {
            two: {
                three: '這是一個測試值'
            }
        }
    },
    position: {
        jobId: "1",
        jobName: "HR"
    },
    eduBackground: '碩士',
};
clearValue(obj);
console.log(obj);