2017-08-01 9 views
0

私はこれらの3つの機能を1つに抽象化する最良の方法を見つけようとしています。類似のJavascript関数を抽象化する方法

function displaySummary(data) { 
    getMyElement('app__summary').innerHTML = data.summary; 
    return data; 
} 

function displayTemperature(data) { 
    getMyElement('app__temperature').innerHTML = data.temperature; 
    return data; 
} 

function displayLocation(data) { 
    getMyElement('app__location').innerHTML = data.location; 
    return data; 
} 

ご覧のとおり、3つは正確な構造を共有しています。このパラメータは、いくつかのプロパティを持つ単純なオブジェクトです。私がやりたい何

がそうのように二つの引数を一つの関数を呼び出すことができるようにすることです:

displayElement(data, 'location'); 

そして、この実行のようなもの持っている(注を、この次は擬似コードです):

function displayElement(data, STRING) { 
    getMyElement('app__STRING').innerHTML = data.STRING; 
    return data; 
} 

どうやってこれをやりますか? ES2015構文も歓迎です。


メタ:この質問には、以下の質問が重複する可能性があることがわかりました。これらのどちらも、プロパティアクセサーとして機能する文字列を(もし可能なら)補間する方法には答えません。これは、主に私がこの問題を解決するべきだと思う方法です。私は、この質問をより良いものにするための提案と編集を開いています。

EDIT:@Bergiは私の検索で来て、はこの質問を解決しないことはなかった質問が重複としてフラグ付け。これを削除する必要がありますか?あなたは、文字列が正確にプロパティ名と一致しない場合、あなたはできるセレクタ

function displayElement(data, prop) { 
    getMyElement('app__' + prop).innerHTML = data[prop]; 
    return data; 
} 

を作るためのプロパティと文字列連結を読み取るため角括弧表記を使用することができます

+0

- app__STRING''別に'app__ + STRING'にする必要がありますか? – tymeJV

+0

クロージャ。答えは常に閉鎖です。 – Bergi

+0

@tymeJVが言ったこと+ 'data.STRING'は' data [STRING] 'でなければなりません。 –

答えて

0

右プロパティをルックアップする関数である第3パラメータを渡します。

function displayElement(data, propName, lookup) { 
    getMyElement('app__' + propName).innerHTML = lookup(data); 
    return data; 
} 

// Note: Different casing of Location vs location 
displayElement(data,"Location", d => d.location); 
0

としてそれを呼び出すと、このドキュメントを参照してください:このケースではそうhttps://www.w3schools.com/js/js_properties.asp

をあなたの関数は次のようになります。あなたの `pseudocode`と間違って何

function displayElement(data, STRING) { 
    getMyElement('app__'+STRING).innerHTML = data[STRING]; 
    return data; 
} 
関連する問題