オブジェクト配列で重複を除外したい

Question

連想配列で重複を避けながら整形したいです。以下のようなoriginalArrを
0. key2を重複をなくして配列にし
0. key1も重複をなくす配列に
0. key2をkeyにvalueを 2.のkey1にする

そして下記のようなコードを作成して、一応動かせます。
ただ、もっと簡単にメソッドなんか使ってシンプルに書きたいです。
コード改善をお願いします。

const originalArr = [
    {
        "key1":"shiba",
        "key2":"dog"},
    {
        "key1":"shiba",
        "key2":"dog"},
    {
        "key1":"akita",
        "key2":"dog"},
    {
        "key1":"mike",
        "key2":"cat"},
    {
        "key1":"mike",
        "key2":"cat"}
];
const reduceArr = [];
//reduceでなくてもいいかも？
const reduce = originalArr.reduce(function(result, current){
  return reduceArr.push(current.key2);
},0);
const reduceObj = new Set(reduceArr); // 重複排除
const uniqueArr = Array.from(reduceObj); // obj=>arr
const doneArr = []; //実行後の配列
let key2;
for(let i=0; i<uniqueArr.length; i++){
    const finalArrBefore = [];
    originalArr.forEach(el=>{ 
        const key1 = el['key1']; // inu or neko
        const elKey2 = el["key2"]; // dog or cat
        key2 = uniqueArr[i]; //[dog, cat]
        if (elKey2==key2){
            finalArrBefore.push(key1)
        }
    })
    const finalObj = new Set(finalArrBefore); //重複排除
    const finalArr = Array.from(finalObj); // obj=>arr
    const obj = {
        key2: key2,
        key1: finalArr
    };
    doneArr.push(obj);
}
console.log(doneArr);
/* 
[
  { key2: 'dog', key1: [ 'shiba', 'akita' ] },
  { key2: 'cat', key1: [ 'mike' ] }
] 
*/

Answer 1

むずかしいのはわかんないので

const originalArr = [
    {
        "key1":"shiba",
        "key2":"dog"},
    {
        "key1":"shiba",
        "key2":"dog"},
    {
        "key1":"akita",
        "key2":"dog"},
    {
        "key1":"mike",
        "key2":"cat"},
    {
        "key1":"mike",
        "key2":"cat"}
];
let animal = {};
for (let obj of originalArr) {
    const k = obj.key2;
    const v = obj.key1;
    if (!animal[k]) animal[k] = [];
    if (!animal[k].includes(v)) animal[k].push(v);
}
let doneArr = [];
for (let key in animal) {
    doneArr.push({"key2":key,"key1":animal[key]});
}
console.log(doneArr);

Comments

[hokosugi]

ご回答ありがとうございます。これは簡単でシンプルですね。全く思いつかなかったので、なるほどなあっと感心しきりです。if (!animal[k].includes(v)) animal[k].push(v);このあたり、自分なら総当りしてしまいそうｗ　いや間違いなくそうしてるｗｗ　改めてありがとうございました。

[takasima20]

(･∀･)b

Answer 2

面白そうなので組んでみた。

