JavaScript中高效存储坐标信息的方法

我需要在JavaScript代码中存储一些坐标，起初只有10到20个，但现在已有约50个，代码开始变得十分混乱。目前我采用两个数组分别存储纬度和经度，相关代码如下：

function mia_posizione(position) {
    
    let latitudini = [45.830527, 45.879442, 46.017065, 46.045482, 46.025059, 45.980489, 46.029090, 46.084223, 45.836633, 45.837948, 45.837878, 45.834405, 45.836208, 45.832634, 46.481307];
    let longitudini = [9.029344, 8.979577, 8.931969, 8.978964, 8.965355, 8.926994, 8.969981, 9.036319, 9.032914, 9.026279, 9.023992, 9.035057, 9.034544, 9.021575, 9.916223];
    for(let i=0; i<latitudini.length; i++){
        var latLocation =  latitudini[i];
        var lonLocation = longitudini[i];
        var latUser = position.coords.latitude;
        var lonUser = position.coords.longitude;
        var R = 6371;
        var dLat = deg2rad(latLocation - latUser);
        var dLon = deg2rad(lonLocation - lonUser);
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(latUser)) * Math.cos(deg2rad(latLocation)) * Math.sin(dLon/2) * Math.sin(dLon/2); 
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
        var y = R * c;
        var Approssimazione = aprox(y)
        document.getElementById(i).setAttribute("data-index", y);
        const Raggio = document.getElementById(i);
        if(Raggio.dataset.index>1000){
            document.getElementById(i).style.display="none"; 
        }
    }
}

上述坐标仅为其中一部分，请问是否有更便捷的方式来存储和访问这些坐标？

1. 用对象数组整合坐标数据 #

把纬度和经度配对成独立对象，放在同一个数组中，这样每个坐标的纬度、经度不会分离，可读性和维护性大幅提升：

// 整合后的坐标数组，每个元素包含对应的经纬度
const locations = [
  { lat: 45.830527, lon: 9.029344 },
  { lat: 45.879442, lon: 8.979577 },
  { lat: 46.017065, lon: 8.931969 },
  // ... 其他坐标依次添加
];

function mia_posizione(position) {
  // 把循环内不变的变量提到外部，避免重复声明
  const latUser = position.coords.latitude;
  const lonUser = position.coords.longitude;
  const R = 6371;

  locations.forEach((location, index) => {
    const { lat: latLocation, lon: lonLocation } = location;
    const dLat = deg2rad(latLocation - latUser);
    const dLon = deg2rad(lonLocation - lonUser);
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(latUser)) * Math.cos(deg2rad(latLocation)) * Math.sin(dLon/2) * Math.sin(dLon/2); 
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    const distance = R * c;
    
    // 只获取一次DOM元素，避免重复查询
    const targetElement = document.getElementById(index);
    targetElement.setAttribute("data-index", distance);
    if(distance > 1000){
      targetElement.style.display = "none"; 
    }
  });
}

2. 抽离数据到单独文件（适合大量坐标） #

如果坐标数量还会持续增加，可以把坐标数据单独放在JSON文件中，比如locations.json：

[
  {"lat": 45.830527, "lon": 9.029344},
  {"lat": 45.879442, "lon": 8.979577},
  // ... 其他坐标
]

然后通过fetch加载数据，让代码和数据彻底分离：

async function mia_posizione(position) {
  const response = await fetch('./locations.json');
  const locations = await response.json();
  
  const latUser = position.coords.latitude;
  const lonUser = position.coords.longitude;
  const R = 6371;

  locations.forEach((location, index) => {
    // 后续逻辑和之前一致
    const { lat: latLocation, lon: lonLocation } = location;
    const dLat = deg2rad(latLocation - latUser);
    const dLon = deg2rad(lonLocation - lonUser);
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(latUser)) * Math.cos(deg2rad(latLocation)) * Math.sin(dLon/2) * Math.sin(dLon/2); 
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    const distance = R * c;
    
    const targetElement = document.getElementById(index);
    targetElement.setAttribute("data-index", distance);
    if(distance > 1000){
      targetElement.style.display = "none"; 
    }
  });
}

3. 额外优化细节 #

• 给变量起更清晰的名字，比如把y改为distance，一眼就能看出代表距离；
• 用forEach替代传统for循环，代码更简洁易读；
• 避免重复调用document.getElementById(index)，减少DOM查询开销。

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