オブジェクト間の差分を考慮して文字列を整形

前提・実現したいこと

以下のような配列が与えられた場合に、全cityオブジェクトで共通する名前のshopのプロパティだけを取り出して、
idを連結させた文字列を整形したいと考えています。
なお、IE11でも正常に動作するJavaScriptのコードを考えています(jQueryの使用も可として考えています)。
汎用的な処理を考えているため、cityオブジェクトの数やcityオブジェクトの中に格納されるshopプロパティは任意です。

    let arr = [];
    let city1 = {
      "shopA":{"id":1},
      "shopB":{"id":2},
      "shopC":{"id":3},
    }
    let city2 = {
      "shopA":{"id":10},
      "shopB":{"id":20},
      "shopC":{"id":30},
    }
    let city3 = {
      "shopA":{"id":"A"},
      "shopB":{"id":"B"},
      "shopD":{"id":"D"},
      "shopE":{"id":"E"},
    }
    arr.push(city1);
    arr.push(city2);
    arr.push(city3);

shopCは、3つめのcityオブジェクトの中にないので(全city要素で共通しないので)、対象外です。
同様に、shopDやshopEも3つめのcityオブジェクトの中にしかないので(全city要素で共通しないので)、対象外です。
これより、shopAとshopBのプロパティが、全city要素で共通するプロパティなので対象となり、
それらの各idは、全city要素で異なる仕様のため、先頭要素から順にidの文字列を結合していき、
「shopA?1;10;A」の文字列と「shopB?2;20;B」という文字列が生成されるような処理を考えています。
仕様としては、上記、arrのように配列で与えられます。
ご教示お願いします。

試したこと

まず、ループで回して各cityオブジェクトを出力できることは確認できました。

JavaScript
1    for(let city of arr){    
2      console.log(city);
3    }

arr配列の中には、cityオブジェクトの要素が2つ格納されているとは限らず、3つ以上格納されている可能性もあるので、
ループで回してどのように差分を抽出すればよいかわからないという状態です。

また、2つのcityオブジェクトを比較した際、idプロパティは異なる仕様なので、
city1とcity2でもfalseとなってしまうことに気づきました
(本来ならば、city1とcity2のshopの名前は全て同一なので、trueとしたいところ)。

JavaScript
1    console.log(city1 == city2);  // false 
2    console.log(city1 == city3);  // false

また、city1とcity3を比較した際は、shopC,shopD,shopEに差異があることを抽出したいのですが、
その方法もわからないという状態です。
どういった設計の処理にすればよいかという部分から見当がつかない状態です。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1let arr = [
2  {
3    "shopA":{"id":1},
4    "shopB":{"id":2},
5    "shopC":{"id":3},
6  },
7  {
8    "shopA":{"id":10},
9    "shopB":{"id":20},
10    "shopC":{"id":30},
11  },
12  {
13    "shopA":{"id":"A"},
14    "shopB":{"id":"B"},
15    "shopD":{"id":"D"},
16    "shopE":{"id":"E"},
17  }
18  ];
19var shop=arr.map(function(x){
20  return Object.keys(x);
21}).reduce(function(x,y){
22  return x.filter(function(z){
23    return y.indexOf(z)>=0;
24  });
25}).map(function(x){
26  return x+"?"+arr.map(function(y){
27    return y[x]["id"]
28  }).join(";");
29});
30
31console.log(shop);