javascript - 在一个对象数组中，返回ANY值与特定字符串

Question

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

这是我的数组

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())
})

这里显而易见的问题是，这只是根据名称值返回对象。但是，我需要它将每个对象中的name，custNumber和sneak值与用户搜索进行比较。我已经尝试过每个，object.values和object.entries方法，并且无法让它们运行起来。这里的任何帮助都非常感谢!!

Answer 1

递归搜索

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

下面我们构建一组简单的data，然后展示deepFind如何搜索数据并返回匹配

＆＃13;

＆＃13;

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
  )

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

返回多个搜索结果

上述程序仅返回第一个匹配。如果您想要返回所有结果，我们可以使用生成器完成此操作，这非常适合此任务

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

＆＃13;

＆＃13;

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))
// []

＆＃13;

＆＃13;

＆＃13;

不区分大小写的搜索

上面，我们的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
        )
    )

<强> contramap

高阶函数具有各种用途，可以保持代码清晰和描述性。下面，我们定义了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!。不要让头衔吓到你;作者有把握这些东西的诀窍。

Answer 2

A＆＃39; some＆＃39;在你的过滤器中可以做到这一点，检查所有键。

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

Answer 3

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

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

Answer 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);

Answer 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;
}