Web前端之路让前端飞程序员

js对象的克隆

2017-10-08  本文已影响28人  tiancai啊呆

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

浅克隆

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));
上一篇下一篇

猜你喜欢

热点阅读