如何使用过滤器搜索数组中对象的多个键值?

问题描述

我有一系列葡萄酒，其中包含带有每种葡萄酒数据的对象:

I have an array of wines containing objects with data for each wine:

var wines = [
  { _id: '59a740b8aa06e549918b1fda',
    wineryName: 'Some Winery',
    wineName: 'Pinot Noir',
    wineColor: 'Red',
    imageLink: '/img/FortBerensPN.png' },
  { _id: '59a7410aaa06e549918b1fdb',
    wineryName: 'Some Winery',
    wineName: 'Pinot Gris',
    wineColor: 'White',
    imageLink: '/img/FortBerensPG.png' },
  { _id: '59a74125aa06e549918b1fdc',
    wineryName: 'Some Winery',
    wineName: 'Rose',
    wineColor: 'Rose',
    imageLink: '/img/FortBerensRose.png' },
  { _id: '59a74159aa06e549918b1fdd',
    wineryName: 'Some other Winery',
    wineName: 'Rose',
    wineColor: 'Rose',
    imageLink: '/img/FortBerensRose.png' },
  { _id: '59a7417aaa06e549918b1fde',
    wineryName: 'Some other Winery',
    wineName: 'Pinot Gris',
    wineColor: 'White',
    imageLink: '/img/FortBerensPG.png' },
  { _id: '59a8721f4fd43b676a1f5f0d',
    wineryName: 'Some other Winery',
    wineName: 'Pinot Gris',
    wineColor: 'White',
    imageLink: '/img/FortBerensPG.png' },
  { _id: '59a872244fd43b676a1f5f0e',
    wineryName: 'Winery 3',
    wineName: 'Pinot Noir',
    wineColor: 'Red',
    imageLink: '/img/FortBerensPN.png' } ]

我可以弄清楚如何搜索(不区分大小写)酒对象，同时指定要搜索对象的键，如下所示:

I can figure out how to search -- case insensitive -- for a wine object, while specifying which key of the object to search in, like this:

var search = 'Noir'

filteredWines = function () {
  return wines.filter(function(wine){
    return (wine.wineName.toLowerCase().indexOf(search.toLowerCase())>=0;
  });
};

返回:

[ { _id: '59a740b8aa06e549918b1fda',
    wineryName: 'Some Winery',
    wineName: 'Pinot Noir',
    wineColor: 'Red',
    imageLink: '/img/FortBerensPN.png' },
  { _id: '59a872244fd43b676a1f5f0e',
    wineryName: 'Winery 3',
    wineName: 'Pinot Noir',
    wineColor: 'Red',
    imageLink: '/img/FortBerensPN.png' } ]

但是，如果 var search ='Winery 3'或 var search ='red'，则它显然不会返回任何结果，因为它查找的 wineName .

However, if var search = 'Winery 3' or var search = 'red' then it will obviously return no results, as it's looking in the value of wineName of each object in the array.

有没有办法使用过滤器(或另一种方法?)搜索所有键值，甚至更好地搜索多个指定键值并返回匹配对象的数组?

So is there a way to use filter (or another method?) to search through all key values, or even better, multiple specified key values and return an array of the matching objects?

类似的东西:

filteredWines = function () {
  return wines.filter(function(wine){
    return ((wine.wineName.toLowerCase() && wine.wineName.toLowerCase()
          && wine.wineName.toLowerCase()).indexOf(search.toLowerCase())>=0;
  });
};

还是我完全把树弄错了?

Or am I completely barking up the wrong tree?

PS.我正在使用Vue.js 2，因此，如果在vue内有更好的方法，那我就会不知所措！

PS. I'm using Vue.js 2 so if there's a better way inside vue then I'm all ears!

推荐答案

您可以拥有一个更通用的函数，该函数将扫描 all 字符串的属性.使用 Object.values()遍历所有属性值，并在遇到匹配项后立即使用 some 纾困:

You could have a more generic function that will scan all the properties for the string. Loop through all property values with Object.values() and use some to bail out as soon as you have a match:

filteredWines = function (search) {
    var lowSearch = search.toLowerCase();
    return wines.filter(function(wine){
        return Object.values(wine).some( val =>
            String(val).toLowerCase().includes(lowSearch)
        );
    });
}

如果您希望通过特定的键来搜索:

If you prefer to pass specific keys to search in:

filteredWines = function (search, keys) {
    var lowSearch = search.toLowerCase();
    return wines.filter(function(wine){
        return keys.some( key =>
            String(wine[key]).toLowerCase().includes(lowSearch)
        );
    });
}

呼叫为

filteredWines('Winery 3', ['wineryName', 'wineName']);

这篇关于如何使用过滤器搜索数组中对象的多个键值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！