如何从API返回的对象数组构造指定结构的标记点数组？

嘿，这个需求用JavaScript的**map()数组方法**就能完美解决，这也是最简洁高效的实现方式——毕竟map()的设计初衷就是用来遍历数组并转换每个元素的结构嘛！

核心实现代码 #

直接对原始的response数组调用map()，遍历每个元素时提取lat和lng，封装到position对象中即可：

// 你的原始API响应数据
const response = [ 
  { title: "Map marker 1", lat: 10.0, lng: 10.0 }, 
  { title: "Map marker 2", lat: 11.0, lng: 11.0 } 
];

// 转换为目标结构
const markers = response.map(item => ({
  position: {
    lat: item.lat,
    lng: item.lng
  }
}));

console.log(markers);
// 输出结果：
// [ { position: {lat: 10.0, lng: 10.0} }, { position: {lat: 11.0, lng: 11.0} } ]

为什么这是最优方式？ #

• 原生方法，性能优异：map()是JavaScript数组的原生内置方法，经过浏览器引擎优化，执行效率比手动写for循环更高
• 代码简洁，可读性强：一行箭头函数就能完成转换逻辑，其他开发者一眼就能看懂你在做什么
• 扩展性强：如果后续需要过滤无效的标记（比如缺少经纬度的元素），可以直接在map()前链式调用filter()：

// 过滤掉经纬度无效的元素，再转换结构
const markers = response
  .filter(item => typeof item.lat === 'number' && typeof item.lng === 'number')
  .map(item => ({
    position: {
      lat: item.lat,
      lng: item.lng
    }
  }));

这样就能确保最终的markers数组里只包含有有效经纬度的标记啦~

内容的提问来源于stack exchange，提问作者Filip Blaauw