js对象深度克隆

js对象深度克隆

为什么要深度克隆对象？嗯，我不晓得我不知道，不要问我，你居然问这种问题

1. 上深度克隆之前先来研究研究其它的克隆方式，如果你急要直奔主题那就往下滑到最后去看深度克隆

• ES6语法糖的方式

  var obj={
       uname:'小明',
       jub:{
         age:123,
         obj:{
           uname:12
         }
       }
   }
   var obj1={...obj}
   obj1.jub.obj.uname='嘿嘿'
   console.log(obj);
   console.log(obj1);

• Object.assign合并对象的方式

	var obj={
       uname:'小明',
       jub:{
         age:123,
         obj:{
           uname:12
         }
       }
   }
   var obj1=Object.assign({},obj)
   obj1.jub.obj.uname='嘿嘿'
   console.log(obj);
   console.log(obj1);

• JSON.stringify的方式

var obj = {
        uname: '小明',
        jub: {
          age: 123,
          obj: {
            uname: 12,
          },
        },
        fun:function(){
          console.log('My is xiaoming');
        }
      }
      var obj1 = JSON.parse(JSON.stringify(obj))
      obj1.jub.obj.uname = '嘿嘿'
      console.log(obj)
      console.log(obj1)

来总结一波上面的三种方式，

• es6语法糖和合并对象的方法都只能浅拷贝, 当出现对象中有多层级时只会独立拷贝第一层
• json的方式虽然能实现深度拷贝, 但是如果对象中有出现方法的情况下 方法无法进行克隆 会被踢出
• 当前可能还有其它的方法我没想到

现在来看看深度克隆，不废话直接上代码

	  // 判断数据类型
      const getObjType = (obj) => {
        var toString = Object.prototype.toString
        var map = {
          '[object Boolean]': 'boolean',
          '[object Number]': 'number',
          '[object String]': 'string',
          '[object Function]': 'function',
          '[object Array]': 'array',
          '[object Date]': 'date',
          '[object RegExp]': 'regExp',
          '[object Undefined]': 'undefined',
          '[object Null]': 'null',
          '[object Object]': 'object',
        }
        if (obj instanceof Element) {
          return 'element'
        }
        return map[toString.call(obj)]
      }
       // 深度克隆
      const deepClone = (data) => {
        var type = getObjType(data)
        var obj
        if (type === 'array') {
          obj = []
        } else if (type === 'object') {
          obj = {}
        } else {
          // 不再具有下一层次
          return data
        }
        if (type === 'array') {
          for (var i = 0, len = data.length; i < len; i++) {
            obj.push(deepClone(data[i]))
          }
        } else if (type === 'object') {
          for (var key in data) {
            obj[key] = deepClone(data[key])
          }
        }
        return obj
      }
	// 这样就可以调用克隆了，
      var obj = {
        uname: '小明',
        jub: {
          age: 123,
          obj: {
            uname: 12,
          },
        },
        fun:function(){
          console.log('My is xiaoming');
        }
      }
      var obj1=deepClone(obj)

什么？你居然问我为什么要单独定义一个getObjType 方法来判断类型？

• 如果你问了你在看下面的内容，你没问就当作没看到
  因为：typeof {}，typeof []，typeof null 都等于object，你是不是会觉得typeod {}==object，typeof []==array 天真了散，有朋友可能会说为什么不用instanceof来判断数组或者用Array.isArray()来判断，哎 我就不，看你气不气。🤭

又想白嫖？还不点个赞