js深拷贝,删除复制添加节点dom

本文介绍在DOM中绑定循环数据的方法,探讨深拷贝的实现,包括使用JSON和递归函数进行复制,以及如何在Vue.js中操作数组来添加、删除节点。同时,提供了lodash _.cloneDeep()作为深拷贝的备选方案。

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

业务如下:

dom中绑定循环数据

深拷贝复制:

copyThisDom(val, index) {
      const arr = JSON.parse(JSON.stringify(this.treatmentMethodData[index]));
}

删除节点:

// 清除某一条数据val代表选定的当前数据,index代表数据下标
    closeThisDom(val, index) {
      console.log('clean:', index)
      this.treatmentMethodData.splice(index, 1)
    },

添加节点(直接操作数组对象,会有其他添加方式):

this.treatmentMethodData.push({
        injurySite: '', // 伤病部位
        injuryChildSite: '', // 子级部位
        treatmentTypeValue: '', // 治疗类型
        treatmentItemValue: [], // 治疗项
        fileList: [], // 上传文件列表
        fileLists: [], // 保存数据
        fileId: '',
        fileNames: '',
        treatmentItemOptions: [], // 治疗项option
        duration: '', // 时长
        principal: '', // 负责人
        principalOptions: [], // 负责人option
        selectDate: '', // 选择日期
        remark: ''// 备注
      })

如果是较复杂的对象需要用递归拷贝,详见:https://www.jianshu.com/p/f4329eb1bace

递归拷贝:

// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
    // 定义一个变量
    let result;
    // 如果当前需要深拷贝的是一个对象的话
    if (typeof target === 'object') {
    // 如果是一个数组的话
        if (Array.isArray(target)) {
            result = []; // 将result赋值为一个数组,并且执行遍历
            for (let i in target) {
                // 递归克隆数组中的每一项
                result.push(deepClone(target[i]))
            }
         // 判断如果当前的值是null的话;直接赋值为null
        } else if(target===null) {
            result = null;
         // 判断如果当前的值是一个RegExp对象的话,直接赋值    
        } else if(target.constructor===RegExp){
            result = target;
        }else {
         // 否则是普通对象,直接for in循环,递归赋值对象的所有值
            result = {};
            for (let i in target) {
                result[i] = deepClone(target[i]);
            }
        }
     // 如果不是对象的话,就是基本数据类型,那么直接赋值
    } else {
        result = target;
    }
     // 返回最终结果
    return result;
}
    let obj1 = {
        a: {
            c: /a/,
            d: undefined,
            b: null
        },
        b: function () {
            console.log(this.a)
        },
        c: [
            {
                a: 'c',
                b: /b/,
                c: undefined
            },
            'a',
            3
        ]
    }
    let obj2 = deepClone(obj1);
    console.log(obj2);

其他:lodash  _.cloneDeep()

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木易66丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值