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

Question

我正在我的应用程序中实现搜索功能。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 方法，但无法让它们工作。非常感谢这里的任何帮助！！

Answer 1

递归搜索

这是我写的一个话题最近。这是一个通用的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

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

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 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 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 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

不区分大小写的搜索

上面，我们的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 哲学，“做一件事，把它做好”现在应该在你耳边响起

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 解锁了其他可能不是很明显的力量。如果您感兴趣，我建议Monoidal Contravariant Functors 实际上很有用！作者：布赖恩·朗斯多夫 不要让标题吓到你；作者有使这些东西变得容易的诀窍。