美文网首页
js对象深拷贝

js对象深拷贝

作者: 一代码农1970 | 来源:发表于2019-03-28 18:41 被阅读0次

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实现深拷贝、instanceof、判断是否为数组

    JS深拷贝 JS中拷贝对象可以按照拷贝的程度可以分为浅拷贝和深拷贝,有些时候我们需要拷贝之后的对象和拷贝之前的对象...

  • JS工具-类型判断和深拷贝

    1. js深拷贝 js深拷贝简单对象的拷贝可以用JSON.stringify() 和 JSON.parse() 实...

  • JS中对象的复制

    JS中的对象复制分为两种情况:深拷贝和浅拷贝。深拷贝和浅拷贝的区别在于对数组和对象的拷贝,对它们拷贝时浅拷贝只是拷...

  • js对象深拷贝

    1.使用slice或者concat进行数组深拷贝 对于值都是普通数据类型的数组,可以使用数组的slice或者con...

  • js深拷贝对象

  • js对象深拷贝

    javascript的数据类型有两种;基本数据类型和引用数据类型。 当我们拷贝一个引用数据类型变量的时候,然后操作...

  • JS对象深拷贝

    方法一 注意:该方法只适用于简单类型的对象,不适用于对象里面嵌套对象;即使拷贝成功,给新对象里的对象的变量重新赋值...

  • JS对象深拷贝

    方法一: JSON.parse(JSON.stringify(obj))缺点:不能复制对象里的function,s...

  • 2019-11-19 JS对象深拷贝

    JS对象深拷贝: 1.JSON方法深拷贝 JSON.parse(JSON.stringify(obj)); 2.解...

  • 【转】一行代码完成js对象数组的深拷贝

    一行代码完成js对象数组的深拷贝

网友评论

      本文标题:js对象深拷贝

      本文链接:https://www.haomeiwen.com/subject/nbucbqtx.html