2rever的前端小站

js里的对象的深浅拷贝

Word count: 350 / Reading time: 1 min
2018/09/30 Share

众所周知,js里面对象及其数组不是基本数据类型,当复制操作的时候我们不会复制一个值出来,而是复制一个对这个值的指向,当我们有复制对象需求的时候,可以借助lodash上相应的函数,或者使用一下方法实现。

  • 浅拷贝指的是当对象有多层的时候只复制第一层,子对象还是复制的指向。

  • 深拷贝指的是连同子对象都是一个全新的值。

  • 浅拷贝

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function shallowCopy(src) {
    var dst = {}
    for(var prop in src) {
    if(src.hasOwnProperty(prop)) {
    dst[prop] = src[prop]
    }
    }
    return dst
    }
  • 深拷贝

  • 这种方式是最便捷的深拷贝方式,但是原型链会遭到破坏,原有对象的原型会丢失。

    1
    JSON.parse(JSON.stringify(obj))
  • 自己实现深拷贝的方式可避免上述的问题

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function deepCopy(src) {
    // 定义一个对象,用来确定当前的参数是数组还是对象
    var objArray = Array.isArray(obj) ? [] : {}
    // 如果obj存在,且类型为对象
    if (obj && typeof obj === "object" ) {
    for (key in obj) {
    if (obj.hasOwnProperty(key)) {
    // 如果obj的子元素是对象,递归操作
    if (obj[key] && typeof obj[key] === "object") {
    objArray[key] = deepCopy(obj[key])
    }else {
    // 如果不是,直接赋值
    objArray[key] = obj[key]
    }
    }
    }
    }
    return objArray //返回新的对象
    }
CATALOG