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对象克隆

    原始数据类型(5种):undefined null number string boolean 引用数据类型(1种...

  • js对象的克隆

    在工作中对对象的克隆在所难免,现在就总结一下克隆对象的方法。 浅克隆 深度克隆 其实除了以上的方法,还有一种非常简...

  • js对象深度克隆

    通用克隆方法 第一种方法简单粗暴,先将对象序列化再解析回来,不过要注意对象中如果有函数function则不能正确复...

  • js与ES6对象常用方法区别

    js与ES6对象常用方法区别js中对象方法 Object.assign//用于克隆 Object.is()…用于判...

  • ES6时代,你真的会克隆对象吗?

    原文:你真的会克隆对象吗 开始之前 在开始聊克隆之前,我们还是先来看看js数据类型。js的数据类型分为基本数据类型...

  • js代码题

    js对象的深度克隆 js数组去重 js常用设计模式的实现思路,单例,工厂,代理,装饰,观察者模式等

  • 在JS中动态创建,删除,克隆元素

    在JS中动态创建,删除,克隆元素 createElement创建元素 createTextNode创建文本对象 a...

  • 对象的克隆

    对象的克隆 对象地址的引用: 以上属于对象地址的引用: 一、对象的浅克隆 Person: Demo: 对象浅克隆要...

  • PHP中对象的复制

    潜克隆(浅拷贝) 只能克隆对象的"非对象非资源"数据。但如果对象中属性存储的是对象类型,就可以看到克隆没有克隆对象...

  • js公共函数总结

    字节大小转换 Object 对象的深度克隆(深拷贝) 时间格式化 js利用空对象作为中介实现继承 需求:get请求...

网友评论

    本文标题:js对象的克隆

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