JS封装深拷贝函数

关注

原创最新推荐文章于 2026-05-15 09:10:25 发布 478 阅读 AI 写同款· GEO 优化 ›

JavaScript - 浅拷贝 / 深拷贝（函数封装）前言如果你只想知道如何实现深浅拷贝，请直接跳过前言，移步代码部分。今天开发小程序，需求是实现一个长按管理应用的功能(似支付宝应用管理功能) ，当我做到了用户可以添加或移除应用时，发现直接操作改变了原数组（即应用列表数据），导致取消功能无法完成（因为需要对比原数组，但已经被改变了）。解决办法就是将初始数组进行拷贝，让用户操作副本。这样取消按钮的恢复与保存功能就能实现。浅拷贝仅仅复制对象的引用，而不是对象本身。浅拷贝的实现方法比较简单，下面介绍 2 个，都可以直接使用。一、简单复制阅读详情

Object.assign只能深拷贝第一层的数据，如果有多层数据就会出现浅拷贝的情况

// 处理深拷贝问题 一个对象里面可能会出现多种情况，
let a = { 
    a:1,
    b:[1,2,3,{a:1},[1,2]],
    c:{c1:1,c2:2,c3:{cc1:1}},
    d:function(){
        console.log(1)
    },
    e:[{a:1},{b:1}],
    f:[{a:1},{b:1},[1,2]],
}
let b = AssignObject(a)
b.a = 2
b.b[0] = 2
b.b[3] = {a:2}
b.b[4] = [2,2]
b.c.c1 = 2
b.c.c3.cc1 = 2
b.d = function(){console.log(2)}
b.e[0].a = 2
b.f[0].a = 2
b.f[2] = [2,2]
console.log(a,b)

AssignObject (obj) {
    var target = obj instanceof Array ? [] : {}
    if(obj instanceof Array) {
      obj.forEach(item=>{
        if(item instanceof Object && typeof item !=='function'){
          target.push(AssignObject(item))
        } else {
          target.push(item)
        }
      })
      return target
    }
    for( var i in obj){
      // if(obj[i] instanceof Array){
      //   target[i] = AssignObject(obj[i])
      // } else if(obj[i] instanceof Object && !(obj[i] instanceof Array) && typeof obj[i] !=='function') {
      //   target[i] = AssignObject(obj[i])
      // } else {
      //   target[i] = obj[i]
      // }
      if(obj[i] instanceof Object && typeof obj[i] !=='function') {
        target[i] = AssignObject(obj[i])
      } else {
        target[i] = obj[i]
      }
    }
    return target
  }