即使文本存在，JS 数组也不会返回特定文本的索引值

Question

对 JS 相当陌生。我有一个 HTML table，其中的列按以下顺序排列：大陆、国家等...到目前为止，我有读取 HTML table 的工作代码来创建一个所有国家的数组，然后删除重复项。我还有一个数组，用于在 HTML table 中为国家数组的每个元素查找大陆。

我的问题是我似乎无法在大陆数组中的所有索引中查找特定值（例如“非洲”）。这是我的代码：

//Step 1: create an array to hold each country's continent. The 'countries' array was 
previously created. 
 
   var continents = [];
   for (const element of countries){
     console.log(element);

      var contin = []; 
      for (j = 0 ; j < data.rows.length; j++){
         if (data.rows[j].cells[1].innerHTML.indexOf(element) >= 0) 
         contin.push(data.rows[j].cells[0].innerHTML);
         }
         continents.push(contin);
}

//Step 2: Create a function that can look up all indexes in the continents array for a certain value.
        function getAllIndexes(arr, val) {
          var indexes = [], i;
          for(i = 0; i < arr.length; i++)
              if (arr[i] === val)
              indexes.push(i);
          return indexes;
        }

//Step 3: Run the function to get all index values where continents array = "Africa"
         indexesAfrica = getAllIndexes(continents, "Africa");
         alert(indexesAfrica);

当我运行这个函数的时候，它returns一片空白。我已经在其他阵列上测试了该功能并且它有效。例如，此代码 returns "1,3" 的正确索引：

var funArr = ["test", "Africa", "Hello","Africa"];
indexesAfrica = getAllIndexes(funArr, "Africa");
alert(indexesAfrica);

这让我觉得我的 continents 数组有问题？当我提醒（大洲）时，大洲数组显示了正确的数组项列表，但我似乎无法在其中查找任何内容。想法？

Answer 1

我本来打算将其作为评论留下的，但它似乎可以解决您的情况，并且可能有助于教一些东西。为什么将它们作为 2 个单独的数组？它不是很可扩展。如果您对国家/地区数组进行排序，您将失去与大陆的关联。最好将它们耦合到一个易于过滤的对象数组中（例如，如果您只想显示位于非洲的国家/地区）。

let countries = ["Algeria", "Angola", "Benin", "Botswana", "Burkina Faso", "Burundi", "Cameroon", "Cape Verde", "USA"]
let data = document.querySelector('table');

let globe = countries.map(country => { // using map, we can transform each incoming country into a country/continent object
  let continent = 'N/A'; // just so we have somethign in case we dont find a continent
  [...data.rows].forEach(row => { // data is the table, rows are the <tr> tags, but we need to make it iterable for the loop, so we wrap it in a spread [...] 
    if (row.cells[1].innerText.trim() === country) continent = row.cells[0].innerText.trim();
  })
  return { country: country, continent: continent}; // we return an object back to our map
});
console.log(globe)

//Step 2: Run the function to get all index values where continents array = "Africa"

const africanCountries = globe.filter(e => e.continent === "Africa").map(e => e.country);
console.log(africanCountries)

<table>
  <tr><td>Africa</td><td>Algeria</td></tr>
  <tr><td>Africa</td><td>Angola</td></tr>
  <tr><td>Africa</td><td>Benin</td></tr>
  <tr><td>North America</td><td>USA</td></tr>
  <tr><td>Africa</td><td>Botswana</td></tr>
  <tr><td>Africa</td><td>Burkina Faso</td></tr>
  <tr><td>Africa</td><td>Faso</td></tr>
  <tr><td>Africa</td><td>Burundi</td></tr>
  <tr><td>Africa</td><td>Cameroon</td></tr>
  <tr><td>Africa</td><td>Cape Verde</td></tr>
</table>

更新：要添加纬度和经度，您可以在 map() 中点击索引

let globe = countries.map((country, index) => { // using map, we can transform each incoming country into a country/continent object
  let continent = 'N/A'; // just so we have somethign in case we dont find a continent
  [...data.rows].forEach(row => { // data is the table, rows are the <tr> tags, but we need to make it iterable for the loop, so we wrap it in a spread [...] 
    if (row.cells[1].innerText.trim() === country) continent = row.cells[0].innerText.trim();
  })
  return { 
     country: country, 
     continent: continent,
     lat: countryLat[index],
     long: countryLong[index]
   }; // we return an object back to our map
});

即使文本存在，JS 数组也不会返回特定文本的索引值

JS array not returning index values of specific text even though text exists

javascript

arrays

lookup

indexing