如何檢查數組的至少一項是否包含在 object 的數組中並遍歷所有對象（JS）

Question

我搜索了這個並發現了類似的問題，但我無法為我的具體案例找到解決方案，所以如果這是重復的，我很抱歉。

我正在嘗試為我的網站構建一個過濾器並遇到了這個問題。 我有一個標記對象數組，每個標記對象都有一個標簽數組（我將其命名為“類型”）。

當用戶選擇應顯示的標記類型時，它們將被添加到“selectedFilters”數組中，該數組包含所有選定的過濾器類型作為字符串。 現在我想做的是，我只想顯示標記數組，按所選類型過濾。 這意味着如果標記對象在其類型數組中包含至少一種選定類型，則應顯示它。

const markers = [
{
type: ['Paper', 'Plastic']
},
{
type: ['Burnable', 'Plastic']
}
{
type: ['NotBurnable']
}
.
.
.
]

const selectedFilters = ['Burnable', 'Plastic']

const filteredMarkers = ????

我的想法是使用過濾器和一些方法來檢查是否至少一個過濾器與每個 object 中的類型數組匹配，並僅返回通過的對象。 我已經到了可以使用硬編碼字符串作為過濾器而不是實際的arrat來做到這一點的地步：

const filteredMarkers = this.markers.filter(
          marker => marker.type.some( type => type == 'Plastic') 
        )

如何用實際數組替換硬編碼字符串並循環遍歷它？ 感謝任何建議、提示和建議。 順便說一句，這是一個 vue 項目。 也許在 vue 中構建過濾器有不同的方法？

Answer 1

你的嘗試非常接近。 您只需要檢查selectedFilters .includes()是否是其中一種標記類型。

 const markers = [ { type: ['Paper', 'Plastic'] }, { type: ['Burnable', 'Plastic'] }, { type: ['NotBurnable'] } ] const selectedFilters = ['Burnable', 'Plastic'] const filteredMarkers = markers.filter( marker => marker.type.some(type => selectedFilters.includes(type)) ) console.log(filteredMarkers)

Answer 2

const markers = [
    {
        type: ['Paper', 'Plastic']
    },
    {
        type: ['Burnable', 'Plastic']
    },
    {
        type: ['NotBurnable']
    }
]

const selectedFilters = ['Burnable', 'Plastic']

const filteredMarkers = markers.filter(function(marker, index, arr) {
    return marker.type.some(type => selectedFilters.includes(type));
});

console.log(filteredMarkers);