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

Question

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

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

鉴于您提供的数组，我会

• 是bindPopup，不是bindpopup
• 将amarkers构造为对象{}
• 检索所有（非NULL） POI的“道具”（如"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);

Answer 2

创建一个调用并返回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);
}