このdouble forlopをlodashでリファクタリングする方法は？

Question

selectedTagsには最大3つのタグが含まれています。 vm.tags何千ものタグを含めることができますが、たぶん数百ものタグを比較する必要があります。

3つのタグのIDがvm.tagsのタグのIDと一致する場合は、境界線をオンにする必要があります。 3つのボーダーもあります：border1、border2、border3です。

const tagsColorCheck =() => { 
    let name, selected, its_ticker; 
    let selectedTags = TagsFactory.retrieveTickerTags('onlyTags'); 

    if (selectedTags.length > 0) { 
     for (let i=0; i<vm.tags.length; i++) { 
      for (let j=0; j<selectedTags.length; j++) { 
       if (selectedTags[j].term_id == vm.tags[i].term_id) { 
        name  = 'border'+ (j + 1); 
        selected = 'selected'; 
        its_ticker = 'its_ticker'; 

        vm.tags[i][name]  = true; 
        vm.tags[i][selected] = true; 
        vm.tags[i][its_ticker] = selectedTags[j].its_ticker; 
       } 
      } 
     } 
    } 
}; 

は、これまでのところ、ここで私は、プロセス（_.each）に持っているものです。

const tagsColorCheck =() => { 
    let name, selected, its_ticker, vmTerm, term_1, term_2, term_3, ticker_1, ticker_2, ticker_3; 
    let selectedTags = TagsFactory.retrieveTickerTags('onlyTags'); 

    if (!_.isEmpty(selectedTags)) { 
     vmTerm = R.findIndex(R.propEq('term_id', selectedTags[0].term_id))(vm.tags); 
    } 

    if (selectedTags[0]) { term_1 = parseInt(selectedTags[0].term_id); ticker_1 = selectedTags[0].its_ticker; } 
    if (selectedTags[1]) { term_2 = parseInt(selectedTags[1].term_id); ticker_2 = selectedTags[1].its_ticker; } 
    if (selectedTags[2]) { term_3 = parseInt(selectedTags[2].term_id); ticker_3 = selectedTags[2].its_ticker; } 

    _.each(vm.tags, (tag) => { 
     if (tag.term_id === term_1) { 
      tag.selected = true; 
      tag.border1 = true; 
      tag.its_ticker = ticker_1; 
     } 

     if (tag.term_id === term_2) { 
      tag.selected = true; 
      tag.border2 = true; 
      tag.its_ticker = ticker_2; 
     } 

     if (tag.term_id === term_3) { 
      tag.selected = true; 
      tag.border3 = true; 
      tag.its_ticker = ticker_3; 
     } 
    }) 
}; 

そして、この（for of loop）：

const tagsColorCheck =() => { 
    let name, selected, its_ticker, vmTerm, term_1, term_2, term_3, ticker_1, ticker_2, ticker_3; 
    let selectedTags = TagsFactory.retrieveTickerTags('onlyTags'); 

    const borderRizeTag = (tag) => { 
     if (tag.term_id === term_1) { 
      tag.selected = true; 
      tag.border1 = true; 
      tag.its_ticker = ticker_1; 
     } 

     if (tag.term_id === term_2) { 
      tag.selected = true; 
      tag.border2 = true; 
      tag.its_ticker = ticker_2; 
     } 

     if (tag.term_id === term_3) { 
      tag.selected = true; 
      tag.border3 = true; 
      tag.its_ticker = ticker_3; 
     } 
     return tag; 
    } 

    if (!_.isEmpty(selectedTags)) { 
     vmTerm = R.findIndex(R.propEq('term_id', selectedTags[0].term_id))(vm.tags); 
    } 

    if (selectedTags[0]) { term_1 = parseInt(selectedTags[0].term_id); ticker_1 = selectedTags[0].its_ticker; } 
    if (selectedTags[1]) { term_2 = parseInt(selectedTags[1].term_id); ticker_2 = selectedTags[1].its_ticker; } 
    if (selectedTags[2]) { term_3 = parseInt(selectedTags[2].term_id); ticker_3 = selectedTags[2].its_ticker; } 

    for (let tag of vm.tags) { 
     console.log(tag); 
     tag = borderRizeTag(tag); 
    } 

    console.log('vmTerm',vmTerm); 
}; 

Answer 1

ES6実行するためのフィドル：http://www.es6fiddle.net/is0prsq9/（ノート、テキスト全体をコピーし、ブラウザのコンソールまたはノードREPLの内側に貼り付け、その後、結果を見るためにtagsの値を調べ）