const res = Array.from( originalArr.reduce( ( pre,cur )=> {
  return pre.set( cur.key2, ( pre.get( cur.key2 ) || new Set() ).add( cur.key1 ) );
}, new Map() ) ).map( mp=> {
	return { key2: mp[ 0 ], key1: [ ...mp[ 1 ] ] };
} );
console.dir( res );
```**動くサンプル：**[https://jsfiddle.net/vnr2maek/1/](https://jsfiddle.net/vnr2maek/1/)

【Array.prototype.reduce() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)

【Map - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)

【Set.prototype.add() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set/add](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set/add)

Comments

[kei344]

https://jsfiddle.net/gk3ca2zh/
ちょっと短くした

[hokosugi]

ご回答ありがとうございます。ちょっとすぐには理解できませんｗｗ　今から熟読して理解したいと思います。

[kei344]

調子に乗って圧縮しすぎました、すみません。
reduceの第二引数にMapオブジェクトを渡して、pre.setでcur.key2をキーにSetオブジェクトをvalueに設定しています。Array.from().map()はその結果のMapオブジェクトを配列化して最終出力の形に整形しています。

ちょっと展開しました⇒ https://jsfiddle.net/bcg2wqo7/

【reduce()はArrayにて最強……おぼえておけ。（配列とかおれおれAdvent Calendar2018 – 23日目） | Ginpen.com】
https://ginpen.com/2018/12/23/array-reduce/

[hokosugi]

ありがとうございます。ようやく理解できました。Setの特性生かしてreduce構文の中で重複を外しているんですね。一行ずつにconsole.log, consoloe.dir入れてやっとこさですｗ　展開してもらわないと明日の朝まで掛かったかも知れませんｗ　助かりました！

Answer 3

自分、便利なものは使いまくって楽したい派なもんで、こないな感じでやりますわー

const key2s = _(originalArr)
                .map('key2')
                .uniq()
                .value();

const map = _(originalArr)
              .groupBy('key2')
              .mapValues(
                ary => _(ary).map('key1').uniq().value()
              )
              .value();


const doneArr = key2s.map(key2 => ({ key2, key1: map[key2] }));

➡ サンプル

**補足： **最終結果のdoneArrに含まれるkey2の順番が、もとのoriginalArrでのkey2の出現順を必ずしも保存していなくてもええんやったら、key2s を作っておく必要はないねんな。 上のコードに出てくる変数map を Object.entries() だったり、lodashの toPairsで配列にバラしたらええんやからの。

➡サンプルその2

**補足２： **それと、こまいこともうひとつ言うとくわ。質問にあるコードでは、originalArrの要素の並び順は、key2 の値で（dogの次にcat やから降順に）ソートされている風に見えるんやけど、前提として、そうやってkey2の順にもともとキレイに並んでるゆうんやったら、また別のやりようあるやもしれん。ワテのコードは、そないな前提なしで、originalArrの中では各要素は何の順にもなっとらんでもええものになっとるで。

補足3:
以下の3条件を満たすコード書いてみたで ➡サンプルその3

・ lodash を使わない。
・ 検索を効率化するための補助のオブジェクトやMap、Setを使わない。（先頭から探すことで、とりあえずOKとする）
・ doneArrの中で、key1 や　key2 の出現順は、元の originalArr での出現順を保存している。

Comments

[hokosugi]

ありがとうございます！ lodash、初めて知りましたｗ　これを使うならどんなことでも簡単に楽して整形できそうです。key2の出現順は全く考えずに適当にサンプル配列を作っております。そういうところまで考えないといけないほどスキル上がれば嬉しいですが。今回は有難うございました。

[退会済みユーザー]

おおきに〜。lodash 便利やでえ。今回の問題であれば、(1) 何らかのキーによるグループ化 (2) 配列の要素をユニークにする、ゆう二つのテーマがあり、さらにもうひとつ検討事項として (3) 元の配列における出現順を加工後も保存するのかどうか？ というのがありますな。これらのどれも、何作ってるときでも、よう出てきまっせ。そやからこれらをまずlodash使わず、reduceだったり map 、 filter とか、その他モロモロの標準のメソッドと、中間の加工物としてMapやSet やなんかを使うコードをサラっと書けるようになっときいや。ほんで、その後、lodashの便利メソッドを見るとやな、「ははあ、、、これは中ではこないなことやってんのやろな・・・」と推測がつくようになる。（興味があればlodashのソースコードを読んでもええし。）そうやって、自分で書こうと思えば書けるやつから頭に入って、実践で「あ。コレlodashのアレ使えば一発やん」みたいに思いつくようになるし、メソッドと標準メソッドの合わせ技とかもスラスラいけるようになるで。

[hokosugi]

ありがとうございます！！頑張ります！！