js对象的克隆

作者: tiancai啊呆 | 来源:发表于2017-10-08 10:46 被阅读28次

    在工作中对对象的克隆在所难免,现在就总结一下克隆对象的方法。

    浅克隆

    function shallowClone(obj) {
      var newObj = {}
      for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
          newObj[i] = obj[i]
        }
      }
      return newObj
    }
    // 假设我们要克隆对象o
    var obj = {
      name: "lihua",
      age: 46
    }
    var o = {
      name: "liming",
      age: 23,
      say: function() {
        console.log(this.name + this.age + "岁")
      },
      friends: ["lisi", "zhangsan"],
      family: {
        father: obj
      },
      reg: /\d/i
    }
    var cloneObj = shallowClone(o)
    o.friends.push("wangwu")
    console.log(o.friends === cloneObj.friends)  //true
    

    深度克隆

    //判断值的数据类型
    function getValueType(value) {
      var type = Object.prototype.toString.call(value)
      type = type.slice(8, -1)
      return type
    }
    
    function deepClone(obj) {
      var newObj = {}
      for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
          if (getValueType(obj[i]) == "Object") {
            newObj[i] = deepClone(obj[i])
          } else if (getValueType(obj[i]) == "Array") {
            newObj[i] = obj[i].slice()
          } else {
            newObj[i] = obj[i]
          }
        }
      }
      return newObj
    }
    var cloneObj = deepClone(o)
    o.friends.push("wangwu")
    console.log(o.friends === cloneObj.friends)  //false
    console.log(o.friends)     //  ["lisi", "zhangsan", "wangwu"]
    console.log(cloneObj.friends)    //["lisi", "zhangsan"]
    //对o的操作并不会影响cloneObj 
    

    其实除了以上的方法,还有一种非常简单的克隆对象方法,但是这种方法有很大的局限性,只能克隆符合json格式的数据,像函数就无法克隆。

    var newObj=JSON.parse(JSON.stringify(obj));
    

    相关文章

      网友评论

        本文标题:js对象的克隆

        本文链接:https://www.haomeiwen.com/subject/doysyxtx.html