从另一个数组更新对象数组

Question

我的主要任务是更新地图上的标记.

符号:

在地图上实时显示的标记:

var markers = [
  { 'lat':10, 'lng':10, 'type':'simple'},
  { 'lat':20, 'lng':20, 'type':'simple'},
  { 'lat':40, 'lng':40, 'type':'cluster'}
]

应该在地图上的新标记:

var newMarkers = [
  { 'lat':10, 'lng':10, 'type':'simple'},
  { 'lat':20, 'lng':20, 'type':'simple'},
  { 'lat':30, 'lng':30, 'type':'simple'},
  { 'lat':50, 'lng':50, 'type':'simple'}
]

因此,问题被简化为我想要找到解决方案的子任务: 更新对象数组 - markers来自另一个对象数组 - newMarkers.

因此,需要使用markers数组执行以下操作:

1. 删除对象markers未在newMarkers(由三个属性相比:lat,lng,type).
2. 从对象添加newMarkers到markers,如果不存在(通过比较lat,lng).如果标记存在(由两个属性:lat,lng),则需要更新它,即替换为新的标记newMarkers.

我的解决方案无效,因为它是在大量标记上执行了很长时间.

更新的markers数组应如下所示:

console.log(markers)
{ 'lat':10, 'lng':10, 'type':'simple'},
{ 'lat':20, 'lng':20, 'type':'simple'},
{ 'lat':30, 'lng':30, 'type':'simple'},
{ 'lat':50, 'lng':50, 'type':'simple'}

Answer 1

只是为了重新陈述问题后评论中澄清的内容......

每个中的第一个元素markers和newMarkers值相等但不是参考,这很重要.因此,您需要newMarkers更新列表中的所有项目,但如果元素newMarkers具有与现有元素相同的所有属性值,markers那么您希望保留原始元素markers.

下面的解决方案循环遍历所有值newMarkers,如果元素markers具有相同的属性值,markers则使用引用,否则使用newMarkers引用.

const markers = [
  { 'lat':10, 'lng':10, 'type':'simple'},
  { 'lat':20, 'lng':20, 'type':'simple'},
  { 'lat':40, 'lng':40, 'type':'cluster'}
];

const newMarkers = [
  { 'lat':10, 'lng':10, 'type':'simple'},
  { 'lat':20, 'lng':20, 'type':'simple'},
  { 'lat':30, 'lng':30, 'type':'simple'},
  { 'lat':50, 'lng':50, 'type':'simple'}
];

const updatedMarkers = newMarkers.map(newMarker =>
  markers.reduce((accumulator, origMarker) => (
    (
      origMarker.lat  === newMarker.lat  &&
      origMarker.lng  === newMarker.lng  &&
      origMarker.type === newMarker.type
    ) ? origMarker : accumulator
  ), newMarker)
);

markers.map((marker, idx) => {
  console.log(`Element #${idx} from markers is present: ${!!(updatedMarkers.indexOf(marker) + 1)}`);
});
newMarkers.map((marker, idx) => {
  console.log(`Element #${idx} from newMarkers is present: ${!!(updatedMarkers.indexOf(marker) + 1)}`);
});