使用js对象赋值给另一个变量的时候默认是传的引用,什么是引用呢,通俗一点讲就是传的是一个指针,当你对被赋值的变量进行操作的时候原来的值也会变动.这个时候就需要深拷贝啦,也就是把对象所有属性都复制一份到一个新的对象中再赋值

下面是一个浅拷贝的示例var a = {

name: 'name1'

};

var b = {

name: 'name2',

obj: {

e: '1',

f: '2'

}

};

function _quanCopy(d) {

var c = {};

for (var i in d) {

c[i] = d[i];

}

return c;

}

执行下面代码后输出var copyb=_quanCopy(b);

copyb.obj='data is mod';

console.log(copyb);

console.log(b);

拷贝b对象然后把其中的一个属性obj 重新设置成字符串 ,注意obj原来是对 Object 类型数据,输出后没有问题,copyb是一个新的数据更改后对原来的b也不会有任何影响

然后再看下面代码var copyb=_quanCopy(b);

copyb.obj.e='data is mod';

console.log(copyb);

console.log(b);

代码跟上面一样,唯一不同的是没有直接对 obj这个属性进行重写成字符串而是对它里面的属性进行重新赋值,结果却发现,原来的数据b也被改变啦

上面就是浅拷贝的情况,对于一般的字符串数值类型的数据浅拷贝没有问题,但是对一些数组和对象类数据简单的赋值后只是传啦一个指针,包括函数值参数的时候也是这种情况,对象和数组传的是指针

下面是一个深拷贝的示例//对象深拷贝

var _deepCopy = function(source) {

var result = {};

for (var key in source) {

result[key] = typeof source[key] === 'object' ? _deepCopy(source[key]) : source[key];

}

return result;

}

同样的测试代码,使用深拷贝var copyb=_deepCopy(b);

copyb.obj.e='data is mod';

console.log(copyb);

console.log(b);

两个新的对象,对对象的修改也各自独立,实现最终目的

js 浅拷贝直接赋值_js的浅拷贝和深拷贝的简单理解和使用方法相关推荐

  1. js 浅拷贝直接赋值_js 深拷贝 vs 浅拷贝

    本文主要讲一下 js 的基本数据类型以及一些堆和栈的知识和什么是深拷贝.什么是浅拷贝.深拷贝与浅拷贝的区别,以及怎么进行深拷贝和怎么进行浅拷贝. 本文思维导图如下:本文思维导图 堆和栈的区别 其实深拷 ...

  2. js 浅拷贝直接赋值_JS中的赋值、浅拷贝与深拷贝

    作者:奚杰 拷贝是写代码中经常使用的方法.浅拷贝与深拷贝是指拷贝的两种情况.本文将深入探究JS的赋值.浅拷贝与深拷贝. 数据类型 在探究深拷贝与浅拷贝之前,我们先梳理一下JS的数据类型.在JavaSc ...

  3. js 浅拷贝直接赋值_JS中实现浅拷贝和深拷贝的代码详解

    (一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. ...

  4. chrome js 读取文件夹_JS读取/创建本地文件及目录文件夹的方法

    注:以下操作只在IE下有效! Javascript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和文件夹进行读. ...

  5. 一文搞懂JS中的赋值·浅拷贝·深拷贝

    前言 为什么写拷贝这篇文章?同事有一天提到了拷贝,他说赋值就是一种浅拷贝方式,另一个同事说赋值和浅拷贝并不相同.我也有些疑惑,于是我去MDN搜一下拷贝相关内容,发现并没有关于拷贝的实质概念,没有办法只 ...

  6. js中的数组拷贝(浅拷贝,深拷贝)

    问题 今天写代码时需要拷贝一个内容会变化的数组,使用了=赋值,slice(),concat()方法都不行,修改了原数组后拷贝数组也变了,原因是这个数组内容是object,而object是引用类型,需要 ...

  7. 对象浅拷贝和深拷贝有什么区别与实现方法

    在JS中,除了基本数据类型,还存在对象.数组这种引用数据类型. 基本数据类型有number,string,boolean,null,undefined五类. 基本数据类型 名值存储在栈内存中 当b=a ...

  8. html隐藏域保存数组,关于给JS组合数组赋值给隐藏域问题

    关于给JS组合数组赋值给隐藏域问题 我在页面上有动态添加的文本框,我用JS组合数组成字符串,给隐藏域,然后后台取值,在IE8,火狐,谷歌上测试可以接到值,但在IE6 360这种浏览器上发现一个BUG, ...

  9. js给span赋值及修改span字体颜色

    js给span赋值: document.getElementById("span_id").innerText = userName; js设置span字体颜色:        d ...

最新文章

  1. 数据项目总结 -- 蛋壳公寓租金分析!
  2. Java 中字符串的格式化
  3. 想成为优秀的技术人员你必须做到的几件事情
  4. JZOJ 3731. 【NOIP2014模拟7.10】庐州月
  5. emplace与insert
  6. iometer-2006_07_27.common-src编译
  7. 使用TFS CI/CD 完成 VSTS 插件自动化部署和发布
  8. 20行Python代码检测人脸是否佩戴口罩
  9. HTML基础知识(w3school)
  10. 【Go语言】集合与文件操作
  11. 男人动心的3种傻女孩[转载]
  12. 专业RAW图像处理软件Capture One Pro 22
  13. zz JQuery 插件
  14. 关于PC上的护眼大师这个软件
  15. 最最基本的SQL手动url注入方法
  16. 编程语言之时下潮流与实用价值
  17. Nacos 修改密码
  18. 【品牌专场】跨越 X 突破,音视频聚力新机遇
  19. 前端接入facebook jsSDK,实现登录授权功能
  20. python自动售货机_Python:自动售货机

热门文章

  1. 数据结构(数据库)设计规范
  2. 阿里面试题:Mybatis中的Dao接口和XML文件里的SQL是如何建立关系的?
  3. apache ab压力测试工具-批量压测脚本
  4. FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换
  5. 5、CC2541芯片中级教程-OSAL操作系统(PWM+看门狗)
  6. 大数据催生决策新模式 未来将改变更多
  7. js原型prototype属性用法实例
  8. FSMO角色以及DC修复
  9. shell 脚本调试
  10. 宽字符集(unicode)说明以及转换函数