にですlodashではなく、あなたはES6のコンストラクトでそれを本当に必要としません。関連コード：あなたは関数型言語でこれを書いていた場合

const tagsColorCheck =() => { 

    let tags = TagsFactory.retrieveTickerTags('onlyTags') 

    sel.forEach((s,i) => 
    tags.filter(t => t.term_id === s.term_id).forEach(t => { 
     t['border' + (i+1)] = true 
     t.selected = true 
     t.its_ticker = s.its_ticker 
    }) 
) 

    return tags 
} 

、あなたがlist comprehensionへのアクセス権を持っているでしょうし、それは少しきれいになります。本質的に、これは(for every x in a and y in b)のかなり明確なケースです。リストの理解は必要なものですが、あなたはjavascript（mozilla has itですが、そのレルム以外では役に立たない）ではありません。

結果はやや機能的なアプローチですが、純粋なjavascriptでは決して機能しません。おそらく機能的なパラダイムの最も重要な利点はimmutable data structuresあなたの新しいリストを構成するでしょう。代わりに、ここでそれらの場所を変更するだけです。実際にはあまり機能しません。それでも、あなたが上記のようにリテラルなインクリメンタルなものへのアプローチを好むのであれば、私は自分のポストで行ったように、それは（遅くても間違いなくクリーンな）良いアプローチです。

Answer 2

は素晴らしい解決策を考え出しました！ ：Dは_lodashとramdaの両方を使用しています。

以下のようにすぐにeachの方が速いので、R.equalsを使用してterm_idsと一致するかどうかを比較してください。次に、正しいtagオブジェクトのキーの値を設定します。

if (!_.isEmpty(selectedTags)) { 
    _.each(vm.tags, tag => { 

     _.each(selectedTags, (selectedTag, index) => { 
      let areTermIDsSame = R.equals; 

      if (areTermIDsSame(parseInt(selectedTag.term_id), parseInt(tag.term_id))) { 
       name  = 'border'+ (index + 1); 
       selected = 'selected'; 
       its_ticker = 'its_ticker'; 

       tag[name]  = true; 
       tag[selected] = true; 
       tag[its_ticker] = selectedTag.its_ticker; 
      } 
     }); 
    }) 
} 

Answer 3

アイデアは単純です - すべてのタグのインデックスをterm_idで作成してください。選択したタグを繰り返します。タグがタグインデックス内のidによって見つかった場合は、そのオブジェクトに新しいプロパティを割り当てることによって変更します。

btw - lodashを使用したくない場合は、lodashが必要なのは_.keyBy()で、Array.prototype.reduceを使用すれば簡単に行うことができます。

/** mocked vm **/ 
 

 
const vm = { 
 
\t tags: [{ term_id: 1 }, { term_id: 2 }, { term_id: 3 }, { term_id: 4 }, { term_id: 5 }, { term_id: 6 }] 
 
} 
 

 
/** mocked TagsFactory **/ 
 

 
const TagsFactory = { 
 
\t retrieveTickerTags:() => [{ term_id: 1, its_ticker: 'ticker 1' }, { term_id: 4, its_ticker: 'ticker 4' }, { term_id: 5, its_ticker: 'ticker 5' }] 
 
}; 
 

 
const tagsColorCheck =() => { 
 
    const selectedTags = TagsFactory.retrieveTickerTags('onlyTags'); 
 

 
    if (selectedTags.length === 0) { // if selectedTags is empty exit 
 
    return; 
 
    } 
 

 
    const vmTagsIndex = _.keyBy(vm.tags, (tag) => tag.term_id); // create an index of tags by term_id 
 

 
    selectedTags.forEach(({ 
 
    term_id, its_ticker 
 
    }, index) => { // loop through selectd tags and retreive term_id and its_ticker from the current selected tag 
 
    const tag = vmTagsIndex[term_id]; // find the tag in the vmTagsIndex 
 

 
    if (!tag) { // if the id doesn't exist in vmTagsIndex exit 
 
     return; 
 
    } 
 

 
    Object.assign(tag, { // mutate the tag by assigining it an object with the available properties 
 
     selected: true, 
 
     [`border${index + 1}`]: true, 
 
     its_ticker 
 
    }); 
 
    }); 
 
}; 
 

 
tagsColorCheck(); 
 

 
console.log(vm.tags);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>