一、浅克隆：克隆一层

  1. 对象
    1. Object.assign({}, obj)
    2. 展开运算符 let new_obj = { ...obj };
    3. 循环赋值
      1. let new_obj = {};
      2. _.each(obj, (value, key) => { new_obj[key] = value; });
  2. 数组
    1. arrayObject.slice(start,end) ：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素
    2. 展开运算符 ...
    3. concat()
    4. Object.assign({}, array) ```javascript 一、把对象进行克隆 let new_obj = Object.assign({}, obj); let new_obj = { …obj };

let newobj = {}; .each(obj, (value, key) => { new_obj[key] = value; });

二、把数组进行克隆

// 1. slice let arr = [2,4,434,43] let arr1= arr.slice() arr[0] = ‘a’ console.log(arr,arr1) // [ 2, 4, 434, 43 ] console.log(arr1 === arr) // false

// 2. 简单遍历 Array.prototype.clone = function(){ let a=[]; for(let i=0,l=this.length;i<l;i++) { a.push(this[i]); } return a; } let arr = [‘aaa’,’bbb’,’ccc’,’wwwww’,’ddd’] let arr2 = arr.clone() console.log(arr2) console.log( arr2 === arr )

// 3. concat Array.prototype.clone=function(){ return [].concat(this); //或者 return this.concat(); } let arr = [‘aaa’,’asss’] let arr1 = arr.clone() arr[0] = 123 console.log(arr,arr1)

// 4. Object.assign () 浅复制，也可以实现数组的克隆 let arr = [‘sdsd’,123,123,123] let arr1 = [] Object.assign(arr1,arr) arr[1] = ‘aaaa’ console.log(arr,arr1) // [ ‘sdsd’, ‘aaaa’, 123, 123 ] [ ‘sdsd’, 123, 123, 123 ]

// 5. 扩展运算符 const a1 = [1, 2]; // 写法一 const a2 = […a1]; a1[0] = ‘aaa’ console.log(a1,a2)

  1. <a name="p370s"></a>
  2. ## 深克隆
  4. 1. **实现深克隆最便捷办法**
  5.    1. `**JSON.stringify**`: 把对象/数组变为JSON字符串
  6.    1. `**JSON.parse**`: 把JSON字符串变为对象/数组「浏览器需要重新开辟所有内存」
  7.    1. 【弊端】
  9.    + 不允许出现套娃操作<br />   + 属性值不能是BigInt会报错  Uncaught TypeError: Do not know how to serialize a BigInt<br />   + 丢失一些内容：只要属性值是 symbol/undefined/function 这些类型的<br />   + 还有信息不准确的，例如：正则->空对象  Error对象->空对象  日期对象->字符串  ...
  10. ```javascript
  11. let obj = {
  12.   url: '/api/list',
  13.   method: 'GET',
  14.   cache: false,
  15.   timeout: 1000,
  16.   key: Symbol('KEY'),
  17.   big: 10n,
  18.   n: null,
  19.   u: undefined,
  20.   headers: {
  21.     'Content-Type': 'application/json',
  22.     post: {
  23.       'X-Token': 'xxx'
  24.     }
  25.   },
  26.   arr: [10, 20, 30],
  27.   reg: /^\d+$/,
  28.   time: new Date(),
  29.   fn: function () {
  30.     console.log(this);
  31.   },
  32.   err: new Error('xxx')
  33. };
  34. obj.obj = obj;
  36. ========实现深克隆最便捷办法
  37.  JSON.stringify:把对象/数组变为JSON字符串
  38.  JSON.parse:把JSON字符串变为对象/数组「浏览器会重新开辟所有内存」
  39.  【弊端】
  40.    + 不允许出现套娃操作
  41.    + 属性值不能是BigInt会报错  Uncaught TypeError: Do not know how to serialize a BigInt
  42.    + 丢失一些内容：只要属性值是 symbol/undefined/function 这些类型的
  43.    + 还有信息不准确的，例如：正则->空对象  Error对象->空对象  日期对象->字符串  ...
  44.  let newObj = JSON.parse(JSON.stringify(obj));
  46.  Qs.stringify:把对象变为urlencoded格式字符串 “xxx=xxx&xxx=xxx”
  47.  Qs.parse:把urlencoded格式字符串变为对象
  48.  【也存在很多问题】
  49.  console.log(Qs.parse(Qs.stringify(obj)));
  1.   // 实现数组和对象深/浅拷贝
  2.   var clone = function clone() {
  3.     var target = arguments[0],
  4.       deep = false,
  5.       type,
  6.       isArray,
  7.       isObject,
  8.       result,
  9.       Ctor,
  10.       treated = arguments[arguments.length - 1];
  11.     !Array.isArray(treated) || !treated.treated ? (treated = [], treated.treated = true) : null;
  12.     if (typeof target === "boolean") {  // 深克隆
  13.       deep = target;
  14.       target = arguments[1];
  15.     }
  17.     // 防止死递归的处理
  18.     if (treated.indexOf(target) > -1) return target;
  19.     treated.push(target);
  21.     // 校验target类型
  22.     type = toType(target);
  23.     isArray = Array.isArray(target);
  24.     isObject = isPlainObject(target);
  26.     // 特殊值的拷贝
  27.     if (target == null) return target;
  28.     Ctor = target.constructor;  // Ctor是target的构造函数
  30.     // 正则|日期
  31.     if (/^(regexp|date)$/i.test(type)) return new Ctor(target);
  32.     // 错误类型
  33.     if (/^(error)$/i.test(type)) return new Ctor(target.message);
  34.     // 函数|生成器函数  函数的克隆？
  35.     if (/^(function|generatorfunction)$/i.test(type)) {
  36.       // 包装一层函数
  37.       return function proxy() {
  38.         var args = Array.from(arguments); // 得到参数列表
  39.         return target.apply(this, args);  // 执行原来的函数
  40.       };
  41.     }
  43.     // 不是数组/对象
  44.     if (!isArray && !isObject) return target;
  46.     // 如果是数组/对象，我们依次迭代赋值给新的数组/对象
  47.     result = new Ctor();  // 根据target类型来创建新的数组/对象
  48.     each(target, function (copy, name) {
  49.       if (deep) {
  50.         // 深拷贝
  51.         result[name] = clone(deep, copy, treated);
  52.         return;
  53.       }
  54.       // 浅拷贝
  55.       result[name] = copy;
  56.     });
  57.     return result;
  58.   };