js二维数组过滤,如何不改变原数组

let arr = [{
  name:1,
  data:[{
    a:'1',
    b:'2'
  }]
},
{
  name:1,
  data:[{
    a:'11',
    b:'2'
  }]
}
]
let tmpResult = []
arr.forEach((rules,index)=>{
   tmpResult[index] = rules
   tmpResult[index].data = rules.data.filter((item) => {
       return item['a'].includes('11')
   })    
})
console.log(tmpResult,arr);

打印后的arr不是原来的arr


let arr = [{
  name:1,
  data:[{
    a:'1',
    b:'2'
  }]
},
{
  name:1,
  data:[{
    a:'11',
    b:'2'
  }]
}
]
let tmpResult = JSON.parse(JSON.stringify(arr))
tmpResult.forEach((rules,index)=>{
   tmpResult[index] = rules
   tmpResult[index].data = rules.data.filter((item) => {
       return item['a'].includes('11')
   })    
})
console.log(tmpResult,arr);

img

let tmpResult = arr.map(rules => {
  return {
    name: rules.name,
    data: rules.data.filter(item => item['a'].includes('11'))
  }
});

由于数组是引用类型,所以会出现这种情况,也就是所说的浅拷贝。
实现深拷贝,可以使用以下代码,调用deepCopy 函数先复制一份数组,在进行你接下来的运算。

var deepCopy = function(obj) {
  // 只拷贝对象
  if (typeof obj !== 'object') return;
  // 根据obj的类型判断是新建一个数组还是一个对象
  var newObj = obj instanceof Array ? [] : {};
  for (var key in obj) {
    // 遍历obj,并且判断是obj的属性才拷贝
    if (obj.hasOwnProperty(key)) {
      // 判断属性值的类型,如果是对象递归调用深拷贝
      newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
    }
  }
  return newObj;
}

let arr = [{
name:1,
data:[{
a:'1',
b:'2'
}]
},
{
name:1,
data:[{
a:'11',
b:'2'
}]
}
]

let targetArr = arr.map(item => {
const { data } = item
let tempArr = data.filter(d=> {
return d['a'].includes('11')
})
return {...item, data: tempArr}
})
console.log(targetArr)
console.log(arr)