1. 通过JSON序列化

通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。

var userInfo = {username:"zhangsan",age:20}
var copyUserInfo = JSON.stringify(userInfo);
userInfo.username='lisi';
console.log(userInfo);
console.log(copyUserInfo);

JS 对象深拷贝_json

2. 使用对象的合并,即通过Object.assign()方法

注意:该方法的第一个参数必须是空对象
如果已知克隆的对象的属性都是基本类型,如{name: ‘jack’, age: ‘18’},可以利用ES6的Object.assign()实现克隆。

var userInfo = {username:"zhangsan",age:20}
var copyUserInfo = Object.assign({}, userInfo);
userInfo.username='lisi';
console.log(userInfo);
console.log(copyUserInfo);

JS 对象深拷贝_javascript_02


不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。如果想要保持继承链,可以采用下面的代码。

function clone(origin) {
var originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}
var obj = {name: 'jack', age: '18'};
var newObj = clone(obj);

3. 使用拓展运算符+解构赋值

该方法的局限性在于,当值为undefined、function、symbol会在转换过程中被忽略。

var userInfo = {username:"zhangsan",age:20}
var copyUserInfo = {...userInfo};
userInfo.username='lisi';
console.log(userInfo);
console.log(copyUserInfo);

4. 利用循环递归

var obj = {
name: "123",
sex: { age: "小花" }
};
var newObj = {};
function deepClone(obj,) {
var newObj = newObj || {};
for (let key in obj) {
if (typeof obj[key] == 'object') {
newObj[key] = (obj[key].constructor === Array) ? [] : {}
deepClone(obj[key], newObj[key]);
} else {
newObj[key] = obj[key]
}
}
return newObj;
}
console.log(deepClone(obj, newObj));//{name: "123",sex: {age: '小花'}}