js对象深拷贝

javascript的数据类型有两种;基本数据类型和引用数据类型。

当我们拷贝一个引用数据类型变量的时候,然后操作变量,发现最初被复制的对象也发生了改变,这往往不是我们想要的结果。

比如:


let obj = {
    name: '张三',
    age: 18
};

let copyObj = obj;
copyObj.name = '李四'; // 复制新值

console.log(obj.name); // 李四  obj name 的值也发生了变化
console.log(copyObj.name) // 李四

那么怎么去深拷贝一个对象呢?
方法一 JSON转换:

let obj = {
  name: '张三',
  age: 18
};
let copyObj = JSON.parse(JSON.stringify(obj));
copyObj.name = '李四'; // 复制新值

console.log(obj.name); // 张三  
console.log(copyObj.name) // 李四

方法二:

let obj = {
    name: '张三',
    age: 18
 };

function deepCopy(obj) {
    let result = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object') {
                result[key] = deepCopy(obj[key]); //递归
            } else {
                result[key] = obj[key];
            }
        }
    }
    return result;
};

  let copyObj = deepCopy(obj);
  copyObj.name = '李四'; // 复制新值

  console.log(obj.name); // 张三  
  console.log(copyObj.name) // 李四

方法一通过JSON对象的两个方法实现了深拷贝,JSON.stringify的方法,先将对象转成字符串,再通过JSON.parse方法把字符串穿转成对象。

方法二通过遍历对一个对象的拷贝,如果对象的key 值是引用数据类型,需要递归继续遍历复制。

以上两个方法可以实现js对象深拷贝。您掌握了吗?

你可能感兴趣的:(js对象深拷贝)