vue数组嵌套多层对象，抽取相同的数据进行比较

场景应用

1. 在对比栏目，A商品和B商品返回数据，如下

2. 现在要抽取每一项相同的数据进行比较，类似于这个效果图

实现

let temArr = [];
      let zhongjianArr = [];
      let arr = [];
      const nua = this.products;
      console.log("要比较的营养成分", nua);
      for (let [proIndex, item] of nua.entries()) {
        temArr.push("");
      }
      for (let [proIndex, item] of nua.entries()) {
        for (let name of item.nutrientContent) {
          zhongjianArr = [...temArr];
          const key = name.item;
          const index = arr.findIndex(item => item.key === key);
          if (index !== -1) {
            arr[index].value[proIndex] = name;
          } else {
            zhongjianArr[proIndex] = name;
            arr.push({
              key,
              value: zhongjianArr
            });
          }
        }
      }
      console.log('抽取相同的数据进行比较',arr);
      this.power = arr;

思路

现在每个商品都有自己的营养成分数据，我们要做的，就是把返回的数据结构，变成我们想要的数据结构。那我们想要什么样的数据结构呢？ 

将所有有的数据，都放在一个结合里面。在这个结合里面，查找和当前集合名一样的数据
key:里面存储字段。value里面存储对应的字段的数据