前端全面的深拷贝(考虑map,set,symbol, function)

function isObject(obj) {
  return obj !== null && (typeof obj === "function" || typeof obj === "object");
}

function deepClone(value, map = new WeakMap()) {
  // 当value为set时,返回一个新set
  if (value instanceof Set) return new Set([...value]);
  
  // 当value为map时,返回一个新map
  if (value instanceof Map) return new Map([...value]);
  
  // 当value为symbol时,返回一个新symbol
  if (typeof value === "symbol") return Symbol(value.description);
  
  // 当value为function时,直接返回原function
  if (typeof value === "function") return value;
  
  // 当value不为对象时,直接返回value
  if (!isObject(value)) return value;
  
  // 当map中存在value时,直接返回map中的value
  if (map.has(value)) {
    return map.get(value);
  }
  
  // 判断value值是否为数组,为数组时创建空数组
  const newObj = Array.isArray(value) ? [] : {};
  
  // 将函数接收到的value和新创建的obj保存到map中
  map.set(value, newObj);
  
  for (let key in value) {
    // 递归处理value值
    newObj[key] = deepClone(value[key], map);
  }
  
  // 获取symbol为key的所有数据
  const symbols = Object.getOwnPropertySymbols(value);
  for (let sym of symbols) {
    newObj[sym] = deepClone(value[sym], map);
  }
  return newObj;
}

const symbolKey = Symbol("symbolKey");
const symbolValue = Symbol("symbolValue");
const set = new Set([1, 2, 3, 4, 5]);
const map = new Map([
  ["name", "alice"],
  ["age", 20],
]);

const obj = {
  name: "alice",
  friend: {
    name: "windy",
    address: {
      city: "Beijing",
    },
  },
  hobbies: ["swiming", "dancing", "tennis"],
  styding() {
    return "I am reading~";
  },
  [symbolKey]: "key",
  value: symbolValue,
  set,
  map,
};

obj.info = obj;
const user = deepClone(obj);
console.log("原对象obj-", obj);
console.log("新对象user-", user);

### 浏览器环境下的深拷贝实现方法 在浏览器环境中,深拷贝是一种常用的技术,用于确保对象或数组的副本与其原始数据之间没有引用关系。以下是几种常见的深拷贝实现方法及其优缺点。 #### 1. 使用 JSON 方法 JSON 序列化和反序列化是实现深拷贝的一种简单方法。这种方法适用于普通的对象和数组,但不支持函数、`undefined` 和 `Symbol` 类型的值。 ```javascript function deepCloneWithJSON(obj) { return JSON.parse(JSON.stringify(obj)); } ``` 这种方法的优点是简单易用,但在处理复杂数据结构时可能存在局限性[^4]。 #### 2. 使用第三方库(如 lodash) `lodash` 提供了一个强大的工具函数 `cloneDeep`,可以轻松实现深拷贝。它能够处理更复杂的对象结构,包括函数和特殊类型的数据。 ```javascript const _ = require('lodash'); function deepCloneWithLodash(obj) { return _.cloneDeep(obj); } ``` 使用第三方库可以减少手动实现的复杂性,并且通常经过了广泛的测试,性能也较为稳定[^4]。 #### 3. 手动递归实现 手动实现深拷贝可以通过递归遍历对象的所有属性来完成。这种方法虽然复杂,但可以完全控制深拷贝的过程,适合需要自定义逻辑的场景。 ```javascript function isObject(value) { return Object.prototype.toString.call(value) === '[object Object]'; } function isArray(value) { return Array.isArray(value); } function deepCloneManual(obj) { if (isObject(obj)) { const clone = {}; for (const key in obj) { if (obj.hasOwnProperty(key)) { clone[key] = deepCloneManual(obj[key]); } } return clone; } else if (isArray(obj)) { return obj.map(item => deepCloneManual(item)); } else { return obj; } } ``` 手动实现的优点是可以处理循环引用和特殊类型的值,但代码量较大且容易出错。 #### 4. 使用结构化克隆算法 现代浏览器提供了内置的结构化克隆算法,可以通过 `structuredClone` 方法实现深拷贝。这种方法支持更广泛的数据类型,包括 `Map`、`Set` 和 `Blob` 等。 ```javascript function deepCloneWithStructuredClone(obj) { return structuredClone(obj); } ``` 结构化克隆算法的优点是兼容性强,能够处理许多复杂的数据类型,但它可能不支持某些极端情况下的对象结构。 ### 注意事项 - 深拷贝虽然能够解决引用问题,但在处理大型复杂数据结构时可能会带来性能开销。因此,在实际应用中需要权衡性能与功能需求[^1]。 - 循环引用是一个常见的问题,手动实现深拷贝时需要特别注意处理这种情况[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值