完美的js深克隆

const getType = obj => Object.prototype.toString.call(obj);

const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null;

const canTraverse = {
  '[object Map]': true,
  '[object Set]': true,
  '[object Array]': true,
  '[object Object]': true,
  '[object Arguments]': true,
};
const mapTag = '[object Map]';
const setTag = '[object Set]';
const boolTag = '[object Boolean]';
const numberTag = '[object Number]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const regexpTag = '[object RegExp]';
const funcTag = '[object Function]';

const handleRegExp = (target) => {
  const { source, flags } = target;
  return new target.constructor(source, flags);
}

const handleFunc = (func) => {
  // 箭头函数直接返回自身
  if(!func.prototype) return func;
  const bodyReg = /(?<={)(.|\n)+(?=})/m;
  const paramReg = /(?<=\().+(?=\)\s+{)/;
  const funcString = func.toString();
  // 分别匹配 函数参数 和 函数体
  const param = paramReg.exec(funcString);
  const body = bodyReg.exec(funcString);
  if(!body) return null;
  if (param) {
    const paramArr = param[0].split(',');
    return new Function(...paramArr, body[0]);
  } else {
    return new Function(body[0]);
  }
}

const handleNotTraverse = (target, tag) => {
  const Ctor = target.constructor;
  switch(tag) {
    case boolTag:
      return new Object(Boolean.prototype.valueOf.call(target));
    case numberTag:
      return new Object(Number.prototype.valueOf.call(target));
    case stringTag:
      return new Object(String.prototype.valueOf.call(target));
    case symbolTag:
      return new Object(Symbol.prototype.valueOf.call(target));
    case errorTag: 
    case dateTag:
      return new Ctor(target);
    case regexpTag:
      return handleRegExp(target);
    case funcTag:
      return handleFunc(target);
    default:
      return new Ctor(target);
  }
}

const deepClone = (target, map = new WeakMap()) => {
  if(!isObject(target)) 
    return target;
  let type = getType(target);
  let cloneTarget;
  if(!canTraverse[type]) {
    // 处理不能遍历的对象
    return handleNotTraverse(target, type);
  }else {
    // 这波操作相当关键,可以保证对象的原型不丢失!
    let ctor = target.constructor;
    cloneTarget = new ctor();
  }

  if(map.get(target)) 
    return target;
  map.set(target, true);

  if(type === mapTag) {
    //处理Map
    target.forEach((item, key) => {
      cloneTarget.set(deepClone(key, map), deepClone(item, map));
    })
  }
  
  if(type === setTag) {
    //处理Set
    target.forEach(item => {
      cloneTarget.add(deepClone(item, map));
    })
  }

  // 处理数组和对象
  for (let prop in target) {
    if (target.hasOwnProperty(prop)) {
        cloneTarget[prop] = deepClone(target[prop], map);
    }
  }
  return cloneTarget;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 JavaScript 中,克隆一个对象通常可以通过递归实现。具体来说,需要遍历对象的每一个属性,如果某个属性是对象或数组,那么需要递归地进行克隆,否则直接将其赋值给新对象即可。 以下是一个简单的克隆实现: ```javascript function deepClone(obj) { if (obj === null || typeof obj !== "object") { // 如果不是对象或数组,则直接返回 return obj; } const clone = Array.isArray(obj) ? [] : {}; // 判断是数组还是对象 // 遍历每个属性并递归克隆 for (let key in obj) { clone[key] = deepClone(obj[key]); } return clone; } ``` 这个函数可以接受任何类型的对象作为参数,并返回一个克隆后的对象。需要注意的是,该函数有一些限制: - 该函数不支持循环引用,如果原对象中有循环引用,将会导致栈溢出错误。 - 该函数不会克隆对象的原型链,只会克隆自身的属性。 因此,在使用这个函数时需要注意它的限制。如果需要处理循环引用或者原型链,需要使用更为复杂的实现。 ### 回答2: 在JavaScript中实现对象的克隆,可以通过以下步骤实现: 1. 创建一个函数,命名为deepClone,该函数将接收一个参数obj,表示需要克隆的对象。 2. 首先判断obj的类型,如果obj是基本数据类型或者是null,则直接返回该值,因为基本数据类型是按值传递的,不存在引用关系。 3. 创建一个变量cloneObj,用于保存克隆后的对象。 4. 遍历obj的属性,使用for...in循环遍历obj的所有可枚举属性。 5. 在遍历的过程中,判断obj的属性值的类型,如果属性值是对象或者数组,则递归调用deepClone函数进行克隆,将返回的克隆值赋给cloneObj的对应属性。 6. 如果属性值是基本数据类型或者是函数,则直接赋值给cloneObj的对应属性。 7. 最后,返回cloneObj,即为克隆后的对象。 以下是一个实现克隆的代码示例: function deepClone(obj) { if (obj === null || typeof obj !== "object") { return obj; } let cloneObj = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { cloneObj[key] = deepClone(obj[key]); } } return cloneObj; } 使用方法如下: const obj = { name: "Alice", age: 20, hobbies: ["coding", "reading"], address: { city: "Beijing", country: "China" } }; const clonedObj = deepClone(obj); console.log(clonedObj); 上述代码能够将obj克隆得到一个独立的对象clonedObj,两者完全独立,修改其中一个对象不会影响另一个对象。 ### 回答3: 对象的克隆是指将一个对象完全复制一份,并且新对象与原对象没有任何引用关系。Javascript实现对象的克隆可以通过以下步骤: 1. 创建一个空的目标对象,用于存储克隆后的对象。 2. 遍历原始对象的属性,使用递归的方式克隆每个属性的值。 3. 对于原始对象的每个属性,判断其类型: - 若为基本数据类型(如字符串、数字、布尔值等),直接复制到目标对象。 - 若为引用类型(如对象、数组等),则需要再次进行克隆操作。 4. 对于引用类型的属性,根据其具体类型进行不同的处理: - 若为数组,创建一个新的空数组,并遍历原数组,递归地将每个元素克隆到新数组中。 - 若为对象,创建一个空对象,并遍历原对象的属性,递归地将每个属性值克隆到新对象中。 5. 将克隆后的属性值赋值给目标对象对应的属性。 6. 最后返回目标对象,完成克隆操作。 下面是一个简单的Javascript代码示例: function cloneObject(source) { let target = {}; for(let key in source) { if(typeof source[key] === 'object' && source[key] !== null) { if(source[key].constructor === Array) { // 克隆数组 target[key] = source[key].map(item => cloneObject(item)); } else { // 克隆对象 target[key] = cloneObject(source[key]); } } else { // 复制基本数据类型 target[key] = source[key]; } } return target; } 使用该函数进行对象的克隆: let obj1 = {a: 1, b: {c: 2}}; let obj2 = cloneObject(obj1); console.log(obj2); // 输出: {a: 1, b: {c: 2}} console.log(obj1 === obj2); // 输出: false
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值