深拷贝

方案一：JSON序列化和解析

比较简单的深拷贝方案，但仅支持基本数据类型和部分引用数据类型

其不支持的类型或情况

  • Symbol
  • Function
  • 循环引用(遇到此情况会报错)
  1. const s1=Symbol()
  2. const obj={
  3.   name:'rv',
  4.   age:20,
  5.   /* Function */
  6.   running:()=>{console.log('running')},
  7.   /* Symbol */
  8.   [s1]:'symbol',
  9.   symbol:s1
  10.   /* Array */
  11.   arr:[1,2,3,4]
  12.   /* Object */
  13.   friend:{ name:'why',age:18}
  14. }
  16. const copyObj=JSON.parse(JSON.stringify(obj));
  17. console.log(copyObj)
  18. /*
  19. Object{
  20.     name: "rv"
  21.     age: 20
  22.     arr: (4) [1, 2, 3, 4]
  23.     friend: {name: 'why', age: 18}
  24. }
  25. */

方案二：手动实现深拷贝

  1. function deepClone(originValue，map=new WeakMap()){
  3.   /* Set、Map、WeakSet、WeakMap的拷贝处理 */
  4.   if(originValue instanceof Set){
  5.     return new Set([...originValue])
  6.   }
  7.   if(originValue instanceof Map){
  8.     return new Map([...originValue])
  9.   }
  10.   if(originValue instanceof WeakSet||originValue instanceof WeakMap){
  11.     return originValue
  12.   }
  14.   /* Symbol的拷贝处理 */
  15.   if(typeof originValue==='symbol'){
  16.     if(Symbol.keyFor(originValue)==null){
  17.       return Symbol()
  18.     }else{
  19.       return originValue
  20.     }
  21.   }
  23.   /* 基础数据类型和Function的拷贝处理 */
  24.   if(!isObject(originValue)||typeof originValue==='function'){
  25.     return originValue
  26.   }
  28.   /* 检测数组是否存在循环引用 */
  29.   if(map.has(originValue)){
  30.     return map.get(originValue)
  31.   }
  33.   /* 数组和普通对象的拷贝处理 */
  34.   const newObject=Array.isArray(originValue)?[]:{}
  36.   /* String key的拷贝处理 */
  37.   for(const key in originValue){
  38.     newObject[key]=deepClone(originValue[key],map)
  39.   }
  41.   /* Symbol key的拷贝处理 */
  42.   const symbols=Object.getOwnPropertySymbols(originValue)
  43.   for(const key of symbols){
  44.     newObject[key]=deepClone(originValue[key],map)
  45.   }
  47.   map.set(originValue,newObject)
  48.   return newObject
  49. }
  51. function isObject(value){
  52.   const valueType=typeof value
  53.   return (value!==null)&&(valueType==='object'||valueType==='function')
  54. }