javascript - 如何使用过滤器在数组中的对象的多个键值中进行搜索？

Question

我有一个 Wine 数组，其中包含包含每种 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' } ]

我可以弄清楚如何在不区分大小写的情况下搜索 wine 对象，同时指定要搜索的对象的哪个键，如下所示:

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 的值数组中的每个对象。

那么有没有一种方法可以使用过滤器(或其他方法？)来搜索所有键值，甚至更好，多个指定键值并返回匹配对象的数组？

类似于:

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

还是我完全找错了树？

附言。我正在使用 Vue.js 2，所以如果 vue 中有更好的方法，我会洗耳恭听!

Answer 1

您可以使用更通用的函数来扫描字符串的所有 属性。使用 Object.values() 遍历所有属性值，并使用 some 在匹配时立即退出:

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

如果您更喜欢传递特定的键来搜索:

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

调用为

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