• Copy

    深拷贝

    Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

    1. var a = {name:1, sya:function(){ console.log("打印")},age:undefined}; // {name:1,sya:f}
    2.  
    3. var b = JSON.parse(JSON.stringify(a)); // {name:1}
    • 拷贝的对象的值中如果有 function、 undefined、 symbol 这几种类型， 经过 JSON.stringify 序列化之后的字符串中这个键值对会消失；
    • 拷贝 Date 引用类型会变成字符串；
    • 无法拷贝不可枚举的属性；
    • 无法拷贝对象的原型链；
    • 拷贝 RegExp 引用类型会变成空对象;
    • 对象中含有 NaN、 Infinity 以及 - Infinity， JSON 序列化的结果会变成 null；
    • 无法拷贝对象的循环应用， 即对象成环(obj[key] = obj)
    1. function Obj() {
    2.     this.func = function () {
    3.       alert(1)
    4.     };
    5.     this.obj = {
    6.       a: 1
    7.     };
    8.     this.arr = [1, 2, 3];
    9.     this.und = undefined;
    10.     this.reg = /123/;
    11.     this.date = new Date(0);
    12.     this.NaN = NaN;
    13.     this.infinity = Infinity;
    14.     this.sym = Symbol(1);
    15.   }
    16.   let obj1 = new Obj();
    17.   Object.defineProperty(obj1, 'innumerable', {
    18.     enumerable: false,
    19.     value: 'innumerable'
    20.   });
    21.   console.log('obj1', obj1);
    22.   let str = JSON.stringify(obj1);
    23.   let obj2 = JSON.parse(str);
    24.   console.log('obj2', obj2);

    1. // 深拷贝
    2. var sourceObj = {
    3.   name: 'tt',
    4.   age: 18,
    5.   job: 'web',
    6.   friends: ['t1', 't2']
    7. }
    8.  
    9. // util作为判断变量具体类型的辅助模块
    10. var util = (function() {
    11.   var class2Type = {}
    12.   var objTypes = ["Null","Undefined","Number","Boolean","String","Object","Function","Array","RegExp","Date”]
    14.   objTypes.forEach(function(item) {
    15.     class2Type['[object ' + item + ']'] = item.toLowerCase()
    16.   })
    18.   function isType(obj, type) {
    19.     return getType(obj) === type
    20.   }
    22.   function getType(obj) {
    23.     return class2type[Object.prototype.toString.call(obj)] || 'object'
    24.   }
    26.   return {
    27.     isType: isType,
    28.     getType: getType
    29.   }
    30. })()
    32. // deep参数用来判断是否是深度复制
    33. function copy(obj, deep){
    34.   // 如果obj不是对象，那么直接返回值就可以了
    35.   if(obj == null || typeof obj !== 'object'){
    36.     return obj
    37.   }
    39.   // 定义需要的局部变量，根据obj的类型来调整target的类型
    40.    var i,
    41.    target = util.isType(obj,"array") ? [] : {},
    42.    value,
    43.    valueType
    45.    for(i in obj){
    46.         value = obj[i]
    47.         valueType = util.getType(value)
    48. 　　　   // 只有在明确执行深复制，并且当前的value是数组或对象的情况下才执行递归复制
    49.         if(deep && (valueType === "array" || valueType === "object")){
    50.             target[i] = copy(value)
    51.         }else{
    52.             target[i] = value
    53.         }
    54.     }
    55.     return target
    56. }
    58. var targetObj = copy(sourceObj, true);
    59. targetObj.friends.push ('t3');
    60. console.log(sourceObj) // ['t1', 't2']
    1. // 深拷贝
    2. Object.prototype.clone = function() {
    3.   var Constructor = this.constructor
    4.   var obj = new Constructor()
    5.   for (var attr in this) {
    6.     if (this.hasOwnProperty(attr)) {
    7.       if (typeof this[attr] !== 'function') {
    8.         if (this[attr] === null) {
    9.           obj[attr] = null
    10.         } else {
    11.           obj[attr] = this[attr].clone()
    12.         }
    13.       }
    14.     }
    15.   }
    16.   return obj
    17. }
    18.  
    19. /* Method of Array*/
    20. Array.prototype.clone = function() {
    21.   var thisArr = this.valueOf()
    22.   var newArr = []
    23.   for (var i = 0; i < thisArr.length; i++) {
    24.     newArr.push(thisArr[i].clone())
    25.   }
    26.   return newArr
    27. }
    28. /* Method of Boolean, Number, String*/
    29. Boolean.prototype.clone = function() {
    30.   return this.valueOf()
    31. }
    32. Number.prototype.clone = function() {
    33.   return this.valueOf()
    34. }
    35. String.prototype.clone = function() {
    36.   return this.valueOf()
    37. }
    38. /* Method of Date*/
    39. Date.prototype.clone = function() {
    40.   return new Date(this.valueOf())
    41. }
    42. /* Method of RegExp*/
    43. RegExp.prototype.clone = function() {
    44.   var pattern = this.valueOf()
    45.   var flags = ''
    46.   flags += pattern.global ? 'g' : ''
    47.   flags += pattern.ignoreCase ? 'i' : ''
    48.   flags += pattern.multiline ? 'm' : ''
    49.   return new RegExp(pattern.source, flags)
    50. }
    1. function deepClone(source){
    2.   // 判断复制的目标是数组还是对象
    3.   const targetObj = source.constructor === Array ? [] : {}; 
    4.   for(let keys in source){ // 遍历目标
    5.     if(source.hasOwnProperty(keys)){
    6.       if(source[keys] && typeof source[keys] === 'object'){ 
    7.         targetObj[keys] = source[keys].constructor === Array ? [] : {};
    8.         targetObj[keys] = deepClone(source[keys]);
    9.       }else{ // 如果不是，就直接赋值
    10.         targetObj[keys] = source[keys];
    11.       }
    12.     } 
    13.   }
    14.   return targetObj;
    15. }
    16. //测试一下
    17. var a = {name:1, sya:function(){ console.log("打印")},age:undefined}; 
    18. var b = deepClone(a);
    19. b.name=2;
    20. console.log(a)//{name:1,sya:f，age:undefined}
    21. console.log(b)//{name:2,sya:f，age:undefined}
    22.  
    23. // 深拷贝函数并不能复制不可枚举的属性以及 Symbol 类型；
    24. // 这种方法只是针对普通的引用类型的值做递归复制，而对于 Array、Date、RegExp、Error、Function 这样的引用类型并不能正确地拷贝；
    25. // 对象的属性里面成环，即循环引用没有解决。

    1. 针对能够遍历对象的不可枚举属性以及 Symbol 类型，我们可以使用 Reflect.ownKeys 方法；

    2. 当参数为 Date、RegExp 类型，则直接生成一个新的实例返回；

    3. 利用 Object 的 getOwnPropertyDescriptors 方法可以获得对象的所有属性，以及对应的特性，顺便结合 Object 的 create 方法创建一个新对象，并继承传入原对象的原型链；

    4. 利用 WeakMap 类型作为 Hash 表，因为 WeakMap 是弱引用类型，可以有效防止内存泄漏，作为检测循环引用很有帮助，如果存在循环，则引用直接返回 WeakMap 存储的值。

    1. const isComplexDataType = obj => (typeof obj === 'object' || typeof obj === 'function') && (obj !== null);
    2.  
    3.   const deepClone = function (obj, hash = new WeakMap()) {
    4.     if (obj.constructor === Date) return new Date(obj) // 日期对象直接返回一个新的日期对象
    5.     if (obj.constructor === RegExp) return new RegExp(obj) // 正则对象直接返回一个新的正则对象
    6.     if (hash.has(obj)) return hash.get(obj)  // 如果循环引用了就用 weakMap 来解决
    7.     let allDesc = Object.getOwnPropertyDescriptors(obj); // 遍历传入参数所有键的特性 
    8.                  // ts报错
    9.                  // (<any>Object).getOwnPropertyDescriptors(obj); // 遍历传入参数所有键的特性
    10.            // (Object as any).getOwnPropertyDescriptors(obj); // 遍历传入参数所有键的特性
    11.     let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc); //继承原型链
    12.     hash.set(obj, cloneObj);
    13.     for (let key of Reflect.ownKeys(obj)) {
    14.       cloneObj[key] = (isComplexDataType(obj[key]) && typeof obj[key] !== 'function') ? deepClone(obj[key], hash) : obj[key]
    15.     }
    16.     return cloneObj
    17.   }
    18.  
    19.   // 下面是验证代码
    20.   let obj = {
    21.     num: 0,
    22.     str: '',
    23.     boolean: true,
    24.     unf: undefined,
    25.     nul: null,
    26.     obj: {
    27.       name: '我是一个对象',
    28.       id: 1
    29.     },
    30.     arr: [0, 1, 2],
    31.     func: function () {
    32.       console.log('我是一个函数')
    33.     },
    34.     date: new Date(0),
    35.     reg: new RegExp('/我是一个正则/ig'),
    36.     [Symbol('1')]: 1,
    37.   };
    38.   Object.defineProperty(obj, 'innumerable', {
    39.     enumerable: false,
    40.     value: '不可枚举属性'
    41.   });
    42.   obj = Object.create(obj, Object.getOwnPropertyDescriptors(obj))
    43.   obj.loop = obj // 设置loop成循环引用的属性
    44.   let cloneObj = deepClone(obj)
    45.   cloneObj.arr.push(4)
    46.   console.log('obj', obj)
    47.   console.log('cloneObj', cloneObj)

    1. // 深拷贝  lodash _.cloneDeep()
    2.   var _ = require("lodash");
    3.   var obj1 = {
    4.     a: 1,
    5.     b: { f: { g: 1 } },
    6.     c: [1, 2, 3],
    7.   };
    8.   var obj2 = _.cloneDeep(obj1);
    9.   console.log(obj1.b.f === obj2.b.f);
    1. // 深拷贝 jQuery.extend()
    2. // $.extend(deepCopy, target, object1, [objectN])//第一个参数为true,就是深拷贝
    3.  
    4.   var $ = require("jquery");
    5.   var obj1 = {
    6.     a: 1,
    7.     b: { f: { g: 1 } },
    8.     c: [1, 2, 3],
    9.   };
    10.   var obj2 = $.extend(true, {}, obj1);
    11.   console.log(obj1.b.f === obj2.b.f);

    MessageChannel 方式

    • 实现
      • 建立两个端，一个端发送消息，另一个端接收消息
    • 优点
      • 能解决循环引用的问题，还支持大量的内置数据类型。
    • 缺点
      • 这个方法是异步的
    1. // 深度拷贝 使用 MessageChannel 方式
    2.  
    3.   function structuralClone(obj) {
    4.     return new Promise((resolve) => {
    5.       const { port1, port2 } = new MessageChannel();
    6.       port2.onmessage = (ev) => resolve(ev.data);
    7.       port1.postMessage(obj);
    8.     });
    9.   }
    10.   const obj = {
    11.     name: 'SeriousLose',
    12.     obj: {
    13.       name: 'fly',
    14.     },
    15.   };
    16.   structuralClone(obj).then((res) => {
    17.     console.log(res);
    18.   });

    History API 方式

    • 实现
      • 利用history.replaceState。这个api在做单页面应用的路由时可以做无刷新的改变url。这个对象使用结构化克隆，而且是同步的。但是我们需要注意，在单页面中不要把原有的路由逻辑搞乱了。所以我们在克隆完一个对象的时候，要恢复路由的原状
    • 优点
      • 能解决循环引用的问题，还支持大量的内置数据类型。同步的
    • 缺点
      • 有的浏览器对调用频率有限制。比如Safari 30 秒内只允许调用 100 次
    1. // history.replaceState 方式
    2.  
    3.   function structuralClone(obj) {
    4.     const oldState = history.state;
    5.     history.replaceState(obj, document.title);
    6.     const copy = history.state;
    7.     history.replaceState(oldState, document.title);
    8.     return copy;
    9.   }
    10.  
    11.   var obj = {};
    12.   var b = { obj };
    13.   obj.b = b;
    14.   var copy = structuralClone(obj);
    15.   console.log(copy);

    Notification API

    • Notification API 主要是用于桌面通知的
    • 在浏览器的右下角有一个弹窗
    • 优点
      • 能解决循环引用的问题，还支持大量的内置数据类型。同步的
    • 缺点
      • 这个api的使用需要向用户请求权限，但是用在这里克隆数据的时候，不经用户授权也可以使用。在http协议的情况下会提示你再https的场景下使用。
    1. // Notification API
    2.  
    3.   function structuralClone(obj) {
    4.     return new Notification('', { data: obj, silent: true }).data;
    5.   }
    6.  
    7.   var obj = {};
    8.   var b = { obj };
    9.   obj.b = b;
    10.   var copy = structuralClone(obj);
    11.   console.log(copy);

    考验能力

    基础编码能力

    递归编码能力

    代码的严谨性

    代码抽象能力

    js编码能力

    熟练掌握WeakMap的能力

    引用类型各种AP的熟练程度

    准确判断JS各种数据类型的能力

    考虑问题全面性

    边界情况

    解决循环引用

    1. // 练习题1
    2. var a = {n: 1}  
    3. var b = a;  
    4. a.x = a = {n: 2}  
    5. console.log(a.x);  // undefined
    6. console.log(b.x);  // {n: 2}
    堆内存
    var a = {n: 1}a{n: 1}
    var b = a;a、b{n: 1}
    .的优先级高于=号，先计算.   a.x = a = {n:2}
    a.x = a = {n: 2}a、b{n: 1,x=a={n:2}}
    a={n:2} 开辟新堆内存，a引用地址改变；b引用地址未改变
    x=a={n:2}a{n:2}
    b{n:1,x:{n:2}}
    1. // 练习题2
    2. var a = {n: 1}  
    3. var b = a;  
    4. b.n = a.f = {n: 2};
    5. console.log(a);  // {n:{n:2},f:{n:2}}
    6. console.log(b);  // {n:{n:2},f:{n:2}}
    堆内存
    var a = {n: 1}a{n: 1}
    var b = a;a、b{n: 1}
    .的优先级高于=号，先计算.   b.n = a.f = {n:2}
    b.n = a.f = {n:2}a、b{n=a.f={n:2}}
    a.f = {n:2}a、b{n:{n:2},f:{n:2}}

    一文读懂 javascript 深拷贝与浅拷贝

  • 相关阅读:
    2.6一个小工具的使用snipaste
    LeetCode416 分割等和子集
    【langchain手把手2】构造Prompt模版
    nginx动态新增模块
    WebDAV之葫芦儿·派盘+读出通知
    数据库连接池知识点总结-DX的笔记
    【python】接入MySQL实际操作案例
    VUE3照本宣科——响应式与生命周期钩子
    开发人员请注意：在 PyPI 上的 Python 包中发现 BlazeStealer 恶意软件
    实现登陆模块时Cookie，Session，Token的理解
  • 原文地址：https://blog.csdn.net/SeriousLose/article/details/128184817