Question

我创建了这个函数来计算我想要测量的距离：

distanceToResponder: function() {
    var distance = 0;
    var incidentLocation = this.createCoordinate(this.currentIncident["latitude"], this.currentIncident["longitude"]);

    this.responders.forEach(function(responder) {
        var responderLocation = this.createCoordinate(responder.location.latitude, responder.location.longitude);
        distance = this.calculateDistanceBetweenLocations(incidentLocation, responderLocation);
    }.bind(this));
    return distance;
}

由于某些我没有看到的原因，距离的值只返回一次。因此，如果我将2个位置放入forEach函数，并且我在循环中使用console.log，我会看到所有内容都已正确计算。但是如果我返回distance的值，则只返回一个值。

如何正确返回值？

我正在使用VueJS，其中distanceToResponder＆＃39;是填充表格的计算属性：

   <tr v-for="responder in responders">
        <td>{{ responder.userReference }}</td>
        <td>{{ distanceToResponder(responder) }}</td>
        <td><button type="button" class="btn btn-danger" @click="createDispatch(responder)">Alarm</button></td>
    </tr>

所以函数应该返回每个响应者的距离。那我怎么需要调整我的功能呢？

Answer 1

除了最外面的函数调用之外，你根本没有使用返回值。你的内部forEach回调只是设置两个函数共享的单个变量（distance）的状态，最终返回。

forEach的每次迭代都会覆盖distance的先前值，以便只剩下最终值。

它不清楚你的意思＆＃34;返回多个＆＃34;因为函数可能只返回一个值，但您可以使用map而不是forEach返回数组：

distanceToResponder: function() {
    var incidentLocation = this.createCoordinate(this.currentIncident["latitude"], this.currentIncident["longitude"]);

    return this.responders.map(function(responder) {
        var responderLocation = this.createCoordinate(responder.location.latitude, responder.location.longitude);
        return this.calculateDistanceBetweenLocations(incidentLocation, responderLocation);
    }.bind(this));

}

Answer 2

您正在迭代您的响应者，每次都会覆盖距离。然后在迭代后返回到最后一个响应者的距离。

    var distances = this.responders.map(function(responder) {
      var responderLocation = this.createCoordinate(responder.location.latitude, responder.location.longitude);
      return this.calculateDistanceBetweenLocations(incidentLocation, responderLocation);
    }.bind(this));
    return distances;

制作计算属性＆＃34; distanceToResponders＆＃34;由此。并在模板中

 <tr v-for="(index, responder) in responders">
    <td>{{ responder.userReference }}</td>
    <td>{{ distancesToResponder[index] }}</td>
    <td><button type="button" class="btn btn-danger" @click="createDispatch(responder)">Alarm</button></td>
</tr>

或者创建一个＆＃34;增强的＆＃34;响应者计算属性：

 respondersWithDistance: function() {

  var incidentLocation = this.createCoordinate(this.currentIncident["latitude"], this.currentIncident["longitude"]);

  return this.responders.map(function(responder) {
    var responderLocation = this.createCoordinate(responder.location.latitude, responder.location.longitude);
    responder.distance = this.calculateDistanceBetweenLocations(incidentLocation, responderLocation);
 }.bind(this));
}

并在模板中使用它：

 <tr v-for="responder in respondersWithDistance">
    <td>{{ responder.userReference }}</td>
    <td>{{ responder.distance }}</td>
    <td><button type="button" class="btn btn-danger" @click="createDispatch(responder)">Alarm</button></td>
</tr>

Answer 3

我假设你想要返回一个距离数组，每个响应者一个。实际上，您每次都会覆盖map()变量，并且只返回其最终值。我建议使用forEach()而不是distanceToResponder: function() { var incidentLocation = this.createCoordinate(this.currentIncident["latitude"], this.currentIncident["longitude"]); return this.responders.map(function(responder) { var responderLocation = this.createCoordinate(responder.location.latitude, responder.location.longitude); return this.calculateDistanceBetweenLocations(incidentLocation, responderLocation); }.bind(this)); }将所有值作为数组返回：

{{1}}

Answer 4

必须将相应的响应者作为参数传递。迭代由vue完成。

distanceToResponder: function(responder) {
  var distance = 0;
  var incidentLocation = this.createCoordinate(this.currentIncident["latitude"], this.currentIncident["longitude"]);

  var responderLocation = this.createCoordinate(responder.location.latitude, responder.location.longitude);
  return this.calculateDistanceBetweenLocations(incidentLocation, responderLocation);
}

Javascript返回值仅在循环

4 个答案: