首先弄明白几个概念:

一. 具体数据类型分为两种: 
    1.原始数据类型 
    2.引用数据类型

    原始数据类型存储的是对象的实际地址,包括:

    number、string、boolean、还有两个特殊的null、undefined

    引用数据类型其中存储的是对象的引用地址, 包括:. 
    array、function、object

二. 浅度克隆:

  原始类型为值传递,对象类型仍为引用传递; 也就是说对象类型克隆的是引用地址,引用地址指向的是同一个数据空间,

  这时候改变克隆出来的数据,被克隆的数据也会变化,因为引用对象是一样的,所以数据也是一样的,改变新对象的时候 原数据也受影响。

三. 深度克隆:

  所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。

具体看如下代码:

        var a = 1;
var b = a;
a = 10;
console.log(b); console.log(a);// 1,10 var a = 'hello';
var b = a;
a = 'world';
console.log(b); console.log(a);// hello,world var a = true;
var b = a;
a = false;
console.log(b); console.log(a);// true,false

这些都是元数据类型,克隆出来的数据跟原数据是没有关系了,新数据的改变不会影响原数据。

看下面的代码:

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

b 是 a 的克隆对象, [0,1,2,3]是数组,属于引用数据类型,所以 a 存储的是这个数组的引用地址。b 浅克隆 a ,所以 b 跟 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);

在平时的开发中,我一般都使用    JSON.parse(JSON.stringify( obj )) ;

但是这种方法有个问题,比如

var a={'a':function(){},"b":111,"c":undefined}

var b=JSON.parse(JSON.stringify(a));

console.log(b);// {b: 111}

就是说 会过滤掉value值 是function  undefine 的属性,使用的时候需要注意。

js浅度克隆/深度克隆的更多相关文章

  1. js对象的深度克隆

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js里的深度克隆

    ES6 数组克隆 let arr = [1,2,3,4,5]; let arr1 = [...a]; arr1 = ["a","b","c" ...

  3. 【JavaScript代码实现三】JS对象的深度克隆

    function clone(Obj) { var buf; if (Obj instanceof Array) { buf = []; // 创建一个空的数组 var i = Obj.length; ...

  4. js之深度克隆、简易克隆

    一.js中的对象 谈到对象的克隆,必定要说一下对象的概念. js中的数据类型分为两大类:原始类型和对象类型. (1)原始类型包括:数值.字符串.布尔值.null.undefined(后两个是特殊的原始 ...

  5. JS的深度克隆,利用构造函数原型深度克隆

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天来写写,JS中的深度克隆,这个在笔面试中,考的还是比较多的,主要是对象与数组的赋值,如果直接赋值的话,那么得到的是对象或者数组在堆里的地址, ...

  6. js实现数组、对象深度克隆的两种办法

    1.深度克隆的原理 JS中的深度克隆,指的是原对象改变了,克隆出来的新对象也不会改变,原对象与新对象是完全独立的关系. 实现深度克隆的原理得从对象是一种引用类型说起 众所周知,对象是一种引用类型,对象 ...

  7. javascript中对象的深度克隆

    记录一个常见的面试题,javascript中对象的深度克隆,转载自:http://www.2cto.com/kf/201409/332955.html 今天就聊一下一个常见的笔试.面试题,js中对象的 ...

  8. javascript对象的深度克隆

    在做项目的时候需要向对象里面添加新属性,又不想修改原对象.于是就写: var newObj = oldObj,但是新对象属性改变后就对象也会跟着改变,这是因为无论是新对象还是旧对象,指向的内存地址都是 ...

  9. Java的深度克隆和浅度克隆

    说到克隆,其实是个比较简单的概念,跟现实生活正的克隆一样,复制一个一模一样的对象出来.clone()这个方法是从Object继承下来的,一个对象要实现克隆,需要实现一个叫做Cloneable的接口,这 ...

随机推荐

  1. nginx -- 启动, 重启, 关闭

    Nginx的启动.停止与重启 重启:  nginx -s reload 启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@LinuxServer sbin] ...

  2. nginx rewrite不支持if 嵌套也不支持逻辑或和逻辑并

    如题,apache的rewrite是支持或者的,用个OR就可以,如果不加OR,多个RewriteCond 罗列累加就是并且的意思.然后nginx的rewrite就没有这么好了.那么如何去实现这样复杂的 ...

  3. ES6里关于数字的拓展

    一.指数运算符 ES6引入的唯一一个JS语法变化是求幂运算符,它是一种将指数应用于基数的数学运算.JS已有的Math.pow()方法可以执行求幂运算,但它也是为数不多的需要通过方法而不是正式的运算符来 ...

  4. thrift.transport.TTransport.TTransportException: Could not start SASL: Error in sasl_client_start (-4) SASL(-4): no mechanism available: No worthy mechs found

    thrift.transport.TTransport.TTransportException: Could not start SASL: Error in sasl_client_start (- ...

  5. 一分钟学awk够用

    [转载于58同城沈剑] 1.什么是AWK(1)Aho.Weinberger.Kernighan三位发明者名字首字母:(2)一个行文本处理工具: 2.AWK基本原理2.1原理:逐行处理文件中的数据 2. ...

  6. Android之TextView的Span样式源代码剖析

    Android中的TextView是个显示文字的的UI类.在现实中的需求中,文字有各式各样的样式,TextView本身没有属性去设置实现.我们能够通过Android提供的 SpannableStrin ...

  7. 3. Spring Boot热部署【从零开始学Spring Boot】

    转载:http://blog.csdn.net/linxingliang/article/details/51584549 在编写代码的时候,你会发现我们只是简单把打印信息改变了下,就需要重新部署,如 ...

  8. 关于八数码问题中的状态判重的三种解决方法(编码、hash、&lt;set&gt;)

    八数码问题搜索有非常多高效方法:如A*算法.双向广搜等 但在搜索过程中都会遇到同一个问题.那就是判重操作(假设反复就剪枝),怎样高效的判重是8数码问题中效率的关键 以下关于几种判重方法进行比較:编码. ...

  9. react-native flex 布局 详解

    而在React Native中,有4个容器属性,2个项目属性,分别是: 容器属性:flexDirection   flexWrap   justifyContent  alignItems 项目属性( ...

  10. TCP/IP详解 卷一(第十八章 TCP连接的建立和终止)

    建立连接 建立一个TCP连接时会发生下述情况 1.客户TCP发送一个SYN(同步)分节,它告诉服务器将在(待建立)连接中发送的数据的初始序列号. 2.服务器确认(ACK)客户的SYN,同时自己也得发送 ...