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：我知道这个问题可能被标记为下面问题的潜在副本。这些都没有回答如何插入（如果可能的话）一个字符串作为属性访问器，这主要是我如何思考＆＃39;这个问题应该解决了。我愿意接受建议和编辑，以使这个问题变得更好。

编辑：@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;
}

如何将类似的Javascript函数抽象为一个？

2 个答案: