js深拷贝三种方法

使用递归函数实现深拷贝

javascript 复制代码
const obj = {
      name: 'zzz',
      age: 18,
      hobby: ['篮球', '足球'],
      family: {
        baby: 'baby'
      }
    }
// 深拷贝   数组  对象  一定要先筛数组再筛对象,因为万物皆对象
    function deepcopy(newObj, oldObj) {
      for (const k in oldObj) {
        // 判断值是否属于array类
        if (oldObj[k] instanceof Array) {
          // 先将newo中hobby置空  newObj[hobby]=[]
          newObj[k] = []
          // 然后再将旧数据的数组值拷贝给新的数组值  newObj[hobby]=oldObj[hobby]
          deepcopy(newObj[k], oldObj[k])
        } else if (oldObj[k] instanceof Object) {
          newObj[k] = {}
          deepcopy(newObj[k], oldObj[k])
        } else {
          //newObj[k] ===newObj.name  给对象添加新属性
          newObj[k] = oldObj[k]
        }
      }
    }
 const newo = {}
    deepcopy(newo, obj)
    console.log(newo);
    newo.age = 11
    newo.hobby[0] = '羽毛球'
    newo.family.baby = 'bbbb'
    console.log(obj);

使用lodash的_.cloneDeep方法实现深拷贝

官网下载lodash https://www.lodashjs.com/

javascript 复制代码
//引用
  <script src="./lodash.min.js"></script>
 // lodash库
    const obj_l = {
      name: 'zzz',
      age: 18,
      hobby: ['篮球', '足球'],
      family: {
        baby: 'baby'
      }
    }
    const o_l = _.cloneDeep(obj_l)

    o_l.age = 11
    o_l.hobby[0] = '羽毛球'
    o_l.family.baby = 'bbbb'
    console.log(o_l);
    console.log(obj_l);

使用json的JSON.parse()JSON.stringify()方法实现深拷贝

javascript 复制代码
    // json深拷贝
    const obj_j = {
      name: 'zzz',
      age: 18,
      hobby: ['篮球', '足球'],
      family: {
        baby: 'baby'
      }
    }
    // /JSON.stringify  将对象转为json字符串
    const o_j = JSON.parse(JSON.stringify(obj_j))
    o_j.age = 11
    o_j.hobby[0] = '羽毛球'
    o_j.family.baby = 'bbbb'
    console.log(o_j);
    console.log(obj_j);
相关推荐
brzhang几秒前
MCP A2A Skills 这三个词搞懂了 再去写你的智能体
前端·后端·架构
灰灰勇闯IT1 分钟前
RN原生模块交互:打通JS与原生的桥梁
开发语言·javascript·交互
LYFlied3 分钟前
浅谈跨端开发:大前端时代的融合之道
前端·flutter·react native·webview·大前端·跨端开发·hybrid
LYFlied3 分钟前
浅谈前端构建工具核心理解&&主流工具对比
前端·webpack·软件构建·rollup·vite·开发工具·工程化
weixin_3077791317 分钟前
Jenkins jQuery3 API 插件详解:赋能插件前端开发的利器
运维·开发语言·前端·jenkins·jquery
LinDon_26 分钟前
【企业微信快速登录适配 Chrome/Edge 142+】
前端·chrome·企业微信
JosieBook33 分钟前
【Vue】google chrome中安装vue_dev_tools.crx的时候提示“无法安装扩展程序,因为它使用了不受支持的清单版本。”
前端·vue.js·chrome
前端不太难35 分钟前
RN 性能优化:列表滚动掉帧、卡顿怎么办?
前端·react native·性能优化
亿元程序员36 分钟前
祖传项目二开快上线了,却还有很多旧的资源,怎么办?
前端
GIS学姐嘉欣38 分钟前
0帧起手《Vue零基础教程》,从前端框架到GIS开发
前端·vue.js·前端框架·gis