分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

js浅度克隆/深度克隆

发布时间:2023-09-06 02:07责任编辑:白小东关键词:js

首先弄明白几个概念:

一. 具体数据类型分为两种: 
    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浅度克隆/深度克隆

原文地址:https://www.cnblogs.com/yalong/p/9406068.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved