zoukankan      html  css  js  c++  java
  • js中的浅拷贝和深拷贝

    1.概念

    浅拷贝:是将一个对象的属性值复制到另一个对象,如果有的属性的值为引用类型的话,那么会将这个引用的地址复制给对象,因此,两个对象会有同一个引用类型的引用,浅拷贝可以使用object.assign和展开运算符(将一个数组转为用逗号分隔的参数序列--(...))来实现。

    深拷贝:是将一个对象的属性值复制到另一个对象,如果遇到属性值为引用类型的时候,它新建一个引用类型并将对应的值复制给它,因此,对象获得一个新的引用类型而不是嘴个元祐类型的引用。深拷贝对于一些对象可以使用json的两个函数(stringify(),parse())来实现,但是由于json的对象格式化比js的对象格式化更加严格,所以如果属性值里边出现函数或者symbol类型的值时,会转化失败。

    2.实现方式

    浅拷贝:

    1.Object.assign

    const a = { a: 1 ,b:2};
    const b = { b: 4 };
    const c = { c: 3 };
    const obj = Object.assign({}, a, b, c);
    obj // {a:1, b:4, c:3}
    

    2.for in 循环遍历

    function easyCopy(object) {
    
       // 只拷贝对象
       if (!object || typeof object !== "object") return;
    
       // 根据 object 的类型判断是新建一个数组还是对象
       let newObject = Array.isArray(object) ? [] : {};
    
       // 遍历 object,并且判断是 object 的属性才拷贝
       for (let key in object) {
         if (object.hasOwnProperty(key)) {
           newObject[key] = object[key];
         }
       }
    
       return newObject;
     }

    深拷贝:

    1.json

    function deepClone(obj) {
        let tojson = JSON.stringify(obj);//将对象转换为json字符串形式
        let result = JSON.parse(tojson);//将转换而来的字符串转换为原生js对象
        return result;
    };
    
    let obj1 = {
        xiao: {
            age: 20,
            name: 111
        },
        zhang: {
            age: 21,
            name: 222
        }
    };
    
    let test = deepClone(obj1);
    console.log(test);

    2.for in 循环遍历

     function deepCopy(object) {
    
       if (!object || typeof object !== "object") return;
    
       let newObject = Array.isArray(object) ? [] : {};
    
       for (let key in object) {
         if (object.hasOwnProperty(key)) {
           newObject[key] = typeof object[key] === "object" ? deepCopy(object[key]) : object[key];
         }
       }
    
       return newObject;
     }
    

      

  • 相关阅读:
    关于自链接的视图的更新
    JavaScript局部变量与全局变量2
    减少IDE中的新建项
    whitespace对select无效
    学习摘录21
    让我记得写文档的设置
    本地连接不见了
    jquery 学习笔记
    jquery用load引入页面
    android笔记
  • 原文地址:https://www.cnblogs.com/susu2020/p/12517299.html
Copyright © 2011-2022 走看看