javascript - 在对象数组中，返回任何值与特定字符串匹配的对象

Posted 2023-03-10

技术标签:

【中文标题】javascript - 在对象数组中，返回任何值与特定字符串匹配的对象【英文标题】：javascript - In an array of objects, returns objects where ANY value matches a specific string 【发布时间】：2018-11-05 09:01:54 【问题描述】：

我正在我的应用程序中实现搜索功能。 UI 中的搜索结果基于对象数组返回。本质上，我要做的是遍历每个对象中的名称、custNumber 和潜行值，并且只返回包含包含字符串的值的对象（从用户搜索栏生成）。这个想法是用户可以搜索对象中的任何内容并产生正确的结果

这是我的数组

var result = [
  name: 'Donna Shomaker',
  custNumber: '6658924351',
  sneak: 'string1 string1 string1',
  foo: false,
  bar: false,
,

  name: 'Ron Duluth',
  custNumber: '8812654434',
  sneak: 'string2 string2 string2',
  foo: false,
  bar: false,
,

  name: 'Jimmy Dawson',
  custNumber: '8908198230',
  sneak: 'string3 string3 string3',
  foo: false,
  bar: false,

]

这就是我已经走了多远

return result.filter(convo => 
  return convo.name.toLowerCase().includes(searchbarVal.toLowerCase())
)

这里明显的问题是这只返回基于名称值的对象。但是，我需要将每个对象中的名称、custNumber 和潜行值与用户搜索进行比较。我已经尝试过 forEach、object.values 和 object.entries 方法，但无法让它们工作。非常感谢这里的任何帮助！

【问题讨论】：

检查这个问题和答案。它可能会有所帮助。 ***.com/questions/34398279/… 【参考方案1】：

递归搜索

这是我写的关于recently 的主题。这是一个通用的deepFind。它以递归方式工作，可以“搜索”任何输入值。

下面我们构造一个简单的data集合，然后展示deepFind如何搜索数据并返回匹配项

const data =
  [  a: 1, b: 1 
  ,  a: 2, b: 2, c:  d: [  e: 2  ]  
  ,  a: 3, b:  c:  d:  e:  f: 3     
  ]

const deepFind = (f, obj = ) =>
 if (Object (obj) === obj)
   if (f (obj) === true)
      return obj

    for (const [ k, v ] of Object.entries (obj))
     const res =
        deepFind (f, v)

      if (res !== undefined)
        return res
    
  

  return undefined


console.log
  ( deepFind (x => x.a === 1, data)             //  a: 1, b: 1 
  , deepFind (x => x.e === 2, data)             //  e: 2 
  , deepFind (x => Array.isArray(x.d), data)    //  d: [  e: 2  ] 
  , deepFind (x => x.f === 3, data)             //  f: 3 
  , deepFind (x => x.e && x.e.f === 3, data)    //  e:  f: 3  
  , deepFind (x => x.z === 9, data)             // undefined
  )

deepFind 以上仅适用于直接使用 === 匹配值。因为它接受高阶函数f，所以我们可以用有意义的方式专门化它的行为。

字符串匹配使用deepFind

下面我们使用deepFind对我们的通用字符串匹配search函数进行编码

const search = (query = "", data) =>
  deepFind
    ( o =>
        Object.values (o) .some (v =>
          String (v) === v && v .includes (query))
    , data
    )

search ("D", result)
//  name: "Donna Shomaker", ... 

search ("Du", result)
//  name: "Ron Duluth", ... 

search ("ng3", result)
//  name: "Jimmy Dawson", sneak: "string3 string3 string3", ... 

search ("zzz", result)
// undefined

在您自己的浏览器中验证结果

const deepFind = (f, obj = ) =>
 if (Object (obj) === obj)
   if (f (obj) === true)
      return obj

    for (const [ k, v ] of Object.entries (obj))
     const res =
        deepFind (f, v)
      
      if (res !== undefined)
        return res
    
  

  return undefined


const search = (query = "", data) =>
  deepFind
    ( o =>
        Object.values (o) .some (v =>
          String (v) === v && v .includes (query))
    , data
    )

const result =
  [  name: 'Donna Shomaker'
    , custNumber: '6658924351'
    , sneak: 'string1 string1 string1'
    , foo: false
    , bar: false
    
  ,  name: 'Ron Duluth'
    , custNumber: '8812654434'
    , sneak: 'string2 string2 string2'
    , foo: false
    , bar: false
    
  ,  name: 'Jimmy Dawson'
    , custNumber: '8908198230'
    , sneak: 'string3 string3 string3'
    , foo: false
    , bar: false
    
  ]

