本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(4)

(精华)浅克隆和深克隆

发布于2021-01-31 14:50     阅读(1247)     评论(0)     点赞(17)     收藏(3)


浅克隆和深克隆的实现 

  • 深浅克隆主要是为了区分引用类型和基本类型的克隆

深拷贝时首先要区分数组和对象(js中数组和对象都是Object类型,因此要做区分)

  • 方法一:利用Object.prototype.toString.call()

  1. var tem = "[object Array]";
  2. // 区分对象和数组
  3. function test() {
  4. //首先判断是不是对象
  5. if (typeof(arguments[0]) == "object") {
  6. //在判断是不是数组
  7. if (Object.prototype.toString.call(arguments[0]) == tem) {
  8. console.log("数组");
  9. } else {
  10. console.log("对象");
  11. }
  12. } else {
  13. console.log("不是对象");
  14. }
  15. }
  • 方法二:利用instanceof

  1. function test1() {
  2. //利用instanceof
  3. if (arguments[0] instanceof Array) {
  4. console.log("数组");
  5. } else {
  6. console.log("对象");
  7. }
  8. }

浅拷贝实现

  • 浅克隆直接将旧对象的地址复制给新对象,导致新对象值改变时,旧对象值也会跟着变

  1. var obj = {
  2. name: "abc",
  3. age: 12,
  4. cord: ["2", "3"],
  5. }
  6. var obj1 = {};
  7. //浅拷贝
  8. function clone(origin, target) {
  9. var target = target || {};
  10. for (var prop in origin) {
  11. target[prop] = origin[prop];
  12. }
  13. }
  •  浅拷贝后,obj中的cord为数组,数组在js中为引用类型,obj1 cord中的值改变后,obj接着也会变

     

深拷贝实现

  • 深度克隆实现时,先创建一个新的空对象或者数组,再将要拷贝的对象的(值)赋给新的对象
  • 深度克隆完之后不管是引用值还是基本值的改变都不会影响源对象
  1. var obj = {
  2. name: "abc",
  3. age: 12,
  4. cord: ["2", "3"],
  5. }
  6. var obj1 = {};
  7. // 深度克隆完之后不管是引用值还是原始值的改变都不会影响源对象
  8. // 先判断是不是原始值 typeof() object
  9. // 判断是数组还是对象 instancof Object.prototype.toString.call constructor
  10. // 建立相应的数组或对象
  11. function deepClone(origin, target) {
  12. var target = target || {},
  13. //用来判断是数组还是对象
  14. toStr = Object.prototype.toString,
  15. //存放数组类型的String
  16. arrStr = "[object Array]";
  17. //遍历对象
  18. for (var prop in origin) {
  19. //只克隆对象的属性,不拿他原型链上的属性
  20. if (origin.hasOwnProperty(prop)) {
  21. // 判断当前是不是对象
  22. if (origin[prop] !== "null" && typeof(origin[prop]) == "object") {
  23. // 是数组建立一个空数组是对象建立一个空对象
  24. target[prop] = toStr.call(origin[prop]) == arrStr ? [] : {};
  25. //再次克隆对象内部
  26. deepClone(origin[prop], target[prop]);
  27. } else {
  28. target[prop] = origin[prop];
  29. }
  30. }
  31. }
  32. return target;
  33. }
  34. deepClone(obj, obj1);
  •  深克隆之后就完全解决了这个问题,obj1中cord的内容改变之后,obj不会变

       

原文链接:https://blog.csdn.net/qq_45044074/article/details/113405361




所属网站分类: 技术文章 > 博客

作者:我喜欢css

链接:http://www.qianduanheidong.com/blog/article/72/9adc0dbd7c4b17909658/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

17 0
收藏该文
已收藏

评论内容:(最多支持255个字符)