鍍金池/ 問答/HTML/ js如何進行多層級的深度拷貝?

js如何進行多層級的深度拷貝?

需求是這樣的,有一個對象a

var a = {
          a: '1',
          b: '2',
          d: {
               q: {
                    r: '3'
                  },
                w: {
                     r: '4'
                  }
             }
         }

然后有一個數(shù)組,數(shù)組每個子項是在對象a的基礎(chǔ)上,多一個a.d的每一個子項,結(jié)果這樣的

b = [{
       a: '1',
       b: '2',
       c: {
            d: {
                 r: '3'
               }
          }},
      {
        a: '1',
        b: '2',
        c: {
             d: {
                  r: '4'
                }
           }
       }]

這個應(yīng)該是深度拷貝的問題吧,要怎么實現(xiàn)呢,試了JSON.parse(JSON.stringify())的方法發(fā)現(xiàn)行不通,r的值都會是4,求大神幫忙解答下

回答
編輯回答
局外人

可以看一下lodash插件 ,里面有一個_.cloneDeep()方法是深度拷貝,之前也是從你的這個坑里跳出來的

2017年4月6日 21:14
編輯回答
小眼睛

自己用的, 用到underscore的地方可以自己改一下

    var COMMON = {};

    COMMON.merge = function (target, source, source2) {
        if (source && typeof source === 'object') {
            if (!target || typeof target !== 'object') {
                target = _.isArray(source) ? [] : {};
            }
            for (var key in source) {
                if (source.hasOwnProperty(key)) {
                    if (source[key] && typeof source[key] === 'object') {
                        if (!target[key] || typeof target[key] !== 'object') {
                            target[key] = _.isArray(source[key]) ? [] : {};
                        }
                        COMMON.merge(target[key], source[key]);
                    } else {
                        target[key] = source[key];
                    }
                }
            }
        }
        return (source2 && typeof source2 === 'object') ? COMMON.merge(target, source2) : target;
    };

    COMMON.clone = function (obj) {
        if (obj && typeof obj === 'object') {
            if (_.isArray(obj)) {
                return _.map(obj, function (item) {
                    return COMMON.clone(item);
                });
            } else {
                return COMMON.merge({}, obj);
            }
        }
        return obj;
    };
2017年3月30日 20:14
編輯回答
貓館

謝邀,我覺得可以看看 Angular 的 Copy

2017年11月15日 13:05
編輯回答
歆久
let b = Object.keys(a.d).map(item => {
    let copy = JSON.parse(JSON.stringify(a));
    copy.c = { d: a.d[item] };
    delete copy['d'];
    return copy;
});
2018年3月9日 21:08
編輯回答
孤慣
var a = {
    a: '1',
    b: '2',
    d: {
        q: {
            r: '3',
        },
        w: {
            r: '4',
        },
    },
};

var b = JSON.parse(JSON.stringify(a));

b.d.q.r = 100

console.log(b.d.q.r) // 100

console.log(a.d.q.r) // '3'

這種方法使用較為簡單;可以滿足基本的深拷貝需求;而且能夠處理JSON格式能表示的所有數(shù)據(jù)類型 :)
但是對于正則表達式類型、函數(shù)類型等無法進行深拷貝(而且會直接丟失相應(yīng)的值);還有一點不好的地方是它會拋棄對象的constructor;所以可以自己動手實現(xiàn)一個拷貝方法

2018年7月21日 21:16
編輯回答
萌二代
var a = {
  a: '1',
  b: '2',
  d: {
    q: {
      r: '3'
    },
    w: {
      r: '4'
    }
  }
}
var copyA = copyObj(a)
var result = []

Object.keys(copyA.d).forEach(key => {
  let tmp = copyA.d[key]
  result.push(tmp)
})

delete copyA.d

result.forEach((item,index) => {
  let tmp = copyObj(copyA)
  tmp.c = {}
  tmp.c.d = item
  result[index] = tmp
})

function copyObj(obj) {
  return JSON.parse(JSON.stringify(obj))
}

console.log(result)
2017年12月13日 18:46