console.log (search ("D", result))
//  name: "Donna Shomaker", ... 

console.log (search ("Du", result))
//  name: "Ron Duluth", ... 

console.log (search ("ng3", result))
//  name: "Jimmy Dawson", sneak: "string3 string3 string3", ... 

console.log (search ("zzz", result))
// undefined

返回多个搜索结果

上面的程序只返回 first 匹配。如果您想返回所有结果，我们可以使用非常适合此任务的生成器来实现

const deepFindAll = function* (f, o = )
 if (Object (o) === o)
   if (f (o) === true)
      yield o
    for (const [ _, v ] of Object.entries (o))
      yield* deepFindAll (f, v)

现在我们使用我们的新生成器实现searchAll

const searchAll = (query = "", data = ) =>
  Array.from
    ( deepFindAll
        ( o =>
            Object.values (o) .some (v =>
              String (v) === v && v .includes (query))
        , data
        )
    )

searchAll ("81", result)
// [  custNumber: '8812654434', ... 
// ,  custNumber: '8908198230', ... 
// ]

searchAll ("Du", result)
// [  name: "Ron Duluth", ...  ]

searchAll ("zzz", result)
// []

在下面的浏览器中运行searchAll

const deepFindAll = function* (f, o = )
 if (Object (o) === o)
   if (f (o) === true)
      yield o
    for (const [ _, v ] of Object.entries (o))
      yield* deepFindAll (f, v)
  


const searchAll = (query = "", data = ) =>
  Array.from
    ( deepFindAll
        ( o =>
            Object.values (o) .some (v =>
              String (v) === v && v .includes (query))
        , data
        )
    )

const result =
  [  name: 'Donna Shomaker'
    , custNumber: '6658924351'
    , sneak: 'string1 string1 string1'
    , foo: false
    , bar: false
    
  ,  name: 'Ron Duluth'
    , custNumber: '8812654434'
    , sneak: 'string2 string2 string2'
    , foo: false
    , bar: false
    
  ,  name: 'Jimmy Dawson'
    , custNumber: '8908198230'
    , sneak: 'string3 string3 string3'
    , foo: false
    , bar: false
    
  ]

console.log (searchAll ("81", result))
// [  custNumber: '8812654434', ... 
// ,  custNumber: '8908198230', ... 
// ]

console.log (searchAll ("Du", result))
// [  name: "Ron Duluth", ...  ]

console.log (searchAll ("zzz", result))
// []

不区分大小写的搜索

在上面，我们的search 函数使用v .includes (query)，但是因为我们使用的是高阶函数，所以我们可以根据需要使行为具体化。

以searchAll 为例，我们可以如下修改

const searchAll = (query = "", data = ) =>
  Array.from
    ( deepFindAll
        ( o =>
            Object.values (o) .some (v =>
              String (v) === v && v .includes (query))
              String (v) === v
                && v .toLowerCase () .includes (query .toLowerCase ()))
        , data
        )
    )

但这会让我们的功能变得一团糟。是时候抽象一点，并通过给我们的意图命名来解释我们在做什么

const anyString = f => o =>
  Object.values (o) .some (v =>
    String (v) === v && f (v))

const caseInsenstiveMatch = (x, y) =>
  x.toLowerCase () .includes (y.toLowerCase ())

const searchAll = (query = "", data = ) =>
  Array.from
    ( deepFindAll
        ( anyString (v =>
            caseInsenstiveMatch (v, query))
        , data
        )
    )

隔离行为和定义单独的函数是编写好的程序的重要部分。并排显示search 和searchAll 突出了这一重要性。新的帮助器anyString 和caseInsensitiveSearch 保持代码清晰，但也更容易在需要的地方重用行为。

const search = (query = "", data) =>
  deepFind
    ( anyString (v =>
        caseInsenstiveMatch (v, query))
    , data
    )

const searchAll = (query = "", data = ) =>
  Array.from
    ( deepFindAll
        ( anyString (v =>
            caseInsenstiveMatch (v, query))
        , data
        )
    )

对比图

高阶函数有各种各样的用途来保持我们的代码简洁和描述性。下面，我们定义了match 和lower 的简单版本。然后使用contramap，将我们的程序整合在一起。

这里的重点是每个功能的简单性。一个简单的函数更容易测试，更容易调试，也更容易与其他简单函数结合。 Unix 哲学"Do one thing and do it well" 现在应该在你耳边响起

const contramap = (f, g) =>
  (x, y) => f (g (x), g (y))

