如何使用JavaScript过滤包含指定tags的对象数组？

看起来你需要根据filter.tags里的标签列表，从arr.data里筛选出符合条件的对象。我分两种常见的需求场景给你解决方案，你可以根据实际情况选择：

场景1：筛选出tags包含所有filter标签的对象 #

也就是对象的tags数组必须同时包含filter里的每一个标签（比如例子里要同时有6和7）：

var arr = { 
  "data": [ 
    { "name": "a", "tags": [1,2,3,4] }, 
    { "name": "b", "tags": [5,6,7,8] } 
  ] 
};
var filter = { "tags" : [6,7] };

// 把filter的标签转成Set，提升查找效率
const filterTagSet = new Set(filter.tags);
// 用filter方法遍历筛选
const res = arr.data.filter(item => {
  // 检查filter的所有标签是否都存在于当前对象的tags中
  return [...filterTagSet].every(tag => item.tags.includes(tag));
});

console.log(res); 
// 输出结果：[{ "name": "b", "tags": [5,6,7,8] }]

场景2：筛选出tags包含至少一个filter标签的对象 #

只要对象的tags里有任意一个filter中的标签就算符合条件：

var arr = { 
  "data": [ 
    { "name": "a", "tags": [1,2,3,4] }, 
    { "name": "b", "tags": [5,6,7,8] } 
  ] 
};
var filter = { "tags" : [6,7] };

const filterTagSet = new Set(filter.tags);
const res = arr.data.filter(item => {
  // 检查当前对象的tags是否有至少一个在filter标签里
  return item.tags.some(tag => filterTagSet.has(tag));
});

console.log(res); 
// 同样输出：[{ "name": "b", "tags": [5,6,7,8] }]

兼容旧环境的写法（不使用ES6特性） #

如果你的项目还需要兼容不支持ES6的浏览器，可以用传统的循环写法：

筛选包含所有标签的兼容版：

var arr = { 
  "data": [ 
    { "name": "a", "tags": [1,2,3,4] }, 
    { "name": "b", "tags": [5,6,7,8] } 
  ] 
};
var filter = { "tags" : [6,7] };

var filterTags = filter.tags;
var res = arr.data.filter(function(item) {
  for (var i = 0; i < filterTags.length; i++) {
    // 如果有一个filter标签不在当前对象的tags里，就排除这个对象
    if (item.tags.indexOf(filterTags[i]) === -1) {
      return false;
    }
  }
  // 所有标签都匹配，保留这个对象
  return true;
});

console.log(res);

筛选包含至少一个标签的兼容版：

var arr = { 
  "data": [ 
    { "name": "a", "tags": [1,2,3,4] }, 
    { "name": "b", "tags": [5,6,7,8] } 
  ] 
};
var filter = { "tags" : [6,7] };

var filterTags = filter.tags;
var res = arr.data.filter(function(item) {
  for (var i = 0; i < item.tags.length; i++) {
    // 如果当前对象的标签里有一个在filter里，就保留这个对象
    if (filterTags.indexOf(item.tags[i]) !== -1) {
      return true;
    }
  }
  // 没有匹配的标签，排除
  return false;
});

console.log(res);

简单说下为什么用Set：Set.has()的查找时间复杂度是O(1)，比数组的includes()/indexOf()的O(n)效率更高，当标签数量比较多的时候，性能差异会很明显。

内容的提问来源于stack exchange，提问作者user2405358