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

    一、对象的深拷贝与浅拷贝

      1.递归的方法实现深拷贝

    function deepCopy(source){
        if(!isObject(source)) return source;
        let target = Array.isArray(source)?[]:{};
        for(var k in source){
            if(soucre.hasOwnProperty(k)){
                if(typeof source[k] =='object'){
                    target[k] = deepCopy(source[k]);
                }else{
                    target[k] = source[k]
                }
            }
        }
        return target;
    }
    function isObject(obj){
        return typeof obj==='object' && obj!==null
    }
    var obj1 = deepCopy(obj);
    obj1.name='meituan';
    obj1.age = 7;
    obj1.others[2]=3;
    console.log(JSON.stringify(obj1));
    console.log(JSON.stringify(obj))
    //{"name":"meituan","age":7,"others":[1,2,3]}
    //{"name":"youbei","age":9,"others":[1,2]}

      2.通过JSON对象实现深拷贝 

    function deepClone2(obj) {
      let _obj = JSON.stringify(obj),
      return JSON.parse(_obj);
    }

      注意:无法实现对象中方法的深拷贝,处理不了函数

      3.通过Object.assign()拷贝(当对象只有一级属性为深拷贝;当对象中有多级属性时,二级属性后就是浅拷贝)

    var obj = {
      name:'youbei',
      age:9,
    }
    var obj1 = Object.assign({},obj);
    obj1.name='meituan';
    obj1.age = 7;
    console.log(obj.name,obj.age); 

      Object.assign 也算是浅拷贝,也就是如果源对象里的某些key对应的值是object类型,则只会拷贝对此object类型数据的引用,也就是说会多处共用一个储存空间,一个地方改变了,其他地方在取值也就变了。

    var obj = {
      name:'youbei',
      age:9,
      others:[1,2],
    }
    var obj1 = Object.assign({},obj);
    obj1.name='meituan';
    obj1.age = 7;
    obj1.others[2]=3;
    console.log(JSON.stringify(obj1));
    //{"name":"meituan","age":7,"others":[1,2,3]}
    console.log(JSON.stringify(obj));
    //{"name":"youbei","age":9,"others":[1,2,3]}

    二、 数组的深拷贝与浅拷贝

      1. concat(arr1, arr2,....)       仅适用于对不包含引用对象的一维数组的深拷贝

        注意:当数组中的元素均为一维是深拷贝 数组中元素一维以上是值的引用

      2.slice(idx1, idx2)                 仅适用于对不包含引用对象的一维数组的深拷贝

        1.没有参数是拷贝数组

        2.只有一个参数是从该位置起到结束拷贝数组元素

        3.两个参数,拷贝从起始位置到结束位置的元素(不包含结束位置的元素:含头不含尾)

        注意:当数组中的元素均为一维是深拷贝,数组中元素一维以上是值的引用

      3.es6方法                              仅适用于对不包含引用对象的一维数组的深拷贝

        var a=[1,2,3]
        var b=[...a];
        b.push(4);
        console.log(b);//1,2,3,4
        console.log(a)//1,2,3
  • 相关阅读:
    mark
    ON DUPLICATE KEY UPDATE重复插入时更新
    lnmp上传文件
    websoket
    Nginx 和 Php 优化
    Nginx常见问题
    Keepalived 高可用
    https ; 及https证书
    Nginx动静分离;资源分离;rewrite重写、跳转、伪静态、规则、日志
    nginx负载均衡会话保持;四层负载均衡;端口转发
  • 原文地址:https://www.cnblogs.com/yxkNotes/p/13936770.html
Copyright © 2011-2022 走看看