对象的拷贝之深拷贝deepClone

news/2024/7/19 14:35:03 标签: js, javascript

深拷贝与浅拷贝

浅拷贝:主要是引用类型的的值是赋值一个堆地址,浅拷贝是赋值同一个地址,从而改变时会同时改变
深拷贝:将其复制过来,并创建一个新的地址,从而互不干扰

深拷贝的方法

  1. JSON转换
javascript">var deepObj= JSON.parse(JSON.stringify(obj))
  1. 递归函数
javascript">const obj1 = {
    a: 1,
    b: 2,
    fun: function() {
        console.log(2222);
    },
    c: {
        c1: 3,
        c2: 4
    }
}

const obj2 = obj1;
const obj3 = deepClone(obj1);
obj2.a = '2a';
obj3.a = '3a';

console.log(obj1.a); // 2a
console.log(obj2.a); // 2a
console.log(obj3.a); // 3a


function deepClone(obj) {
    // obj = null 并且不是对象或数组的时候直接返回为空
    if (typeof obj !== 'object' || typeof obj == 'null') {
        return obj;
    }
    // 初始化返回结果
    let result = '';
    if (obj instanceof Array) { // 判断是数组还是对象进行定义
        result = [];
    } else {
        result = {};
    }
    for (let key in obj) {
        // 保证key 不是原型链的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用 (重点)
            result[key] = deepClone(obj[key]);
        }
    }
    return result;
}

http://www.niftyadmin.cn/n/1551536.html

相关文章

js中的作用域与闭包的使用

作用域分为三种: 全局作用域函数作用域块级作用(es6中的let/const) (一)闭包closure 闭包的作用:函数执行形成的私有作用域,保护里面的变量不受外界干扰的机制 闭包:自由变量的查…

git的指令使用

git的安装 - 基于Windows (一)从Git官网直接下载安装程序,然后按默认选项安装即可。 安装完成后,在开始菜单里找到“Git”->“Git Bash”,弹出一个类似命令行窗口的东西,就说明Git安装成功&#xff01…

性能优化 - 防抖(debounce)与节流(throttle)

项目中,反复的点击按钮或连续的触发事件,会导致响应跟不上触发频率或资源反复请求浪费的问题(例:ajax访问);这种问题在项目中很常见,处理不当或放任不管就会容易引起浏览器卡顿的不好用户体验的问题;接口重…

判断俩个对象是否相等

比较obj1 与obj2对象是否相等,不能使用 进行比较,俩个对象的对应的地址是不相同 // 俩个对象进行判断是否相等 const obj1 {a: 100,b: 200} const obj2 {a: 100, b: 200} console.log(obj1 obj2) // false全相等方法的书写 const obj1 {a: 100,b:…

数组的处理应用

(一)数组的创建 Array 构造函数:ES6新增的用于创建数组的静态方法: from() 和 of() from() 用于将类数组结构转换为数组实例 of() 用于将一组参数转换为数组实例 // 字符串会被拆分为单字符数 组 console.log(Array.from("wendy")); // [w, …

div实现上下左右居中的方法

定宽高的自适应居中 .dialoge { // dialoge的固定宽高显示position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 1rem;height: 1rem;margin: auto; } .content {background: #ccc;text-align: center;line-height: 1rem;border-radius: .1rem; } <div class&quo…

position:absolute绝对定位的使用

position定位的使用 相对定位&#xff08;relative&#xff09;&#xff1a;相对于块级元素&#xff08;或行内块&#xff09;自身位置进行定位&#xff1b; 绝对定位&#xff08;absolute&#xff09;&#xff1a;绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的…

设计模式 - 策略模式验证提交的表单的使用

校验表单的多种规则 // checkInfo.js 校验表单的文件 // 策略对象 const strategies {// 输入的内容不能为空isNoEmpty(value, errorMsg) {if (value ) return errorMsg;},// 校验姓名的格式isCorrectName(value, errorMsg) {const regName /^(?!.*?[\u3000-\u303F\u4DC0…