如何將相似的Javascript功能抽象爲一個？

Question

我試圖找到將這三個功能抽象成一個的最佳方式。

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; 
} 

正如你所看到的，它們三者共享確切的結構。該參數只是一個具有一些屬性的簡單對象。

我想什麼做的是能夠調用一個函數有兩個參數，如下所示：

displayElement(data, 'location'); 

而且有這樣的事情來看（注意，這下一個是僞代碼）：

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

你會怎麼做呢？ 也歡迎ES2015語法。

---

META：我知道這個問題可能被標記爲潛在的以下問題的重複。這些答案都沒有答案如何插入（如果可能的話）一個字符串作爲一個屬性訪問器，這主要是我認爲應該解決這個問題。我願意提出建議和編輯，以使這個問題更好。

• How to condense similar JavaScript functions into one?
• Combine 3 functions into one in javascript

編輯：@Bergi標記爲複製未在我的搜索來一個問題，並且確實解決這個問題。我應該刪除這個嗎？

• Dynamically access object property using variable

Answer 1

你可以用方括號用於讀取屬性和字符串連接作出選擇

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

如果字符串不完全匹配的屬性名稱，你可以傳遞第三個參數以查找正確的屬性：

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); 

Answer 2

看到這個文檔：https://www.w3schools.com/js/js_properties.asp

因此，在這種情況下，你的函數是：

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