const match = (x = "", y = "") =>
  x .includes (y)

const lower = (x = "") =>
  x .toLowerCase ()

const caseInsenstiveMatch =
  contramap (match, lower)

const anyString = (f) => (o = ) =>
  Object.values (o) .some (v =>
    String (v) === v && f (v))

const searchAll = (query = "", data = ) =>
  Array.from
    ( deepFindAll
        ( anyString (v =>
            caseInsenstiveMatch (v, query))
        , data
        )
    )

Contramap 可以解锁其他可能不会立即显现的能力。如果你感兴趣，我推荐 Brian Lonsdorf 的 Monoidal Contravariant Functors are actually useful!。不要让标题吓到你；作者有使这些东西变得简单的诀窍。

【讨论】：

这很好用——这里唯一的问题是我试图避免区分大小写的搜索查询。您会在我原来的帖子中注意到我有两个 toLowercase 方法（一个用于搜索 val，一个用于对象中的值）。因此，如果用户输入“ron”，它仍然需要返回“Ron”对象这里使用高阶函数背后的想法是，您可以在需要的地方指定该行为，同时保持基本函数的通用性。对于不区分大小写的匹配，您可以将search 或searchAll 修改为String (v) === v.toLowerCase () && v .includes (query.toLowerCase ())。我也将进行另一次编辑以向您展示另一种方式。【参考方案2】：

过滤器中的“一些”可能会起作用，检查所有键。

return result.filter(convo => 
  return Object.keys(convo).some(key => 
     return convo[key].toLowerCase().includes(searchbarVal.toLowerCase())
  )
)

【讨论】：

OP 示例数据包含布尔值，如果对它们调用 toLowerCase 会引发错误。【参考方案3】：

function searchObj(search)
  let answer = [];
  result.forEach(re => 
    if(JSON.stringify(re).indexOf(search) > 0)
      answer.push(re)
    
  );
  return answer;

遍历数组的每个元素，将它们转换为字符串并使用indexOf 查找匹配条件。这样您就可以节省一些循环，而无需循环每个元素的每个键。

【讨论】：

如果搜索是“”，您的函数将匹配所有对象，而此字符不是 OP 示例值的一部分。【参考方案4】：

试试

let search= result.filter(x=> ['name','custNumber','sneak']
     .reduce((o,a)=> x[a].toLowerCase().includes(query.toLowerCase())||o, false) );

query 是你的searchbarVal.toLowerCase()

var result = [
  name: 'Donna Shomaker',
  custNumber: '6658924351',
  sneak: 'string1 string1 string1',
  foo: false,
  bar: false,
,

  name: 'Ron Duluth',
  custNumber: '8812654434',
  sneak: 'string2 string2 string2',
  foo: false,
  bar: false,
,

  name: 'Jimmy Dawson',
  custNumber: '8908198230',
  sneak: 'string3 string3 string3',
  foo: false,
  bar: false,

]

let query="89"; // searchbarVal.toLowerCase()

let search= result.filter(x=> ['name','custNumber','sneak'].reduce((o,a)=> x[a].toLowerCase().includes(query.toLowerCase())||o, false) );

console.log(search);

【讨论】：

【参考方案5】：

您可以遍历对象并尝试执行以下操作：

var result = [
  name: 'Donna Shomaker',
  custNumber: '6658924351',
  sneak: 'string1 string1 string1',
  foo: false,
  bar: false,
,

  name: 'Ron Duluth',
  custNumber: '8812654434',
  sneak: 'string2 string2 string2',
  foo: false,
  bar: false,
,

  name: 'Jimmy Dawson',
  custNumber: '8908198230',
  sneak: 'string3 string3 string3',
  foo: false,
  bar: false,

];

var searchStr = "Donna";

console.log(searchObj(searchStr));

function searchObj(search)
  var searchResult = [];
  for(var obj in result)
      var str = JSON.stringify(result[obj]);
      if(str.indexOf(search) > 0)
        searchResult.push(result[obj]);
      
  
  return searchResult;

【讨论】：

以上是关于javascript - 在对象数组中，返回任何值与特定字符串匹配的对象的主要内容，如果未能解决你的问题，请参考以下文章

javascript - 如果在子对象中找到值，则搜索嵌套对象数组并返回父对象[重复]

javascript Javascript - 仅返回对象数组中的唯一值

javascript在嵌套对象/数组中按值查找

在Javascript中推送不重复的数组并更改对象的属性值？

javascript基础：逻辑运算符

JavaScript 通过数组过滤并仅基于一个值的匹配返回