基于对象参数过滤对象数组：网站国家名称搜索功能实现

Got it, let's break down how to build this search feature that filters countries by name from your given JSON data. Here's a step-by-step solution using JavaScript (the standard for web frontend functionality):

Step 1: Understand the Data Structure #

First, let's recap your data structure to make sure we're targeting the right fields:

let array = { 
  continents: [ 
    { 
      name: "Europe", 
      countries: [ 
        { name: "Austria", adresses: { 1: "one", 2: "two", 3: "three" } }, 
        { name: "Germany", adresses: { 1: "one", 2: "two", 3: "three" } } 
      ] 
    }, 
    { 
      name: "Asia", 
      countries: [ 
        { name: "Thailand", adresses: { 1: "one", 2: "two", 3: "three" } }, 
        { name: "Japan", adresses: { 1: "one", 2: "two", 3: "three" } } 
      ] 
    } 
  ] 
};

We need to dig into each continent's countries array and check if a country's name includes the search keyword.

Step 2: Build the Search Function #

This function handles case-insensitive matching (so "An", "AN", or "an" all work) and returns results grouped by their continent (you can adjust this if you just want a flat list of countries).

function searchCountries(keyword) {
  // Normalize keyword to lowercase for case-insensitive search
  const normalizedKeyword = keyword.toLowerCase();
  const matchingResults = [];

  // Loop through each continent
  array.continents.forEach(continent => {
    // Filter countries where name includes the keyword
    const matchedCountries = continent.countries.filter(country => 
      country.name.toLowerCase().includes(normalizedKeyword)
    );

    // Only add to results if there are matching countries in this continent
    if (matchedCountries.length > 0) {
      matchingResults.push({
        continentName: continent.name,
        countries: matchedCountries
      });
    }
  });

  return matchingResults;
}

Step 3: Test the Function #

When you call searchCountries("an"), here's what you'll get:

[
  {
    continentName: "Asia",
    countries: [
      { name: "Thailand", adresses: { 1: "one", 2: "two", 3: "three" } },
      { name: "Japan", adresses: { 1: "one", 2: "two", 3: "three" } }
    ]
  }
]

Perfect—this matches your expected behavior, since both Thailand and Japan have "an" in their names.

Optional: Flat List of Countries #

If you don't need the continent grouping and just want a flat array of matching countries, use this simplified version:

function searchCountriesFlat(keyword) {
  const normalizedKeyword = keyword.toLowerCase();
  // Use flatMap to combine all country arrays into one, then filter
  return array.continents.flatMap(continent => 
    continent.countries.filter(country => 
      country.name.toLowerCase().includes(normalizedKeyword)
    )
  );
}

// Calling this returns:
// [ { name: "Thailand", ... }, { name: "Japan", ... } ]

Quick Tips #

• Case Sensitivity: We normalized both the keyword and country names to lowercase to make the search user-friendly—users won't have to worry about capitalization.
• Performance: If your dataset grows large, consider pre-processing country names (storing lowercase versions) to avoid converting them every time a search runs.
• Exact Matches: If you ever need exact matches instead of partial ones, replace includes() with ===.

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