如何将相似的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; 
}