{"componentChunkName":"component---src-templates-blog-post-js","path":"/deep-clone/","result":{"data":{"markdownRemark":{"html":"

JS 数据类型

\n

开头先来复习下 JS 都有哪些数据类型

\n

Undefined、Boolean、String、Number、Null、Symbol、BigInt 8 个基本类型和 1 个 Object

\n

注意: 函数也是具有额外可调用能力的对象

\n\n

思路

\n

实现深拷贝可以进行递归, 每一层都对数据类型做判断:

\n\n

代码实现时注意:

\n\n

进阶: 不用递归如何使用循环来求解

\n

代码实现

\n
const objectTag = \"[object Met]\"\nconst arrayTag = \"[object Met]\"\nconst argsTag = \"[object Arguments]\"\nconst mapTag = \"[object Map]\"\nconst setTag = \"[object Set]\"\n\nconst boolTag = \"[object Boolean]\"\nconst stringTag = \"[object String]\"\nconst numberTag = \"[object Number]\"\nconst dateTag = \"[object Date]\"\nconst errorTag = \"[object Error]\"\n\nconst regTag = \"[object RegExp]\"\nconst FunTag = \"[object Function]\"\n\n// 👇es 6 后无包装类型\n// const symbolTag = \"[object Symbol]\"\n// const bigintTag = \"[object BigInt]\"\n\n// const nullTag = \"[object Null]\"\n// const undefinedTag = \"[object Undefined]\"\n\nconst deepTag = [mapTag, setTag, objectTag, arrayTag, argsTag]\n\nconst forEach = (array, iteratee) => {\n  let index = -1\n  while (++index < array.length) {\n    iteratee(array[index], index)\n  }\n\n  return array\n}\n\nconst cloneFunction = func => {\n  const bodyReg = /(?<={)(.|\\n)+(?=})/m\n  const paramReg = /(?<=\\().+(?=\\)\\s+{)/\n\n  const funcString = func.toString()\n\n  if (func.prototype) {\n    const param = paramReg.exec(funcString)\n    const body = bodyReg.exec(funcString)\n    if (!body) return null\n    if (!param) return new Function(body[0])\n    const args = param[0].split(\",\")\n    return new Function(...args, body[0])\n  } else {\n    // 箭头函数没有 prototype\n    return eval(funcString)\n  }\n}\n\nconst cloneOtherType = (target, type) => {\n  const Ctor = target.constructor\n\n  switch (type) {\n    case boolTag:\n    case stringTag:\n    case numberTag:\n    case dateTag:\n    case errorTag:\n      return new Ctor(target)\n    case regTag:\n      const re = /\\w*$/\n      const reg = new target.constructor(target.source, re.exec(target))\n      reg.lastIndex = target.lastIndex\n      return reg\n    case FunTag:\n      return cloneFunction(target)\n    // Symbols 以及没有包装类型了, 面试的时候可以提一下可以用 Object.getOwnPropertySymbols() copy symbol\n    default:\n      return null\n  }\n}\n\nconst deepClone = (target, map = new WeakMap()) => {\n  if (\n    (typeof target !== \"object\" && typeof target !== \"function\") ||\n    target === null\n  )\n    return source\n\n  const type = Object.prototype.toString.call(target)\n  let cloneTarget\n\n  if (!deepTag.includes(type)) return cloneOtherType(target, type)\n  const Ctor = target.constructor\n  cloneTarget = new Ctor()\n\n  // 处理循环引用\n  if (map.has(target)) return map.get(target)\n  map.set(target, cloneTarget)\n\n  // 处理 set\n  if (type === setTag) {\n    target.forEach(value => {\n      cloneTarget.add(deepClone(value))\n    })\n    return cloneTarget\n  }\n\n  // 处理 map\n  if (type === mapTag) {\n    target.forEach((value, key) => {\n      cloneTarget.set(key, deepClone(value))\n    })\n    return cloneTarget\n  }\n\n  const keys = arrayTag ? undefined : Object.keys(target)\n\n  forEach(keys || target, (value, key) => {\n    if (keys) {\n      key = value\n    }\n    cloneTarget[key] = deepClone(target[key], map)\n  })\n\n  return cloneTarget\n}
\n

延伸问题

\n","timeToRead":3,"frontmatter":{"title":"一文了解深拷贝","date":"December 21, 2023","spoiler":null},"fields":{"slug":"/deep-clone/"}}},"pageContext":{"slug":"/deep-clone/","previous":{"fields":{"slug":"/learn-browser/render/"},"frontmatter":{"title":"渲染流程"}},"next":{"fields":{"slug":"/color-transparency-hexadecimal-comparison-table/"},"frontmatter":{"title":"颜色透明度16进制对照表"}}}},"staticQueryHashes":["3649515864","63159454"]}