如何实现JavaScript对象数组的全属性（含嵌套）字符串过滤？

Got it, let's solve this problem. You need a filter that searches every property at every level of your objects—including nested objects and arrays—for a matching substring, just like AngularJS's built-in filter but with full support for deep nesting. Here's a robust, easy-to-use solution:

Step 1: Build the Recursive Matching Helper #

First, we need a function that can dive into any value (string, object, array, etc.) and check if it contains your search term. Recursion is key here to handle nested structures:

function matchesSearch(value, searchTerm) {
  // Normalize search term for case-insensitive matching
  const normalizedSearch = searchTerm.toLowerCase().trim();
  
  // Return all items if search term is empty (adjust this logic if needed)
  if (!normalizedSearch) return true;

  // Check strings directly
  if (typeof value === 'string') {
    return value.toLowerCase().includes(normalizedSearch);
  }

  // Check arrays: see if any element matches
  if (Array.isArray(value)) {
    return value.some(item => matchesSearch(item, normalizedSearch));
  }

  // Check objects (skip null values): check every property's value
  if (typeof value === 'object' && value !== null) {
    return Object.values(value).some(val => matchesSearch(val, normalizedSearch));
  }

  // For other types (numbers, booleans), convert to string and check
  return String(value).toLowerCase().includes(normalizedSearch);
}

Step 2: Create the Filter Function #

Use the helper above to filter your array of objects:

function deepFilter(array, searchTerm) {
  return array.filter(item => matchesSearch(item, searchTerm));
}

Step 3: Test with Your Nested Data #

Let's plug in your sample data to verify it works as expected:

// Your sample nested data
const contacts = [
  {
    "title":"Mr.", "name":"John Smith", "firstName":"John", "lastName":"Smith",
    "contactType":{ "name":"test" },
    "addresses":[{ "address":"Test Street One" }, { "address":"Test Street Two" }]
  },
  {
    "title":"Mr.", "name":"Bill Smith", "firstName":"Bill", "lastName":"SMith",
    "contactType":{ "name":"test" },
    "addresses":[{ "address":"Test Street One" }, { "address":"Test Street Two" }]
  }
];

// Test cases
console.log(deepFilter(contacts, 'Jo')); // Returns only John's object
console.log(deepFilter(contacts, 'Mr')); // Returns both objects
console.log(deepFilter(contacts, 'Street Two')); // Returns both objects (matches nested address)
console.log(deepFilter(contacts, 'test')); // Returns both objects (matches contactType.name)

Key Features #

• Case-insensitive matching: Converts both search term and target values to lowercase, so 'mr' matches 'Mr.' and 'smith' matches 'SMith'
• Full deep nesting support: Automatically traverses nested objects (like contactType) and arrays (like addresses)
• Works with all data types: Handles strings, numbers, booleans, etc., by converting non-string values to strings for comparison
• Adjustable empty search behavior: Right now it returns all items if the search term is empty—tweak that line if you need different behavior

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