js中引用类型赋值（拷贝）问题

yacheng 发布于2019-08-20 17:27 / 1180人阅读

摘要：问题来源在中，引用类型的变量引用的只是内存的地址信息，所以在用其给其他变量赋值时，另一个变量得到的是该内存地址，不是内存中的内容，所以在另一个变量改变某个值的时候会反映在原始变量中。

问题来源

在js中，引用类型的变量引用的只是内存的地址信息，所以在用其给其他变量赋值时，另一个变量得到的是该内存地址，不是内存中的内容，所以在另一个变量改变某个值的时候会反映在原始变量中。

例如：

var test={
    name:"jack",
    age:"23",
}
var test1=test
test1.name="rose"
console.log(test.name) //rose
console.log(test1.name) //rose

解决方法：

如果是数组：

最简单的方法就是：
var aArr = [0,1,2,3];
var m = aArr.slice(0);

通用的：对数组、对象都适用的（其实就是循环遍历重新建一个）：

    function clone(obj) {  
    var o;  
    if (typeof obj == "object") {  
        if (obj === null) {  
            o = null;  
        } else {  
            if (obj instanceof Array) {  
                o = [];  
                for (var i = 0, len = obj.length; i < len; i++) {  
                    o.push(clone(obj[i]));  
                }  
            } else {  
                o = {};  
                for (var j in obj) {  
                    o[j] = clone(obj[j]);  
                }  
            }  
        }  
    } else {  
        o = obj;  
    }  
    return o;  
    }

节点克隆：

var p = document.getElementsByTagName("p")[0];  
var cP = p.cloneNode();//克隆p节点  
var cP = p.cloneNode(true);//克隆p节点，深度克隆，克隆节点以及节点下面的子内容。

服务器托管私有云 js数据类型赋值 js引用数据类型 js引用类型的存储 js引用的数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83599.html

JavaScript系列--浅析JavaScript解析赋值、浅拷贝和深拷贝的区别

摘要：它将返回目标对象。有些文章说是深拷贝，其实这是不正确的。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。使用深拷贝的场景完全改变变量之后对没有任何影响，这就是深拷贝的魔力。一、赋值（Copy）赋值是将某一数值或对象赋给某个变量的过程，分为： 1、基本数据类型：赋值，赋值之后两个变量互不影响 2、引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有...

laznrbfe 2019-08-26 13:48 评论0 收藏0
【进阶4-1期】详细解析赋值、浅拷贝和深拷贝的区别

摘要：展开语法木易杨通过代码可以看出实际效果和是一样的。木易杨可以看出，改变之后的值并没有发生变化，但改变之后，相应的的值也发生变化。深拷贝使用场景木易杨完全改变变量之后对没有任何影响，这就是深拷贝的魔力。木易杨情况下，转换结果不正确。一、赋值（Copy）赋值是将某一数值或对象赋给某个变量的过程，分为下面 2 部分基本数据类型：赋值，赋值之后两个变量互不影响引用数据类型：赋址，两个...

silvertheo 2019-08-23 14:31 评论0 收藏0
深拷贝和浅拷贝的区别

摘要：深拷贝和浅拷贝的区别背景最近在用框架写页面，赋值给中的对象时会出现一个问题，赋值和被赋值对象之中任何一个有变化，另一个也会随之变化。深拷贝和浅拷贝的区别背景：最近在用vue框架写页面，赋值给Vue.$data中的对象时会出现一个问题，赋值和被赋值对象之中任何一个有变化，另一个也会随之变化。例如： var b = { foo: 123 }; var vm = new Vue(...

suemi 2019-08-21 17:07 评论0 收藏0
一篇文章理解JS数据类型、深拷贝和浅拷贝

摘要：接下来我们进入正片数据类型六种基本数据类型布尔值，和一个表明值的特殊关键字。一种数据类型，它的实例是唯一且不可改变的。在中是没有方法是可以改变布尔值和数字的。参考资料深拷贝浅拷贝前言笔者最近整理了一些前端技术文章，如果有兴趣可以参考这里：muwoo blogs。接下来我们进入正片： js 数据类型六种基本数据类型: Boolean. 布尔值，true 和 false. nu...

EddieChan 2019-08-22 17:31 评论0 收藏0
一篇文章理解JS数据类型、深拷贝和浅拷贝

摘要：接下来我们进入正片数据类型六种基本数据类型布尔值，和一个表明值的特殊关键字。一种数据类型，它的实例是唯一且不可改变的。在中是没有方法是可以改变布尔值和数字的。参考资料深拷贝浅拷贝前言笔者最近整理了一些前端技术文章，如果有兴趣可以参考这里：muwoo blogs。接下来我们进入正片： js 数据类型六种基本数据类型: Boolean. 布尔值，true 和 false. nu...

enda 2019-08-02 10:31 评论0 收藏0