Javascript 操纵对象数组以获取唯一数据

我正在做一个项目，我有两个对象数组，下面是数据可能存在的各种情况

// Case 1
var arr1=[{id:1,quantity:10}]
var arr2=[{id:1,quantity:10},{id:2,quantity:20}]

// Case 2
var arr1=[]
var arr2=[{id:1,quantity:10},{id:2,quantity:20}]

// Case 3
var arr1=[{id:1,quantity:12}]
var arr2=[{id:1,quantity:10},{id:2,quantity:20}]

// Case 4
var arr1=[{id:1,quantity:10},{id:1,quantity:20}]
var arr2=[{id:1,quantity:10}]

因此，array1可能为空，可能有array2中的一个对象，或者array2中的两个对象具有不同的数量值

我想基于arr2更新主阵列或arr1，但不想完全用arr2刷arr1，arr1=arr2这类解决方案。arr1应基于arr2更新数量，并基于相同的内容添加或删除

for(const el of arr2){
 const dupe = arr1.find(e => e.id === el.id);
 if(dupe){
   dupe.quantity = el.quantity;
 }else{
   arr1.push(el);
 }
}

但实际上，地图（id->quantity）是这里更好的数据结构（或对象）：

但实际上，地图（id->quantity）是这里更好的数据结构（或对象）：

---

<> > <代码> ARR1= ARR2< /代码>将是一个解决方案，除了要改变<代码> ARR1而不是替换它，然后考虑使用<代码>剪接< /代码>：

var arr1=[{id:0，数量：1}，{id:2，数量：12}，{id:3，数量：9}]，
arr2=[{id:1，数量：10}，{id:2，数量：20}]；
arr1.拼接（0，arr1.长度，…arr2）；
控制台日志（arr1） > p> >代码> ARR1= ARR2将是一个解决方案，除了要改变<代码> ARR1而不是替换它，然后考虑使用<代码>拼接< /代码>：


var arr1=[{id:0，数量：1}，{id:2，数量：12}，{id:3，数量：9}]，
arr2=[{id:1，数量：10}，{id:2，数量：20}]；
arr1.拼接（0，arr1.长度，…arr2）；
控制台日志（arr1）
你能给出一个前后示例吗？代码如何能同时更新、添加和删除元素？你能解释一下结果与
arr1=arr2
？@trincot的不同之处吗？因为我不希望数据来自的api替换数组中存储的所有内容，导致使用数组的视图变为空状态，然后再次填充，如果我有如上所述的解决方案就更好了我不确定我是否理解：如果数组内容的替换是同步进行的，那么视图就不会看到数组为空。但是，我知道为变量分配一个新数组不会影响对先前数组的已有引用。要处理这个问题，您需要对数组进行变异（正如我在回答中所建议的那样）。你能给出一个前后示例吗？代码如何同时更新和添加、删除元素？你能解释一下结果与
arr1=arr2
？@trincot的不同之处吗？因为我不希望数据来自的api替换数组中存储的所有内容，导致使用数组的视图变为空状态，然后再次填充，如果我有如上所述的解决方案就更好了我不确定我是否理解：如果数组内容的替换是同步进行的，那么视图就不会看到数组为空。但是，我知道为变量分配一个新数组不会影响对先前数组的已有引用。为了解决这个问题，你需要对数组进行变异（如我在回答中所建议的）。在第二个解决方案中-添加一个默认的
（els.get（el.id）| | 0）
，或者如果它不是重复的，你会得到一个
NaN
。很好的解决方案，但是如果arr2的元素少于arr1，那么arr1就不会变为arr2。@ori是的，我总是忘记这一点…：/在第二个解决方案中-添加一个默认的
（els.get（el.id）| | 0）
，或者如果它不是重复的，您将得到一个
NaN
。很好的解决方案，但是如果arr2的元素少于arr1，那么arr1不会更改为arr2。@ori是的，我总是忘记这个…：/我尝试过这种方法，但因为这会将所有内容从array2添加到array1，并且因为我在angular for angular animate中使用了这种逻辑，所以这会将所有添加内容设置为动画，而不仅仅是一个添加内容。我只想增加一个动画效果，而不是所有的东西，因此我在这里问了这个问题，否则一个简单的谷歌搜索就可以解决这个问题。感谢thoughI添加了第二个解决方案，当对象的
id
存在于
arr2
中时，该解决方案可以在
arr1
中保持对象引用。这看起来是正确的，可能会起作用，我到家后会对其进行测试。这是可行的，但如果arr1有2个对象，而arr2只有1个，那么arr1仍然会产生2个对象，而不是从arr2更新的1个对象。哎呀，我现在通过将
forEach
替换为
reduceRight
，修复了这个问题。我尝试了这种方法，但因为这将从array2添加到array1的所有内容，并且因为我在angular中使用了这个逻辑来制作角度动画，这将动画化所有添加内容，而不仅仅是一个添加内容。我只想增加一个动画效果，而不是所有的东西，因此我在这里问了这个问题，否则一个简单的谷歌搜索就可以解决这个问题。感谢thoughI添加了第二个解决方案，当对象的
id
存在于
arr2
中时，该解决方案可以在
arr1
中保持对象引用。这看起来是正确的，可能会起作用，我到家后会对其进行测试。这是可行的，但如果arr1有2个对象，而arr2只有1个，那么arr1仍然会产生2个对象，而不是从arr2更新的1个对象。哎呀，我现在通过将
forEach
替换为
reduceRight
修复了这个问题。
const els = new Map( arr1.map(el => [el.id, el.quantity]));
//to add
arr2.forEach( el => els.set( el.id, el.quantity + (els.get( el.id ) ||0));