javascript - 你如何比较 javascript 中两个不同大小的数组的值(不是索引)？

Question

我有两个数组(items 和 idValues)。 Items 代表 map 上的多边形(项目)，这些多边形被选中并包含它们的 id 值。 idValues 是一个数组，其中包含每个项目侧面信息卡的 id。

当我过滤我的 map 时，我想获取所选多边形的所选 ID，并将这些 ID 与侧面的项目信息卡的 ID 值进行比较，这样，如果我只选择 map 上 2011 年进行的项目, 我只会看到与那些 2011 项目相对应的项目信息卡。

我的问题是，当我尝试比较数组时，它们似乎是按索引而不是按值进行比较，这给了我错误的结果，如果我尝试更改过滤器选择，它最终会过滤已经过滤的数组而不是从整个 idValues 数组重新开始。例如:

idValues = [10-001, 10-002, 10-003, 11-004, 11-005, 11-006, 12-007, 12-008];
items = [11-004, 11-005, 11-006];
//I only want to show the cards that have idValues == to items values, but they are compared by index:
//10-001 !== 11-004
//10-002 !== 11-005 etc...

当数组的每个值具有不同的长度时，如何将它们与另一个值进行比较？我如何确保每次更改过滤要求时它都是一个新查询并过滤已经做出的选择？这里有没有我没见过的帖子可以回答我的问题？

我的代码在下面，感谢您的帮助!

require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/dijit/Legend",
"dojo/_base/array",
"dojo/on",
"dojo/dom",
"dojo/dom-construct",
"dojo/domReady!"
], function(
Map, 
FeatureLayer, 
PopupTemplate, 
Legend,
array,
on,
dom,
domConst

) {

var map = new Map("viewDiv", {
  basemap: "gray-vector",
  center: [ -85.20127, 35.12355 ],
  zoom: 1
});

//Add layer to the map
var serviceUrl = "https://services2.arcgis.com/C8EMgrsFcRFL6LrL/arcgis/rest/services/HISAProjects_WFL1/FeatureServer/0?token=_3OEVd8Vn48n6NCc5StDZJZXhDbQmb6T3mqGZSNDqOQeg9whVAFaSgX2TnzlRsAy9R2CtzlrgdTk-ytdSxkYUyeQJEMV_r4v2hJska2KFGgC9ihtGe0twoO6zCZxcYfycDQmf80zvfRSoI8OtNQWYXLArn0yGc1WnvSInTMd8jm46yLvekFaQOmznJEtX73-bratx_zJGjN_SQ02s4kkgkgveg463iw7Ub1TIr0kjos";
var layer = new FeatureLayer(serviceUrl, {
  outFields: [ "FY", "HISAProjects_final_1262017_cs_2", "HISAProjects_final_1262017_csv1", "HISAProjects_final_1262017_cs_4", "HISAProjects_final_1262017_cs_5", "HISAProjects_final_1262017_csv_", "HISAProjects_final_1262017_cs_3", "HISAProjects_final_1262017_cs_1", "HabitatData12_4_17_ProjectNum"],



  infoTemplate: new PopupTemplate({
    title: "{HISAProjects_final_1262017_cs_4}",
    description: "<br />Lead PI: {HISAProjects_final_1262017_cs_5}"
      + "<br />Region: {HISAProjects_final_1262017_csv_}"
      + "<br />Year: {FY}"
      + "<br />Primary Habitat Type: {HISAProjects_final_1262017_cs_2}"
      + "<br />Secondary Habitat Type: {HISAProjects_final_1262017_cs_3}"
      + "<br />Distance from shore: {HISAProjects_final_1262017_csv1}"
      + "<br />Secondary Distance from shore: {HISAProjects_final_1262017_cs_1}"

      //
     // "Learn more.." link connected to individual main-areaCard info windows


  })
});   

map.addLayer(layer);
var legend = new Legend({
    map: map,
    layerInfos: [{
      layer: layer,
      title: "Habitat Type"
    }]
  }, "legendDiv");
// "Global" Variables
var filter1 = document.getElementById("filterhabitat");
var filter2 = document.getElementById("filterlocation");
var filter3 = document.getElementById("filteryear");  
var button = document.getElementById("button");
var idValues = [];
var elem = document.getElementsByClassName("clickable");
//console.log(elem);
//console.log(elem.attributes);

map.on("load", function(evt){
  legend.startup();

    for(var i = 0; i < elem.length; ++i){
        if(elem[i].attributes.id.value != "undefined"){
          if(elem[i].attributes.id.value){
            var elements = elem[i].attributes.id.value;
            idValues.push(elements);

          } 
        }
      } //end for loop
      console.log("idValues: " + idValues);    

  button.addEventListener("click", function(e){
    habitatValue = filter1.options[filter1.selectedIndex].value;
    distanceValue = filter2.options[filter2.selectedIndex].value;
    yearValue = filter3.options[filter3.selectedIndex].value;

    pushValues(habitatValue, distanceValue, yearValue);  

  });
}); //end of map event function
function pushValues (habitatValue, distanceValue, yearValue){
  var expressionArray = [];
  if (habitatValue) {
    var str = `HISAProjects_final_1262017_cs_2 = '${habitatValue}'`;    
    expressionArray.push(str);
  }

  if (distanceValue) {
    var str = `HISAProjects_final_1262017_csv1 = '${distanceValue}'`;
    expressionArray.push(str);
  }
  if (yearValue) {
    var str = `FY = '${yearValue}'`;
    expressionArray.push(str);
  }

  console.log(expressionArray);
  var definitionExpression = expressionArray.join(' AND ');

  updateDefinitionExpression(definitionExpression);
}


function updateDefinitionExpression(definitionExpression){ 

    //var definitionExpression = "HISAProjects_final_1262017_cs_2 = 'PELAGIC' AND FY = '2010'";
    layer.setDefinitionExpression(definitionExpression);
    layer.on('update-end', function(evt){
    var projNumArr = [];    
   array.map(layer.graphics, function(gra){
      projNumArr.push(gra.attributes.HabitatData12_4_17_ProjectNum);

     });
   var items = projNumArr;
      // console.log("items: " + items);
      // console.log("ids: " + idValues);

      for(i in idValues){
        console.log("items: " + items[i]);
        console.log("idValues: " + idValues[i]);
        if(idValues.length > 0){
            if (idValues[i] !== items[i]){
                $("#" + idValues[i]).hide();
            }
        }
      }     

    }); //END HERE

    map.infoWindow.hide();      

}//end updateDefinitionExpression function

}); // end Function

Answer 1

我假设您要替换的代码是这个 block :

for(i in idValues){
  console.log("items: " + items[i]);
  console.log("idValues: " + idValues[i]);
  if(idValues.length > 0){
    if (idValues[i] !== items[i]){
      $("#" + idValues[i]).hide();
    }
  }
}     

您可以使用 Array .map 获得您想要的功能和 .indexOf功能:

idValues.map(function (v) {
  if (!items.indexOf(v)) $("#" + v).hide();
});

此代码将隐藏 items 中不存在的任何 idValues。