有没有更好的方法来查找数组数组中的属性？

Question

我有一个带有 switch 语句的函数，它查找单个 case，如果没有找到它，则运行 default，这是另一个 switch 语句。它基本上是通过我的整个数组进行查找。我确信有更好的方法来做到这一点我只是 javascript 的新手并且不知道。这是一个片段：

for(var i=0; i < parks.length; i++) {
    switch (parks[i][6]) {            
        case 'wc' : 
            wc.push(L.marker([parks[i][1], parks[i][2]], {icon: parks[i][4]}).bindpopup("<a href='" + parks[i][3] + "'>" + parks[i][0] + "</a>"));
            break;        
        default :
            switch (parks[i][7]) {            
         case 'grill' : 
            grill.push(L.marker([parks[i][1], parks[i][2]], {icon: parks[i][4]}).bindpopup("<a href='" + parks[i][3] + "'>" + parks[i][0] + "</a>"));
            break;        
         default :
            break;
            break;
    }
}

我的 parks 数组的一个例子，因为每个人都在问：

var parks = [
['Spårvagnsparken',59.3298868,18.0031605,'http://leksplay.com/sparvagnsparken', greenIcon, wc, grill, null, null, fence, null, null, null, null],
['Fredhällsparkens plaskdamm',  59.3320485,18.0029481, 'http://leksplay.com/fredhallsparkensplaskdamm', greenIcon, wc, null, null, null, null, null, null, water, null],
['Uggleparken',     59.3343715,18.0040208,'http://leksply.com/uggleparken', greenIcon, wc, null, null, null, null, pfence, null, null, null],
['Observatorielundens Parklek', 59.3413877,18.056007, 'http://leksplay.com/observatorielundensparklek', greenIcon, wc, null, null, null, null, pfence, null, null, toddler],

Answer 1

创建一个调用 returns L.marker 的函数，当条件通过时，在每次迭代时将数组传递给它。只需使用 === 检查索引处的项目是 wc 还是 grill:

const makeMarker = park => L.marker([park[1], park[2]], { icon: park[4] })
  .bindpopup("<a href='" + park[3] + "'>" + park[0] + "</a>");
for (const park of parks) {
  if (park[6] === 'wc') {
    wc.push(makeMarker(park));
  } else if (park[7] === 'grill') {
    grill.push(makeMarker(park));
  }
}

理想情况下，修复您的输入结构，以便在位置 [6]、[7] 等处有一个值数组，而不是不同的值，然后检查数组中的不同值并将标记添加到数组对象：

const categories = ['wc', 'grill', /* ... */];
const markers = Object.fromEntries(
  categories.map(cat => [cat, []])
);
for (const park of parks) {
  const marker = makeMarker(park);
  const cat = categories.find(cat => park[6].includes(cat));
  markers[cat].push(marker);
}

Answer 2

根据你提供的数组，我会

是bindPopup，不是bindpopup
构造一个markers作为对象{}
检索所有 （非 NULL） POI 的 "props"（例如 "toddler"、"wc"等）
迭代检索到的道具，将 newMarker() 推入 markers 对象。

const markers = {};
const newMarker = poi => L.marker([poi.lat, poi.lng], {icon: poi.icon})
                       .bindPopup(`<a href="${poi.url}">${poi.name}</a>`);

const parks = [
  ['Spårvagnsparken', 59.3298868, 18.0031605, 'http://leksplay.com/sparvagnsparken', "greenIcon", "wc", "grill", null, null, "pfence", null, null, null, null],
  ['Fredhällsparkens plaskdamm', 59.3320485, 18.0029481, 'http://leksplay.com/fredhallsparkensplaskdamm', "greenIcon", "wc", null, null, null, null, null, null, "water", null],
  ['Uggleparken', 59.3343715, 18.0040208, 'http://leksply.com/uggleparken', "greenIcon", "wc", null, null, null, null, "pfence", null, null, null],
  ['Observatorielundens Parklek', 59.3413877, 18.056007, 'http://leksplay.com/observatorielundensparklek', "greenIcon", "wc", null, null, null, null, "pfence", null, null, "toddler"],
];

parks.forEach(([name, lat, lng, url, icon, ...props]) => {
  props.filter(Boolean).forEach(prop => {
     if (!(prop in markers)) markers[prop] = []; // Prepare if not exists
     markers[prop].push(newMarker({name, lat, lng, url, icon}));
  });
})

console.log(markers);

示例（仅包含对象，用于演示）：

const markers = {};
const newMarker = poi => poi;

const parks = [
  ['Spårvagnsparken', 59.3298868, 18.0031605, 'http://leksplay.com/sparvagnsparken', "greenIcon", "wc", "grill", null, null, "pfence", null, null, null, null],
  ['Fredhällsparkens plaskdamm', 59.3320485, 18.0029481, 'http://leksplay.com/fredhallsparkensplaskdamm', "greenIcon", "wc", null, null, null, null, null, null, "water", null],
  ['Uggleparken', 59.3343715, 18.0040208, 'http://leksply.com/uggleparken', "greenIcon", "wc", null, null, null, null, "pfence", null, null, null],
  ['Observatorielundens Parklek', 59.3413877, 18.056007, 'http://leksplay.com/observatorielundensparklek', "greenIcon", "wc", null, null, null, null, "pfence", null, null, "toddler"],
];

parks.forEach(([name, lat, lng, url, icon, ...props]) => {
  props.filter(Boolean).forEach(prop => {
     if (!(prop in markers)) markers[prop] = []; // Prepare if not exists
     markers[prop].push(newMarker({name, lat, lng, url, icon}));
  });
})

console.log(markers);

有没有更好的方法来查找数组数组中的属性？

Is there a better way to look up attributes in an array of arrays?

javascript

gis

openstreetmap

leaflet