Question

我有一个这样的数组：

  const mockObjPanoramas = [{
    'id': '7oADHnGZcr',
    'appMarkers': [{
      'panoId': '7oADHnGZcr',
      'color': 'red',
      'x': 0,
      'y': 0,
      'z': 1000
    }, {
      'panoId': '8szmQ8ELKs',
      'color': 'red',
      'x': 100,
      'y': 0,
      'z': 1000
    }]
  }, {
    'id': '8szmQ8ELKs',
    'appMarkers': [{
      'panoId': '7oADHnGZcr',
      'color': 'green',
      'x': 0.1352234,
      'y': -0.2600403,
      'z': 0.9960099
    }, {
      'panoId': '8szmQ8ELKs',
      'color': 'green',
      'x': 0.03900146,
      'y': 0.295959,
      'z': 0.9169907
    }]
  }]

我想将以下公式应用于每个appMarker并返回一个新数组：

(x, y, z) = (-z, y, -x) * 1000

所以我这样做了：

function parseUnityMarkers (mockObjPanoramas) {
  return mockObjPanoramas.map(mockObjPanorama => {
    return mockObjPanorama.appMarkers.map(appMarker => {
      const depth = 1000
      appMarker.x = -appMarker.z * depth
      appMarker.y = appMarker.y * depth
      appMarker.z = -appMarker.x * depth
    })
  })
}

但是，我得到了这个：

我做错了什么？

注意：我想返回一个与原始阵列完全相同的新阵列。但是appMarkers的x，y和z的值发生了变化。

Answer 1

我认为您错过了第二次地图通知中的退货声明：

function parseUnityMarkers (mockObjPanoramas) {
  return mockObjPanoramas.map(mockObjPanorama => {
    return mockObjPanorama.appMarkers.map(appMarker => {
      const depth = 1000
      appMarker.x = -appMarker.z * depth
      appMarker.y = appMarker.y * depth
      appMarker.z = -appMarker.x * depth
      return appMarker;
    })
  })
}

但是，你会遇到另一个问题。您正在覆盖appMarker.x的值，然后尝试访问原始值。此外，您实际上正在覆盖原始数据。您可以保持原始数据不会发生这样的变化：

function parseUnityMarkers (mockObjPanoramas) {
  return mockObjPanoramas.map(mockObjPanorama => {
    return {
      id: mockObjPanorama.id,
      appMarkers: mockObjPanorama.appMarkers.map(appMarker => {
        const depth = 1000
        return {
          panoId: appMarker.panoId,
          color: appMarker.color,
          x: -appMarker.z * depth,
          y: appMarker.y * depth,
          z: -appMarker.x * depth
        };
      })
    }
  })
}

Answer 2

简单明了（我喜欢以简单的方式做事:)）：

    function parseUnityMarkers(mockObjPanoramas) {
      for(var i=0; i < mockObjPanoramas.length; i++){
        var temp1 = mockObjPanoramas[i];
        for(var j=0; j < temp1.appMarkers.length; j++) {
          var temp2 = temp1.appMarkers[j];
          const depth = 1000;
          var x = temp2.x;
          temp2.x = -temp2.z * depth
          temp2.y = temp2.y * depth
          temp2.z = -x * depth
        }
      }
      return mockObjPanoramas;
    }

一件重要的事情：

当你这样做时：

  appMarker.x = -appMarker.z * depth
  appMarker.y = appMarker.y * depth
  appMarker.z = -appMarker.x * depth

请注意，您已将z值设为：-z * depth * depth 因为您已将x替换为-z * depth。

const mockObjPanoramas = [{
  'id': '7oADHnGZcr',
  'appMarkers': [{
    'panoId': '7oADHnGZcr',
    'color': 'red',
    'x': 0,
    'y': 0,
    'z': 1000
  }, {
    'panoId': '8szmQ8ELKs',
    'color': 'red',
    'x': 100,
    'y': 0,
    'z': 1000
  }]
}, {
  'id': '8szmQ8ELKs',
  'appMarkers': [{
    'panoId': '7oADHnGZcr',
    'color': 'green',
    'x': 0.1352234,
    'y': -0.2600403,
    'z': 0.9960099
  }, {
    'panoId': '8szmQ8ELKs',
    'color': 'green',
    'x': 0.03900146,
    'y': 0.295959,
    'z': 0.9169907
  }]
}];

function parseUnityMarkers(mockObjPanoramas) {
  for(var i=0; i < mockObjPanoramas.length; i++){
    var temp1 = mockObjPanoramas[i];
    for(var j=0; j < temp1.appMarkers.length; j++) {
      var temp2 = temp1.appMarkers[j];
      const depth = 1000;
      var x = temp2.x;
      temp2.x = -temp2.z * depth
      temp2.y = temp2.y * depth
      temp2.z = -x * depth
    }
  }
  return mockObjPanoramas;
}

console.log(parseUnityMarkers(mockObjPanoramas));

如何更改对象数组的子项的值？

2 个答案: