每一次push对象中的数组覆盖问题

Question

var arr = [
            {name:'张三', age:'22', child: []},
            {name:'张四', age:'23', child: []},
            {name:'张五', age:'24', child: []}
          ]

将arr的数据clone到另一个数组,同时将child添加一些数据

当NewArr从arr中克隆一份 {name: '张三','age', child}的时候
将child[]中push一些数据
每个对象要中的child数组不可以覆盖到其他对象的child数组,大佬们看看这个要怎么解决呢?

在做一个拖拽的功能,要一个数组拖拽到另一个数组,原数组中的child是一个空数组,每次从旧数组中拖拽到新数组的是将数组对象下的child数组push一个当前对象的值,而且要保证下次拖拽另一个数组的时候将其下对象下的child数组又设置一个新的数组,大概就是这样一个功能

相当于 A是原来的数组对象下面预留了一个对象里面有一个child空数组: [ {name:"张三", child: []} ]
如果拖拽了这个对象{nam:"张三", child:[]} 用户弹出一个窗口,将input的值push到这个对象下的child的数组中

现在的问题就是我push的时候会覆盖数组的下所有的对象的child数组

拖拽第一次的时候并且设置看值 { name:"张四", child:["第一次push"] }
第二次: { name:"张五", child:["第二次push"] }

Answer 1

说实话,看不太懂要问啥,我猜是这样

var arr = [
            {name:'张三', age:'22', child: []},
            {name:'张四', age:'23', child: []},
            {name:'张五', age:'24', child: []}
          ]

function cloneSome(target, key, value, callback) {
      let filterFn = function (o) {
            return o[key] === value;
      }
      if (typeof key === 'function') {
          filterFn = key;
          callback = value;
      }
      let newArr = [];

      target.forEach(c => {
            let result = filterFn(c);
            if (result) {
                  let cl = JSON.parse(JSON.stringify(c));
                  callback(cl);
                  newArr.push(cl);
            }
      });

      return newArr;
}

// 复制某一个
console.dir(cloneSome(arr, 'name', '张三', function (c) {c.child.push(1,2,3)}));
// 复制全部
console.dir(cloneSome(arr, () => true, function (c) {c.child.push(1,2,3)}));
// 查看原来的
console.dir(arr);

Answer 2

使用 深拷贝， 比如 SON.parse(JSON.stringify(arr))

var arr = [
            {name:'张三', age:'22', child: []},
            {name:'张四', age:'23', child: []},
            {name:'张五', age:'24', child: []}
          ]

var NewArr = JSON.parse(JSON.stringify(arr));

NewArr.forEach(e => e.child.push(1))

console.log(NewArr, arr)

https://juejin.im/post/5b20c9...