加载中...
  • 浅拷贝和深拷贝

    首先我们来说下区别:

    浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用
    深拷贝拷贝多层, 每一级别的数据都会拷贝

    那么我们来用代码分别实现浅拷贝与深拷贝

    浅拷贝

    例1:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var obj = {
    id: 1,
    name: 'andy',
    msg: {
    age: 18
    }
    };
    var o = {};
    for (var k in obj) {
    // k 是属性名 obj[k] 属性值
    o[k] = obj[k];
    }
    console.log(o)

    这是ES6之前的写法,Object.assign(target, …sources) es6 新增方法可以浅拷贝
    例2:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var obj = {
    id: 1,
    name: 'andy',
    msg: {
    age: 18
    }
    };
    var o = {};
    Object.assign(o, obj); // 一行代码完美解决
    // 注: 这里第一个参数是所需要接收拷贝的对象,后面的参数是被拷贝的对象

    深拷贝

    例1:用递归实现深拷贝

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    let obj = {
    name:'张三',
    age:22,
    arr:['1',2],
    arrObj:{
    name:'李四',
    sex:'女'
    }
    }

    let objs = {}; // 创建一个对象用于接收

    // 封装函数 第一个参数:拷贝方 第二个参数被拷贝方
    function deepCopy(obj1,obj2){
    for (let v in obj2) {
    // 我们需要判断属性值属于哪种数据类型

    let item = obj2[v]; // 获取属性值

    if(item instanceof Array){ // 判断这个值是否是数组
    obj1[v] = []; // 拷贝方新建空数组
    deepCopy(obj1[v],item)
    }
    else if(item instanceof Object){ // 判断这个值是否是对象
    obj1[v] = {}; // 拷贝方新建空对象
    deepCopy(obj1[v],item);
    }
    else{
    // 属于简单数据类型
    obj1[v] = item;
    }
    }
    }
    deepCopy(objs,obj) //调用
    console.log(objs)

    例2:JSON.parse(JSON.stringify()) 这种方式我觉得算是最简单的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    let obj1 = {
    name:'张三',
    age:22,
    arr:['1',2],
    arrObj:{
    name:'李四',
    sex:'女'
    }
    }

    let obj2 = {}; // 创建一个对象用于接收

    function deepCopy(obj){
    let _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
    return objClone
    }
    obj2 = deepCopy(obj1)
    console.log(obj2)

    需要注意的是:这种拷贝方法不可以拷贝一些特殊的属性(例如正则表达式,undefine,function)

    工作中看自己实际需求,我这里写的也可能某些地方有缺陷,欢迎大佬指教

    上一篇:
    微信小程序 获取元素高度(获取元素节点信息)
    下一篇:
    JavaScript 中 call()、apply()、bind() 的用法与区别
    本文目录
    本文目录