深拷贝和浅拷贝

最新推荐文章于 2024-11-30 08:15:00 发布

zuo_zuo_blog

最新推荐文章于 2024-11-30 08:15:00 发布

阅读量268

点赞数

分类专栏：ＪａｖａＳｃｒｉｐｔ文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/zuo_zuo_blog/article/details/123275199

版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章

订阅专栏

这篇博客探讨了JavaScript中浅拷贝与深拷贝的概念，并提供了两种实现方式。浅拷贝函数`shallowClone`用于复制对象的表面属性，而深拷贝函数`deepClone`通过递归实现了完整的层级复制。此外，还介绍了一个`createData`函数，它允许创建具有指定深度和广度的数据结构。最后，`cloneLoop`函数作为解决递归导致的栈溢出问题的解决方案提出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//浅拷贝
function shallowClone(data) {
  var cloneData ={}
  for(var i in data) {
    if(data.hasOwnProperty(i)) {
      cloneData[i] = data[i]
    }
  }
  return cloneData
}

//深拷贝 浅拷贝+递归
function deepClone(data){
  var cloneData ={}
  for(var i in data) {
    if(data.hasOwnProperty(i)){
      if(typeof data[i] == 'object') {   //Object.prototype.toString.call(data[i]) == '[Object Object]'
        cloneData[i] = deepClone(data[i])  //递归
      } else {
        cloneData[i] = data[i]
      }
    }
  }
  return cloneData
}

//指定深度和广度
function createData(deep, breadth) {
  var data = {}
  var temp = data
  for(var i=0;i<deep;i++){
    temp = temp['data'] = {}
    for(var j=0;j<breadth;j++) {
      temp[j] = j
    }
  }
  return data
}

createData(1, 3); // 1层深度，每层有3个数据 {data: {0: 0, 1: 1, 2: 2}}
createData(3, 0); // 3层深度，每层有0个数据 {data: {data: {data: {}}}}

JSON.parse(JSON.stringify(data))

//破解递归爆栈
function cloneLoop(x){
  const root = {}
  const loopList = [{
    parent: root,
    key: undefined,
    data: x
  }]
  while(loopList.length) {
    //深度优先
    const node = loopList.pop()
    const parent = node.parent;
    const key = node.key;
    const data = node.data;
    // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
    let res = parent;
    if(typeof key !== 'undefined'){
      res = parent[key] = {}
    }
    for(var i in data) {
      if(typeof data[i] === 'object'){
        loopList.push({
          parent: res,
          key: i,
          data: data[i]
        })
      }else{
        res[i] = data[i]
      }
    }
  }
  return root
}