美文网首页
js深度克隆

js深度克隆

作者: 方寸万重 | 来源:发表于2018-07-09 18:52 被阅读0次

在JAVAScript中数据类型分为两种,一种是原始数据类型,另外一种就是引用数据类型。

数据类型

原始数据类型:其中存储的是对象的实际地址。unmberstringboolean和两个特殊的nullunderfined

引用数据类型:其中存储的是对象的引用地址。arrayfunctionobject

存在的问题

对于原始数据类型而言,通过简单的赋值操作,就可以实现深度克隆。例子:

var a = 1;
var b = a;
a = 10;
console.log(b); // 1

var a = 'hello';
var b = a;
a = 'world';
console.log(b); // hello

var a = true;
var b = a;
a = false;
console.log(b); // true

在上面可以看到把a赋值给bb改变之后完全没有影响到a

但是引用类型不一样,它存储的是对象的引用地址。就会导致以下的问题产生

//简单的使用数组进行实例

var a = [1,2,3];
var b = a;
console.log(b);  //[1,2,3]
b.push(4);
console.log(b);  //[1,2,3,4]
console.log(a);  //[1,2,3,4]

从以上的代码可以看到把a的值赋给了b,b改变之后影响到了a。这是为什么呢?

由于引用类型数据存储在应用地址内存中,因此赋值复制的也是这一块地址,因此相当于两个数组对象引用了一块数据地址,所以对a或者b的任何操作或者改变都会体现在对象中。

为了避免这种情况,引入了深度克隆。

解决方案:深度克隆

function clone(obj){
        var buf;
        if(obj instanceof Array){
            buf = [];
            var i = obj.length;
            while(i--){
                buf[i] = clone(obj[i]);
            }
            return buf;
        }
        else if(obj instanceof Object){
            buf = {};
            for(var k in obj){
                buf[k] = clone(obj[k]);
            }
            return buf;
        }
        else{
            return obj;
        }
    }

或者精简的写法(递归)

function clone(obj) {
  var o = obj instanceof Array ? [] : {};
  for(var k in obj)
    o[k] = typeof obj[k] === Object ? clone(obj[k]) : obj[k];
  return o;
}

var a = [[1, 2, 3], [4, 5, 6, 7]];
var b = clone(a);
console.log(b);

原文地址

相关文章

  • js克隆

    实现 js 深度克隆 执行结果如下:

  • js深度克隆

  • js深度克隆

    在JAVAScript中数据类型分为两种,一种是原始数据类型,另外一种就是引用数据类型。 数据类型 原始数据类型:...

  • JS 深度克隆

    想要克隆一个对象或数组,如果只是普通的赋值,那么只是复制了浅层,深层的引用值其实指向的是同一块内存。 JSON克隆...

  • js对象深度克隆

    通用克隆方法 第一种方法简单粗暴,先将对象序列化再解析回来,不过要注意对象中如果有函数function则不能正确复...

  • JS实现深度克隆

    一、概念 深度克隆:深度克隆的新对象可以完全脱离原对象,我们对新对象的修改不会反映到原对象中 二、知识点储备: 1...

  • JS深度克隆实现

  • js实现深度克隆

    方法一 硬刚法(迭代法,适用于所有) 方法二 利用JSON.stringify 将js对象序列化(JSON字符串)...

  • js 浅拷贝和深拷贝

    js实现深拷贝(深度克隆)[https://www.cnblogs.com/cirry/p/13395291.ht...

  • js代码题

    js对象的深度克隆 js数组去重 js常用设计模式的实现思路,单例,工厂,代理,装饰,观察者模式等

网友评论

      本文标题:js深度克隆

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